Co je favicon a proč je pro váš web důležitý?

Favicon (zkratka z anglického „favorite icon“, tedy „oblíbená ikona“) je malý čtvercový obrázek, který představuje web v kartách prohlížeče, záložkách, historii, výsledcích vyhledávání Google, na domovských obrazovkách telefonů i v nainstalovaných webových aplikacích. Je důležitý, protože dává vašemu webu na první pohled rozpoznatelnou tvář, usnadňuje jeho nalezení mezi mnoha otevřenými kartami, působí profesionálně a důvěryhodně a dnes se zobrazuje i vedle názvu vašeho webu ve výsledcích Google. Bez něj návštěvníci vidí obecný symbol zeměkoule nebo prázdné stránky a váš server plní logy chybami 404. Kompletní sadu faviconů můžete zdarma vytvořit pomocí generátoru faviconů MakeFav.

Co je favicon?

Favicon je drobná grafika s vaší značkou, obvykle zjednodušená verze loga nebo jediné písmeno či symbol, kterou si prohlížeče a další software stahují z vašeho webu a zobrazují všude, kde potřebují kompaktní vizuální identifikátor. V desktopovém prohlížeči se obvykle vykresluje v rozměru 16 × 16 CSS pixelů, ale samotný soubor by měl být větší, aby byl ostrý i na displejích s vysokou hustotou pixelů.

Technicky je favicon jen obrazový soubor odkazovaný z vašeho HTML (nebo nalezený na výchozím místě), který si klienti stahují odděleně od obsahu stránky. Dnes už „favicon“ málokdy znamená jediný soubor. Moderní web obvykle nasazuje několik verzí téže ikony, aby prohlížeče, vyhledávače, iOS i Android dostaly formát a velikost, které jim vyhovují.

Stručná historie faviconu

Favicon sahá až do března 1999, kdy Microsoft vydal Internet Explorer 5. Prohlížeč umožňoval ukládat stránky do seznamu „Oblíbené“ a také hledal v kořenovém adresáři webu malý soubor ikony s názvem favicon.ico, který zobrazil vedle každé uložené položky. Myšlenka byla jednoduchá: pokud web poskytl /favicon.ico, ikona se objevila vedle záložky.

Další prohlížeče tuto funkci brzy převzaly a prohlížení na kartách ji učinilo mnohem užitečnější. Jakmile se karty staly hlavním způsobem navigace, změnil se favicon z ozdoby záložek v základní pomůcku pro orientaci. Postupem let se přístup vyvíjel:

• Začátek 21. století: prvek <link rel="icon"> umožnil webům odkázat na ikonu na libovolné URL místo pouze v kořenovém adresáři a prohlížeče jiné než IE začaly přijímat soubory PNG a GIF.
• Desátá léta: Apple představil apple-touch-icon pro domovské obrazovky iOS a Android s Windows přidaly vlastní konvence, například ikony v manifestu a dlaždicové obrázky.
• Dnes: favicony SVG, manifesty webových aplikací, ikony přizpůsobené tmavému režimu a požadavky Google na favicony ve výsledcích vyhledávání z nich udělaly malou, ale skutečnou součást technického nastavení webu.

Kde se favicony dnes zobrazují

Váš favicon se zobrazuje na mnohem více místech než jen v kartě prohlížeče. Hlavní z nich jsou:

• Karty prohlížeče: nejviditelnější místo, kde je ikona často jediné, co vidíte, když je otevřeno mnoho karet.
• Záložky a oblíbené položky: ikona je vedle názvu stránky v panelech záložek a v nabídkách.
• Historie a nejnavštěvovanější stránky: prohlížeče zobrazují favicony v seznamech historie a na stránkách nové karty.
• Výsledky vyhledávání Google: na mobilech i počítačích Google zobrazuje favicon webu vedle jeho názvu a adresy URL.
• Domovské obrazovky: když návštěvník přidá váš web na domovskou obrazovku v iOS nebo Androidu, stane se touch ikona nebo ikona z manifestu zástupcem ve stylu aplikace.
• Nainstalované PWA: progresivní webová aplikace používá ikony ze svého manifestu pro ikonu na ploše, úvodní obrazovku a přepínač úloh.
• Dlaždice Windows a připnuté weby: starší verze Windows a Edge používaly dlaždicové obrázky definované pro připnuté weby; moderní verze většinou využívají vaše standardní ikony.
• Náhledy odkazů v některých aplikacích: některé chatovací a produktivní nástroje (známým příkladem je Slack) zobrazují favicon webu vedle rozbaleného odkazu. Většina náhledů se opírá hlavně o obrázky Open Graph, ale malou značku často dodá právě favicon.

Proč je favicon pro váš web důležitý

Rozpoznatelnost značky

Lidé rozpoznají barvy a tvary rychleji, než přečtou text. Jednotná ikona opakující se v kartách, záložkách a výsledcích vyhledávání vytváří při každém zobrazení pocit známosti, což je bezplatná prezentace značky při každé návštěvě.

Důvěra a věrohodnost

