Favicon na firemním webu: jak nastavit ikonu v záložce prohlížeče
Na první pohled jde o drobnost: malý obrázek vedle názvu stránky v záložce prohlížeče. Přesto favicon patří k základům profesionální online prezentace stejně jako logo v hlavičce webu nebo firemní e-mail na vlastní doméně. Když chybí, prohlížeč zobrazí generickou ikonu a web působí nedodělaně. Když je rozmazaný nebo nečitelný, zákazník si vás hůř zapamatuje mezi desítkami otevřených záložek.
Favicon (zkráceně „favorite icon“) je vizitka vaší značky v prostředí, kde lidé tráví hodiny denně. Pomáhá rozpoznat váš web v historii prohlížení, na panelu záložek i v seznamu otevřených karet. U firemního webu jde navíc o signál důvěryhodnosti: stejně jako HTTPS a zámek v adresním řádku ukazuje, že na detailech vám záleží.
V tomto textu si vysvětlíme, co favicon znamená pro marketing, jaké formáty a rozměry zvolit, jak ji na web dostat bez zbytečného stresu a na co si dát pozor po spuštění. Nepotřebujete být programátor; stačí mít připravené logo a vědět, kam favicon patří v rámci celkové identity webu.
Co je favicon a proč na ní záleží pro značku i marketing
Favicon je malý grafický symbol propojený s konkrétní adresou webu. Prohlížeč ho načte z hlavičky stránky (HTML) nebo z kořenové složky webu a zobrazí vedle titulku stránky. Na mobilu se může objevit i při ukládání stránky na plochu, pokud máte nastavené další ikony pro Apple nebo Android.
Pro malou firmu má favicon tři praktické role. Zaprvé zvyšuje rozpoznatelnost: zákazník, který si u vás prohlídl ceník a vrátí se za týden, snáze najde správnou záložku. Zadruhé doplňuje vizuální identitu – barvy a tvar ikony by měly ladit s logem v hlavičce webu a s materiály, které posíláte e-mailem. Zatřetí přispívá k celkovému dojmu z webu: návštěvník podvědomě posuzuje kvalitu služby i podle toho, zda web vypadá „hotově“.
Favicon přímo nezaručí první místo ve vyhledávání, ale spolu s kvalitními meta titulky a popisy utváří konzistentní značku ve výsledcích Google. Některé prohlížeče zobrazují favicon u výsledků vyhledávání; čitelná ikona tak může zvýšit míru prokliku, protože váš odkaz v seznamu lépe vynikne.
Velikost, formát a návrh: jak favicon nepřeplnit detaily
Nejčastěji se setkáte s formátem ICO nebo PNG. PNG je jednoduchý na export z grafického programu; ICO může obsahovat více velikostí v jednom souboru. Moderní prohlížeče zvládnou i SVG favicon, která se škáluje bez ztráty ostrosti – hodí se pro jednoduché logotypy, u složitých log ale pozor na drobné prvky.
Doporučené rozměry pro univerzální použití: 32×32 pixelů pro klasickou záložku, 180×180 pixelů pro Apple touch icon (iPhone a iPad) a často 192×192 a 512×512 pixelů pro webový manifest a Android. Ikona musí být čitelná i v nejmenší velikosti – typicky zjednodušíte logo na symbol bez dlouhého textu firmy. Kontrastní barvy a jednoduchý tvar fungují lépe než tenké linky nebo přechody.
Při návrhu myslete na tmavé i světlé pozadí panelu prohlížeče. Pokud má logo světlé barvy, přidejte jemný obrys nebo použijte čtvercové pozadí v barvě značky. Nástroje jako RealFaviconGenerator vygenerují sadu souborů a ukážou náhled v různých prostředích; ušetří čas oproti ručnímu exportu desítky variant.
Jak favicon vložit na firemní web
Způsob závisí na tom, jak web vznikl. U WordPressu nebo jiného redakčního systému bývá favicon v nastavení vzhledu (často „Identita webu“ nebo „Site Icon“). Nahrajete čtvercový obrázek a systém sám vytvoří potřebné velikosti. U webů z tvůrce stránek hledejte sekci Branding nebo Favicon v nastavení projektu.
Pokud web tvoří vývojář, favicon se obvykle přidá do kořene webu jako soubor favicon.ico a do hlavičky stránky pomocí značky link s atributem rel. Podrobnosti k atributům rel popisuje dokumentace MDN Web Docs. Důležité je, aby stejná ikona byla dostupná na všech podstránkách – ne jen na titulní stránce.
Po nahrání vždy otestujte v anonymním okně prohlížeče. Prohlížeče favicon agresivně ukládají do mezipaměti; pokud vidíte starou ikonu, vymažte cache nebo otevřete web v jiném prohlížeči. Kontrola favicon patří i do pravidelné údržby firemního webu, stejně jako kontrola odkazů nebo rychlosti načítání.
Favicon, Open Graph a mobilní záložky: jak to držet pohromadě
Favicon není totéž co náhled při sdílení na Facebooku nebo LinkedIn – tam rozhodují meta tagy Open Graph a větší obrázek og:image. Přesto by všechny tyto prvky měly vycházet ze stejné vizuální identity. Článek o Open Graph a náhledu webu při sdílení popisuje, jak nastavit velký obrázek pro sociální sítě; favicon zůstává menší, ale barvy a styl by měly být sladěné.
Na mobilu může návštěvník přidat váš web na plochu. Bez správné Apple touch icon se místo loga objeví screenshot stránky nebo obecná ikona. Webový manifest (soubor manifest.json) popisuje název aplikace a ikony pro Android; základy vysvětluje průvodce web.dev. U běžného prezentačního webu stačí favicon a Apple touch icon; manifest je užitečný, pokud chcete působit jako „aplikace“ na ploše.
Při rebrandu nezapomeňte aktualizovat favicon ve stejný den jako logo na webu a v e-mailovém podpisu. Nekonzistence mate stávající zákazníky a snižuje důvěru. Stejně jako u 301 přesměrování při změně adres jde o detail, který chrání návštěvnost a značku.
Nejčastější chyby a jak je rychle opravit
Chybějící favicon je nejviditelnější problém – prohlížeč zobrazí prázdnou nebo výchozí ikonu. Druhá častá chyba je příliš složité logo v miniaturách: text názvu firmy v 16×16 pixelech nelze přečíst. Třetí problém bývá špatná cesta k souboru (odkaz vede na neexistující adresu), což můžete odhalit v nástrojích pro vývojáře v prohlížeči v záložce Síť.
Pozor také na příliš velký soubor favicon. Ikona by měla být malá v kilobajtech; obří PNG zbytečně zpomalí načítání, i když dopad je menší než u hero fotek. Obecná pravidla pro výkon webu najdete v textu o rychlosti načítání firemního webu.
Pokud provozujete více jazykových verzí nebo subdomén, každá by měla mít favicon odpovídající značce – případně společnou ikonu s drobným rozlišením pro lokální trh. U testovací verze webu na jiné adrese neponechávejte favicon výchozího šablony; i interní náhled pak působí neprofesionálně vůči klientům, kterým odkaz pošlete ke schválení.
Praktické shrnutí
Favicon je malý prvek s velkým vlivem na dojem z firemního webu. Připravte čtvercovou, zjednodušenou verzi loga, exportujte potřebné velikosti nebo použijte generátor ikon, vložte je do webu podle platformy a po spuštění ověřte zobrazení v několika prohlížečích. Sladění s hlavičkou, Open Graph a pravidelnou údržbou udrží značku konzistentní.
WebRift se specializuje na tvorbu prezentačních webových stránek pro firmy – favicon i související nastavení řešíme v rámci spuštění projektu, aby web působil profesionálně od první návštěvy. Pokud chcete nový web nebo audit stávajícího, napište nám přes kontaktní formulář na webrift.cz; pomůžeme vám s návrhem, implementací i detaily, které návštěvníci vnímají podvědomě, ale rozhodují o důvěře.