Vyhľadávanie „rozmery faviconu“ stále ponúka zoznamy pätnástich súborov z roku 2014. Dnes pritom na karty, výsledky vyhľadávania, iOS, Android a PWA stačí šesť rozmerov. Pozrime sa, ktoré to sú a prečo.
Tabuľka rozmerov na vygenerovanie
Každý riadok zodpovedá zdokumentovanému použitiu navrhovaného balíka. Tabuľka uprednostňuje malú kompatibilnú sadu pred zbierkou historických variantov.
| Súbor | Rozmery | Účel |
|---|---|---|
| favicon.ico | 16×16, 32×32, 48×48 | Karty, záložky, staršie prehliadače, indexovacie roboty |
| favicon.svg | vektorový, štvorcový | Moderné prehliadače, ostrý pri každej veľkosti, podporuje tmavý režim |
| favicon-96x96.png | 96×96 | Výsledky vyhľadávania Google na mobiloch |
| apple-touch-icon.png | 180×180 | Domovská obrazovka iOS a iPadOS, bez priehľadnosti |
| web-app-manifest-192x192.png | 192×192 | Domovská obrazovka Androidu, deklarovaná vo webovom manifeste |
| web-app-manifest-512x512.png | 512×512 | Úvodná obrazovka PWA, verzia „maskable“ |
Prečo 16, 32 a 48 v jednom .ico
ICO je kontajnerový formát: jeden súbor môže obsahovať viac obrázkov a prehliadač vyberie ten, ktorý zodpovedá zobrazeniu. Presne to potrebujeme, pretože požadovaná veľkosť závisí od kontextu.
16×16 slúži pre kartu na bežnej obrazovke. 32×32 poskytuje variant pre displeje s vysokou hustotou pixelov a ďalšie rozhrania prehliadača. 48×48 dopĺňa kontajner a zároveň spĺňa násobok 48, ktorý Google požaduje pre favicony vo výsledkoch vyhľadávania.
Najčastejšou chybou je vytvoriť .ico obsahujúce iba 16×16: na displeji Retina sa ikona zväčší a stále vyzerá rozmazane.
180×180 pre iOS, 192 a 512 pre Android
iOS pri ikone domovskej obrazovky nečíta webový manifest: hľadá značku apple-touch-icon. Stačí rozmer 180×180, ktorý pokrýva všetky novšie iPhony a iPady. Pre staršie zariadenia systém obrázok zmenší sám.
Android používa webový manifest. Stačia dve položky: 192×192 pre ikonu domovskej obrazovky a 512×512 pre úvodnú obrazovku, keď je web nainštalovaný ako aplikácia. Verziu 512 treba deklarovať s purpose „maskable“, teda navrhnúť ju tak, aby zvládla orezanie na kruh alebo zaoblený štvorec.
Pri ikone maskable ponechajte podstatnú časť kresby v stredových 80 %. Všetko mimo tejto oblasti sa môže orezať podľa výrobcu telefónu.
Aký zdrojový obrázok použiť
Najlepší základ je SVG: bez straty kvality sa prispôsobí všetkým uvedeným rozmerom. Prípadne použite štvorcové PNG s aspoň 512×512 pixelmi, aby aj úvodná ikona Androidu vznikla zmenšením, nikdy zväčšením.
Vodorovné logo s textom v rozmere 16×16 nefunguje: slovo sa zmení na nečitateľný pás vysoký tri pixely. Vyberte samostatný symbol alebo začnite jedným či dvomi písmenami na kontrastnom pozadí.
Nakoniec skontrolujte kontrast na svetlom aj tmavom pozadí: čierne logo na tmavej karte zmizne. Práve tento problém rieši tmavý variant faviconu SVG.
Rozmery, ktoré už nepotrebujete
Staršie generátory stále vytvárajú súbory pre historické integrácie, napríklad dlaždice Windows s mstile-150x150.png a browserconfig.xml. Pridajte ich len vtedy, ak tieto rozhrania výslovne podporujete.
Dlhý rad apple-touch-icon-57x57, 60x60, 72x72, 76x76, 114x114, 120x120, 144x144 a 152x152 pochádza z čias, keď iOS nevedel meniť rozmery. Všetky nahradí jediný obrázok 180×180.
Odstránením nepotrebných deklarácií zjednodušíte repozitár aj HTML. Pred odstránením existujúcej integrácie si však overte podporované prehliadače a platformy.
Primárne zdroje
Časté otázky
Je favicon.ico stále potrebný?
Áno, ale iba v koreňovom adresári webu. Moderné prehliadače uprednostňujú SVG, no mnohé roboty, agregátory a e-mailové klienty stále požadujú /favicon.ico bez čítania HTML. Súbor má len pár kilobajtov: ponechajte ho.
Aký rozmer má mať favicon vo výsledkoch Google?
Google požaduje ikonu so stranou v násobkoch 48 pixelov a zvyčajne ju zobrazuje ako 48×48. PNG 96×96 alebo SVG túto potrebu jednoducho pokryje. Ikona musí byť dostupná robotom a nesmie ju blokovať robots.txt.
Môže byť favicon obdĺžnikový?
Technicky áno, vizuálne nie. Všetky kontexty zobrazenia vyhradzujú štvorec: obdĺžnikový obrázok sa deformuje alebo vycentruje s prázdnymi pásmi. Vždy začnite štvorcom, aj keby ste museli okolo symbolu pridať okraje.