Chybějící favicon dělá z webu dojem nedokončeného projektu. Čistá, správně vykreslená ikona je malým signálem, že se někdo stará o detaily, což podporuje dojem, že je web legitimní. Není to bezpečnostní prvek a phishingové weby mohou ikony kopírovat, ale prázdná výchozí ikona firmě jen zřídka pomůže působit etablovaně.

Míra prokliku ve výsledcích vyhledávání

Protože Google zobrazuje favicon vedle vašeho výsledku, stává se součástí toho, jak váš výsledek vypadá vedle konkurence. Google nezveřejňuje žádný vliv faviconu na pozice a zlepšení umístění byste neměli očekávat. Přínos spočívá ve vizuálním rozpoznání: uživatelé, kteří vaši ikonu znají, si vašeho výsledku snáz všimnou a vyberou si jej, zejména na mobilech, kde jsou výsledky kompaktní.

Použitelnost při mnoha otevřených kartách

Když má prohlížeč otevřeno dvacet karet, názvy se zkrátí na nic a zůstane jen favicon. Výrazná ikona lidem umožní okamžitě najít vaši kartu a vrátit se na ni, místo aby otevírali duplikát nebo na ni zapomněli.

Profesionální dojem

Dobře navržený favicon ukazuje stejnou péči o detail jako zbytek vašeho webu. Ať jde o produktové stránky, dokumentaci, blogy nebo webové aplikace, je to jedno z nejlevnějších vylepšení, které můžete přidat.

Přístupnost při hledání karet

Ikony pomáhají uživatelům, kteří se orientují spíš vizuálně než čtením, včetně lidí s dyslexií nebo kognitivními odlišnostmi, a také všem, kdo rychle přepínají mezi úkoly. Ikonu s vysokým kontrastem a jednoduchým tvarem je snazší vyhledat. Pamatujte však, že favicon je pouze doplněk: nenahrazuje jasný název stránky, na který se spoléhají odečítače obrazovky a asistivní technologie.

Co se stane, když favicon nemáte

Prohlížeče automaticky žádají o /favicon.ico v kořenovém adresáři vaší domény, i když jej vaše HTML nezmiňuje. Pokud soubor neexistuje, stane se několik věcí:

• Obecná ikona: návštěvníci vidí v kartě a záložkách výchozí glóbus, dokument nebo prázdnou ikonu, což působí anonymně.
• Chyby 404 ve vašich lozích: každý prohlížeč, který o soubor požádá, vygeneruje neúspěšný požadavek. Na vytížených webech to přidává šum do přístupových logů, monitoringu chyb i analytiky a může to zakrýt skutečné problémy.
• Žádná ikona ve výsledcích Google: bez platného, procházitelného faviconu zobrazí Google vedle vašeho výsledku výchozí zástupný symbol.
• Zbytečné požadavky: prohlížeče to mohou zkoušet opakovaně, což přidává na váš server malou, ale zbytečnou zátěž.

I velmi jednoduchá ikona je lepší než žádná, protože odstraní chyby 404 a dá uživatelům něco rozpoznatelného.

Formáty faviconů vysvětleny

Žádný jediný formát nepokryje všechny platformy, proto většina webů používá malou sadu souborů.

Starší dlaždicové obrázky pro Windows (nastavované přes browserconfig.xml) byly potřeba pro Internet Explorer 11 a starý Edge. Dnes jsou potřeba jen zřídka, pokud nemusíte tato prostředí podporovat.

Pokyny Google pro favicony ve výsledcích vyhledávání

Pokud chcete, aby se vaše ikona zobrazovala ve vyhledávání Google, dodržujte zveřejněné požadavky Google:

• Velikost: obrázek musí být čtvercový (1:1) a jeho rozměr musí být násobkem 48 pixelů, například 48×48, 96×96 nebo 144×144. Google jej pak pro zobrazení zmenší na 16×16. Minimální podporovaná velikost je 8×8, doporučuje se však 48×48 nebo větší.
• Formáty: funguje jakýkoli formát podporovaný prohlížeči, včetně ICO, PNG a SVG.
• Stabilní URL: neměňte adresu faviconu často. Stabilní adresa pomáhá Google udržovat vaši ikonu aktuální.
• Procházitelnost: soubor faviconu i vaše domovská stránka musí být přístupné pro Googlebot. Neblokujte je v robots.txt ani za přihlášením.
• Jedna deklarace na web: ikona je vázána na domovskou stránku webu, proto umístěte značku <link> do hlavičky své domovské stránky.
• Reprezentativní a vhodná: ikona by měla odrážet vaši značku a Google může ikonu, která je urážlivá nebo zavádějící, nahradit výchozí.

Po zveřejnění nebo změně faviconu může Google trvat dny až týdny, než jej znovu projde a aktualizuje, takže neočekávejte okamžitou změnu.

Jak rychle vytvořit favicon pomocí MakeFav

Nepotřebujete designový software ani příkazový řádek. Generátor MakeFav promění jediný zdrojový obrázek v soubory popsané výše.

