Favicon: co to je, jaké rozměry potřebuje a jak ho přidat
Favicon je malá ikona webu, kterou vidíte v záložce prohlížeče, v oblíbených položkách a ve výsledcích vyhledávání vedle adresy. Zabírá pár pixelů, ale když chybí, web vedle ostatních karet vypadá jako nedodělaný.
Aktualizováno
Kde všude se favicon zobrazuje
- Karta prohlížeče – nejčastější místo. Když má člověk otevřených dvacet karet, podle ikony najde tu vaši.
- Záložky a historie – vedle názvu stránky.
- Výsledky vyhledávání Googlu – u výsledku vedle názvu webu. Výrazná ikona pomáhá, aby si vás lidé všimli.
- Plocha telefonu – když si někdo web přidá na plochu jako zástupce. Tady se používá větší ikona, ne miniatura z karty.
- Sdílené odkazy v některých aplikacích a správcích hesel.
Na plochu mobilu se dnes web přidává častěji, než se zdá, a proto favicon souvisí i s tím, jak web funguje na telefonu – víc o tom v hesle responzivní web.
Formáty a rozměry
Jediný soubor dnes nestačí, protože každé místo chce jinou velikost. Rozumná sada, která pokryje prohlížeče i telefony, vypadá takto:
| Soubor | Rozměr | K čemu slouží |
|---|---|---|
| favicon.ico | 32 × 32 px (případně i 16 a 48 v jednom souboru) | Starší prohlížeče a výchozí hledání v kořeni webu. |
| icon.svg | vektor | Ostrá ikona v moderních prohlížečích, umí i tmavý režim. |
| apple-touch-icon.png | 180 × 180 px | Ikona na ploše iPhonu a iPadu, bez průhlednosti. |
| icon-192.png a icon-512.png | 192 a 512 px | Plocha Androidu a instalovatelné weby přes manifest. |
Pro Google platí, že ikona musí být čtvercová a dostupná pro jeho robota (nesmí ji blokovat robots.txt). Google doporučuje rozměr větší než 48 × 48 px; aktuální požadavky najdete v dokumentaci Google Search Central. Ikona se má navíc hodit pro všechny návštěvníky – Google nezobrazí favicon, který považuje za nevhodný.
Jak favicon přidat na web
Soubory nahrajete na server (nejčastěji do kořene webu) a v hlavičce každé stránky na ně odkážete. Typicky jde o tyto řádky:
<link rel="icon" href="/favicon.ico" sizes="32x32"><link rel="icon" href="/icon.svg" type="image/svg+xml"><link rel="apple-touch-icon" href="/apple-touch-icon.png"><link rel="manifest" href="/manifest.webmanifest">
Redakční systémy jako WordPress mají pro ikonu webu vlastní nastavení a odkazy doplní samy. Moderní frameworky zase ikonu načtou, když ji dáte do správné složky projektu. Po nasazení si ikonu ověřte na počítači i v telefonu – patří to do kontroly webu před spuštěním.
Jak navrhnout ikonu, která v 16 pixelech obstojí
Celé logo s názvem firmy se do miniatury nevejde. Vyberte z něj symbol, iniciálu nebo výrazný tvar a ten zjednodušte:
- Žádný drobný text – ve velikosti záložky se slije v šmouhu.
- Výrazný kontrast motivu a pozadí, dvě až tři barvy nanejvýš.
- Vyzkoušejte ikonu na světlé i tmavé liště prohlížeče. Černé logo na průhledném pozadí v tmavém režimu zmizí; SVG favicon umí barvy přepnout podle režimu.
- Motiv má vyplnit plochu – tenká čárka uprostřed velkého čtverce je nečitelná.
Pokud logo teprve vzniká, řekněte grafikovi rovnou o variantu pro malé velikosti. Co dalšího k webu připravit předem, shrnuje přehled podklady pro web.
Nejčastější chyby
- Po redesignu zůstal v kořeni starý favicon.ico a prohlížeče ho dál zobrazují.
- Ikona je obdélníková nebo roztažená, protože vznikla zmenšením celého loga.
- Apple-touch-icon má průhledné pozadí a na iPhonu se objeví na černém.
- Soubor leží ve složce, kterou robots.txt zakazuje procházet.
- Odkaz v hlavičce míří na adresu, která vrací chybu 404.
Oprava je obvykle otázka desítek minut. Pokud ji děláme my mimo dohodnutý rozsah, účtujeme ji podle hodinové sazby 1 000 Kč a čas odhadneme předem.
Časté otázky
Změnil jsem favicon, ale pořád vidím ten starý. Proč?
Prohlížeče si ikonu ukládají do mezipaměti velmi vytrvale, často déle než zbytek webu. Zkuste stránku otevřít v anonymním okně nebo v jiném prohlížeči. Pomáhá také změnit název souboru nebo k adrese přidat parametr verze, aby prohlížeč ikonu načetl znovu.
Za jak dlouho se nový favicon objeví ve výsledcích Googlu?
Google ikonu stahuje při procházení úvodní stránky, takže změna se projeví až po jejím dalším zpracování – obvykle v řádu dnů až týdnů. Urychlit to můžete požádáním o indexaci úvodní stránky v Search Console, ale okamžitou změnu nečekejte.
Může být favicon kulatý?
Soubor je vždy čtvercový, ale obsah může mít průhledné rohy, takže ikona kulatě vypadat bude. Pozor na plochu telefonu: iOS průhlednost u apple-touch-icon nahradí černou a Android ikonu může oříznout do vlastního tvaru, proto u těchto souborů nechte kolem motivu okraj a vyplňte pozadí.
Stačí favicon.ico v kořeni webu?
Pro záložky v prohlížeči většinou ano, prohlížeče ho tam hledají samy. Pro ostrou ikonu na plochu telefonu, tmavý režim a jistotu, že ho najde i Google, je lepší přidat odkazy v hlavičce stránky a několik dalších velikostí.