Jak vytvořit favikonu
Velikosti, formáty a kód, které potřebujete pro favikonu, jež se zobrazí všude.
Favikona je malá ikona na kartě prohlížeče, v záložkách a vedle vašeho webu v mobilních výsledcích vyhledávání Googlu. Bez favikony web působí nedokončeně a rozmazaná favikona vypadá ještě hůř. Vytvořit dobrou zabere jen pár minut.
Začněte se správnou grafikou
Favikona se zobrazuje i ve velikosti pouhých 16 × 16 pixelů, takže celé logo s nápisem bude nečitelné. Použijte jednoduchou značku: symbol z loga, jediné počáteční písmeno nebo výrazný tvar v barvě vaší značky. Vyzkoušejte ji tak, že ji na obrazovce zmenšíte na čtvrtinu: pokud pořád poznáte, co to je, bude fungovat.
Začněte se čtvercovým obrázkem o velikosti alespoň 512 × 512 pixelů, ideálně v PNG s průhledným pozadím. Pokud vaše logo není čtvercové, ořízněte ho na čtverec s poměrem uzamčeným na 1:1.
Soubory, které potřebujete
| Soubor | Velikost | Kdo ho používá |
|---|---|---|
| favicon.ico | Obsahuje verze 16, 32 a 48 pixelů | Prohlížeče, starší systémy, výchozí požadavek na /favicon.ico |
| Ikona v PNG | 32 × 32 a 192 × 192 | Moderní prohlížeče, domovské obrazovky Androidu |
| apple-touch-icon.png | 180 × 180 | Záložky na domovské obrazovce iPhonu a iPadu |
Favikonu používá i Vyhledávání Google ve výsledcích. Musí být čtvercová, alespoň 48 × 48 pixelů, a vyhledávací robot k ní na vašem webu musí mít přístup.
Vytvoření souboru ICO
Přetáhněte čtvercové PNG do převodníku PNG na ICO. Ten vytvoří skutečný soubor .ico s malými velikostmi, které prohlížeče požadují. Pro verze v PNG změňte velikost stejného čtvercového obrázku na 180, 192 a 32 pixelů.
Přidání na web
Nahrajte favicon.ico do kořenové složky webu, aby byl dostupný na adrese vasweb.cz/favicon.ico, a do sekce head svých stránek přidejte tyto řádky:
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" type="image/png" href="/cs/icon-192.png" sizes="192x192"> <link rel="apple-touch-icon" href="/cs/apple-touch-icon.png">
Ve WordPressu přejděte na Vzhled, Přizpůsobit, Identita webu a nahrajte čtvercový obrázek jako Ikonu webu; WordPress potřebné velikosti vytvoří za vás. Shopify, Wix i Squarespace mají nastavení favikony v nastavení webu nebo šablony.
Když se nová favikona nezobrazuje
Prohlížeče si favikony tvrdohlavě drží v mezipaměti. Otevřete web v anonymním okně, nebo přejděte přímo na vasweb.cz/favicon.ico a stránku obnovte. Googlu může aktualizace ikony ve výsledcích vyhledávání trvat dny až týdny, než znovu projde vaši domovskou stránku.
Časté chyby
- Použití celého loga s drobným textem, které se při 16 pixelech změní v šmouhu.
- Bílá ikona na průhledném pozadí, která na světlých kartách prohlížeče zmizí.
- Dodání jen malinkého souboru o 16 pixelech, který na obrazovkách s vysokým rozlišením vypadá rozmazaně.
- Zapomenutý soubor na adrese /favicon.ico, který si některé prohlížeče a roboti vyžádají bez ohledu na to, co uvádí stránka.