Při hledání „velikost favicon“ stále narazíte na seznamy patnácti souborů z roku 2014. Dnes ale stačí šest rozměrů pro karty prohlížeče, výsledky vyhledávání, iOS, Android a PWA. Podívejme se, které to jsou a proč.
Tabulka velikostí ke generování
Každý řádek odpovídá zdokumentovanému použití navrhovaného balíčku. Tabulka upřednostňuje malou, široce kompatibilní sadu před sbírkou historických variant.
| Soubor | Rozměry | K čemu slouží |
|---|---|---|
| favicon.ico | 16×16, 32×32, 48×48 | Karty, záložky, starší prohlížeče, indexovací roboti |
| favicon.svg | vektorové, čtvercové | Moderní prohlížeče, ostré ve všech velikostech, podpora tmavého režimu |
| favicon-96x96.png | 96×96 | Výsledky vyhledávání Google na mobilu |
| apple-touch-icon.png | 180×180 | Plocha iOS a iPadOS, bez průhlednosti |
| web-app-manifest-192x192.png | 192×192 | Plocha Androidu, deklarováno ve webovém manifestu |
| web-app-manifest-512x512.png | 512×512 | Úvodní obrazovka PWA, varianta „maskable“ |
Proč mít 16, 32 a 48 v jednom .ico
ICO je kontejnerový formát: jediný soubor může obsahovat více obrázků a prohlížeč vybere ten, který odpovídá zobrazení. Přesně to potřebujeme, protože požadovaná velikost závisí na kontextu.
16×16 slouží pro kartu na běžné obrazovce. 32×32 poskytuje variantu pro displeje s vysokou hustotou pixelů a další části prohlížeče. 48×48 doplňuje kontejner a zároveň splňuje požadavek Googlu na násobek 48 pro favicon ve výsledcích vyhledávání.
Nejčastější chybou je vytvořit .ico pouze s velikostí 16×16: na displeji Retina se ikona zvětší a bude trvale rozmazaná.
180×180 pro iOS, 192 a 512 pro Android
iOS pro ikonu na ploše nečte webový manifest: hledá značku apple-touch-icon. Stačí jediná velikost, 180×180, která pokryje všechny novější iPhony a iPady. Pro starší zařízení systém obrázek sám zmenší.
Android naopak používá webový manifest. Stačí dva záznamy: 192×192 pro ikonu na ploše a 512×512 pro úvodní obrazovku, když je web nainstalován jako aplikace. Verze 512 má mít purpose „maskable“, tedy návrh, který snese ořez do kruhu nebo zaobleného čtverce.
U maskovatelné ikony udržujte podstatné části kresby ve středových 80 %. Vše mimo tuto oblast může být oříznuto podle výrobce telefonu.
Jaký zdrojový obrázek použít
Nejlepším základem je SVG: bez ztráty kvality se přizpůsobí všem uvedeným velikostem. Jinak použijte čtvercové PNG alespoň 512×512 pixelů, aby i úvodní ikona Androidu vznikla zmenšením, nikdy zvětšením.
Vodorovné logo s textem v 16×16 nefunguje: slovo se v této velikosti změní v nečitelnou skvrnu vysokou tři pixely. Vyberte samotný symbol nebo začněte jedním či dvěma písmeny na kontrastním pozadí.
Nakonec ověřte kontrast na světlém i tmavém pozadí: černé logo v tmavé kartě zmizí. Právě tento problém řeší tmavá varianta SVG favicon.
Velikosti, které už nepotřebujete
Starší generátory stále vytvářejí soubory pro historické integrace, například dlaždice Windows se soubory mstile-150x150.png a browserconfig.xml. Přidávejte je jen tehdy, pokud tato rozhraní výslovně patří mezi podporované platformy.
Dlouhá řada apple-touch-icon-57x57, 60x60, 72x72, 76x76, 114x114, 120x120, 144x144 a 152x152 pochází z doby, kdy iOS neuměl měnit velikost. Všechny nahradí jediný obrázek 180×180.
Odstraněním nepoužívaných deklarací zjednodušíte repozitář i HTML. Před smazáním existující integrace ale ověřte prohlížeče a platformy, které sami podporujete.
Primární zdroje
Časté otázky
Je favicon.ico stále potřeba?
Ano, ale pouze v kořenovém adresáři webu. Moderní prohlížeče dávají přednost SVG, mnoho robotů, agregátorů a e-mailových klientů ale stále požaduje /favicon.ico bez čtení HTML. Soubor má jen několik kilobajtů: ponechte ho.
Jakou velikost má mít favicon pro výsledky Googlu?
Google požaduje ikonu se stranou o délce násobku 48 pixelů a obvykle ji zobrazuje jako 48×48. PNG 96×96 nebo SVG tuto potřebu snadno pokryje. Ikona musí být dostupná robotům a nesmí ji blokovat robots.txt.
Může být favicon obdélníková?
Technicky ano, vizuálně to není vhodné. Všechna místa zobrazení vyhrazují čtverec: obdélníkový obrázek se buď deformuje, nebo se vycentruje s prázdnými pruhy. Vždy vycházejte ze čtverce, případně přidejte okraje kolem symbolu.