1. Připravte grafiku. Použijte čtvercové logo nebo symbol o velikosti 512 × 512 px či větší. Nejlépe fungují jednoduché tvary, protože ikona bude vidět v rozměru 16 px.
2. Nahrajte ji na domovské stránce MakeFav nebo otevřete editor a před exportem upravte obrázek, pozadí a odsazení.
3. Zkontrolujte náhled výsledku v malých velikostech a na světlém i tmavém pozadí, abyste si byli jisti, že zůstává čitelný.
4. Stáhněte balíček. Obsahuje ICO, PNG v několika velikostech, Apple touch icon, ikony manifestu a HTML úryvek k vložení.
5. Nahrajte soubory do kořenového adresáře svého webu, aby byly dostupné na cestách jako /favicon.ico.
6. Přidejte HTML do <head> každé stránky nebo do sdíleného layoutu či šablony.
7. Ověřte pomocí kontroly faviconu, poté vymažte mezipaměť prohlížeče a stránku znovu načtěte, abyste viděli novou ikonu.

Příklad HTML úryvku

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-96x96.png" type="image/png" sizes="96x96">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Atribut sizes="48x48" u odkazu na ICO pomáhá prohlížečům upřednostnit SVG, pokud jej podporují, a zároveň ponechává ICO jako záložní variantu. PNG o velikosti 96 px splňuje pravidlo Google o násobku 48.

Příklad manifestu webové aplikace

{
  "name": "Example Site",
  "short_name": "Example",
  "icons": [
    { "src": "/web-app-manifest-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" },
    { "src": "/web-app-manifest-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Pokud pracujete s build pipeline nebo chcete vytváření ikon automatizovat, podívejte se na zdroje pro vývojáře.

Tipy pro návrh funkčního faviconu

• Držte se jednoduchosti. Jeden tvar, jedno písmeno nebo výrazné monogram je lepší než detailní logo, které se v 16 px změní v kaši.
• Používejte silný kontrast. Ujistěte se, že je ikona vidět ve světlém i tmavém motivu prohlížeče. Pomůže barevná podkladová dlaždice.
• Vyhněte se textu. Jediná iniciála je v pořádku; slova jsou v této velikosti nečitelná.
• Nechte malé odsazení pro ikony typu maskable a se zaoblenými rohy, aby se nic důležitého neořízlo.
• Zůstaňte konzistentní s logem a barvami značky, aby favicon posiloval rozpoznatelnost.
• Testujte na skutečných zařízeních a zkontrolujte, jak vypadá v kartě, záložce a výsledku Google.

Časté problémy s faviconem

Pokud se vaše ikona nezobrazuje, obvyklými příčinami jsou ukládání do mezipaměti, špatné cesty a blokované soubory. Prohlížeče favicony agresivně ukládají do mezipaměti, takže k zobrazení změn často stačí vynucené obnovení stránky nebo nové anonymní okno. Zkontrolujte, že URL souboru vrací stav 200 a správný typ obsahu a že je značka <link> v <head>. Pro vyhledávání se ujistěte, že robots.txt neblokuje ikonu ani domovskou stránku. Kontrola MakeFav vám pomůže tyto problémy rychle odhalit.

Často kladené otázky

Co znamená slovo favicon?

Favicon je zkratka z anglického „favorite icon“ (oblíbená ikona). Název pochází z Internet Exploreru 5, který v roce 1999 poprvé použil malý soubor ikony k ozdobení položek v seznamu Oblíbené v prohlížeči. Termín se ujal, i když se ikona dnes objevuje na mnoha dalších místech.

Pomáhá favicon SEO?

Favicon není přímý faktor hodnocení. Zobrazuje se však vedle názvu vašeho webu ve výsledcích Google na mobilech i počítačích, takže může zlepšit rozpoznatelnost značky a vizuální přitažlivost vašeho výsledku, což může nepřímo podpořit prokliky. Dodržování pokynů Google je to, co ikonu činí způsobilou k zobrazení.

Jak velký by měl favicon být?

Pro vyhledávání Google použijte čtvercový obrázek, jehož rozměr je násobkem 48 pixelů, například 48×48 nebo 96×96. Pro širší pokrytí poskytněte také soubor ICO, Apple touch icon 180×180 a ikony manifestu 192×192 a 512×512. SVG je dobrým doplňkem kvůli škálovatelnosti.

Potřebuji favicon.ico, i když používám PNG nebo SVG?

Pořád je to dobrý nápad. Prohlížeče a některé nástroje ve výchozím nastavení žádají o /favicon.ico a starší software na něm závisí. Ponechání souboru ICO v kořenovém adresáři webu zabrání chybám 404 a poskytne bezpečnou zálohu, když SVG nebo PNG není podporováno.

Proč se můj favicon neaktualizuje?

Prohlížeče a vyhledávače ukládají favicony do mezipaměti na dlouhou dobu. Zkuste vynucené obnovení stránky, anonymní okno nebo vymazání mezipaměti. Ujistěte se, že je cesta k souboru správná a že se zobrazuje nový soubor. Ve vyhledávání Google může trvat dny až týdny, než je změněná ikona znovu načtena a aktualizována.