Formáty faviconov vysvetlené: ICO, PNG, SVG a čo potrebujú prehliadače

Prečo sú favicony stále zvláštne komplikované

Favicon vyzerá ako jeden malý obrázok, no nachádza sa na priesečníku rozhrania prehliadača, záložiek, kariet, pripnutých skratiek, výsledkov vyhľadávania, domovských obrazoviek mobilov a inštalácií progresívnych webových aplikácií. Každý kontext má trochu iné očakávania.

Preto rady o faviconoch často pôsobia neprehľadne. Niektoré tímy nasadzujú iba jeden favicon.ico, pretože kedysi to stačilo. Iné generujú tucet súborov bez toho, aby vedeli, ktoré sa skutočne používajú. Rozumný stred je menší: pochopiť, v čom sú ICO, PNG a SVG dobré, a potom nasadiť kompaktnú sadu, ktorá pokryje aktuálne prehliadače a bežné zariadenia.

Favicons nie sú miesto na predvádzanie obrazového pipeline. Sú miestom, kde sa oplatí byť nudný, explicitný a kompatibilný.

ICO: starý formát, ktorý odmieta zomrieť

ICO je klasický kontajner ikon z Windows. Môže obsahovať viacero bitmapových obrázkov v rôznych veľkostiach, bežne 16×16, 32×32 a 48×48 pixelov. Je to dôležité, pretože favicon sa môže vykresľovať veľmi malý na karte prehliadača, väčší v zozname záložiek a opäť inak v skratkách Windows.

Dôležitý detail je, že ICO je kontajner, nie jednoducho jeden obrázok. Dobrý favicon.ico zvyčajne obsahuje viacero rastrových veľkostí, aby si prehliadač alebo operačný systém mohol vybrať najbližšiu zhodu namiesto škálovania jednej malej bitmapy.

ICO je stále užitočné z troch dôvodov:

• Prehliadače môžu automaticky požadovať /favicon.ico, aj keď ho v HTML neodkážete.
• Niektoré staršie prehliadače a integrácie ho očakávajú.
• Je to bezpečná záloha, keď sa novšie deklarácie ikon ignorujú.

To neznamená, že ICO má byť vaša jediná ikona. Ťažkopádne sa upravuje, nie je zvlášť priateľské k moderným pracovným postupom a je slabé ako zdroj pravdy pre značku. Berte ho ako kompatibilnú zálohu.

V praxi umiestnite skutočný /favicon.ico do koreňa webu. Neservírujte tam 404, pokiaľ nemáte radi hlučné logy a zbytočné opakované požiadavky prehliadačov.

PNG: spoľahlivý pracant

PNG je stále najpredvídateľnejší rastrový formát pre favicony a dotykové ikony. Podporuje priehľadnosť, má širokú podporu a správa sa konzistentne naprieč prehliadačmi a platformami.

Pri faviconoch je PNG užitočné vtedy, keď chcete explicitné ikony s pixelovou veľkosťou, napríklad 32×32 alebo 48×48. Pri ikonách pre domovskú obrazovku mobilov je PNG v niektorých prostrediach prakticky povinné. Apple touch icons sú napríklad v bežnej produkčnej praxi založené na PNG.

Pomáha niekoľko praktických pravidiel:

• Exportujte z vektorového zdroja, nie z už malej bitmapy.
• Uistite sa, že ikona je čitateľná pri 16×16, skôr než budete riešiť väčšie veľkosti.
• Pridajte dostatok vnútorného odsadenia, aby značka nepôsobila orezane v zaoblených alebo maskovaných kontextoch.
• Vyhnite sa drobnému textu, tenkým čiaram a detailným ilustráciám.

Kompresiou PNG pri faviconoch sa zvyčajne neoplatí príliš zaoberať, pretože súbory sú malé. Napriek tomu nenasadzujte 500 KB dotykovú ikonu len preto, že prišla priamo z dizajnového exportu. Ak už prehodnocujete širšie rozhodnutia o obrázkoch, rovnaké disciplinované uvažovanie z článku rozhodnutia o obrazových formátoch na modernom webe platí aj tu: vyberajte formát podľa úlohy, nie preto, že je módny.

SVG: moderná, flexibilná možnosť

SVG favicony sú lákavé, pretože nezávisia od rozlíšenia. Jeden malý súbor sa môže čisto vykresliť v mnohých veľkostiach a dá sa upravovať priamo v kóde alebo exportovať z dizajnového softvéru.

Moderné verzie Chromium, Firefox a Safari podporujú SVG favicony. Vďaka tomu je SVG dobrým primárnym formátom faviconu pre mnohé weby, najmä keď je ikonou jednoduché logo, glyf alebo geometrická značka.

SVG favicony však majú svoje výhrady.

Po prvé, SVG by malo byť samostatné. Nespoliehajte sa na externé fonty, vzdialené obrázky ani skripty. Prehliadače uplatňujú obmedzenia na SVG použité ako obrázok a aj keď niečo funguje v jednom prehliadači, v inom môže zlyhať.

Po druhé, udržujte ho vizuálne jednoduché. SVG zázračne nerieši problém 16 pixelov. Detailná vektorová ilustrácia bude stále rozmazaná, keď sa stlačí do karty.

Po tretie, buďte opatrní s dynamickým štýlovaním. Niektoré tímy používajú prefers-color-scheme vo vnútri SVG faviconu, aby sa ikona prispôsobila tmavej a svetlej téme prehliadača. Môže to fungovať, ale správanie prehliadačov a cache môže byť nerovnomerné. Ak je dôležitá rozpoznateľnosť značky, jedna robustná ikona často prekoná šikovnú adaptívnu.

SVG je dobrý zdroj aj dobrý moderný doručovací formát. Nie je to dôvod preskočiť záložné súbory.

Čo prehliadače skutočne hľadajú

Prehliadače objavujú favicony dvoma hlavnými spôsobmi: explicitnými HTML odkazmi a implicitnými požiadavkami na koreň.

Implicitné správanie je to staré: ak prehliadač chce ikonu a nenašiel ju, môže požiadať o /favicon.ico. Preto je koreňový ICO súbor užitočný aj na moderných weboch.

Explicitné správanie používa prvky <link> v hlavičke dokumentu. Kompaktné moderné nastavenie vyzerá takto:

<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="/site.webmanifest">

Manifest potom môže odkazovať na väčšie PNG ikony používané pre inštalovateľné webové aplikácie:

{
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Nie je to jediné platné nastavenie, ale je to dobrý základ. Moderným prehliadačom dáva SVG, poskytuje konvenčnú ICO zálohu, pokrýva uloženia na domovskú obrazovku iOS a podporuje kontexty inštalácie aplikácie.

Sada faviconov, ktorú by mala nasadzovať väčšina webov

Pre bežný marketingový web, dokumentačný web, SaaS aplikáciu alebo publikáciu táto sada stačí:

• /favicon.ico obsahujúci 16×16 a 32×32, voliteľne 48×48.
• /icon.svg ako moderný škálovateľný favicon.
• /apple-touch-icon.png vo veľkosti 180×180.
• /icon-192.png a /icon-512.png, ak máte web app manifest.

Môžete pridať viac veľkostí, ak má platforma konkrétnu požiadavku, ale negenerujte desať súborov zo zvyku. Každý ďalší súbor je ďalšia vec, ktorú treba cacheovať, nezabudnúť, správne pomenovať alebo po rebrandingu nechať nezastaranú.

Ak váš web nie je inštalovateľný a nemá manifest, ikony 192 a 512 pixelov možno nepotrebujete. Ak sa váš web správa ako aplikácia, pravdepodobne áno.

Bežné spôsoby zlyhania

Najčastejšie chyby faviconov nie sú umelecké. Sú to problémy s doručením.

Jedným je agresívne cacheovanie. Prehliadače sa faviconov držia tvrdohlavo. Počas testovania sa zmenená ikona nemusí zobraziť, kým neurobíte tvrdé obnovenie, nevymažete dáta webu, nepoužijete nový názov súboru alebo netestujete v čerstvom profile. Pri produkčných rebrandingoch môže v HTML pomôcť zmena na /icon.svg?v=2, ale koreňový /favicon.ico je ťažší, pretože prehliadače si ho pýtajú priamo. Nahradenie súboru a vyčkanie cache je často súčasť práce.

Ďalším častým problémom je nesprávny MIME type. SVG by sa malo servírovať ako image/svg+xml, PNG ako image/png a ICO bežne ako image/x-icon alebo image/vnd.microsoft.icon. Mnohé prehliadače sú zhovievavé, ale nie všetky kontexty. Ak niečo zlyháva iba v jednom prehliadači, skontrolujte sieťovú odpoveď skôr, než ikonu prekreslíte. Platia tu rovnaké návyky ako pri ladení presmerovaní a HTTP hlavičiek v produkcii: pozerajte sa na skutočnú odpoveď, nie na to, čo CMS tvrdí, že servíruje.

Tretím problémom je hustota dizajnu. Logá, ktoré krásne fungujú v hlavičke webu, často zlyhajú ako favicony. Ikona na karte je brutálny test. Odstráňte slová, zjednodušte tvary, zvýšte kontrast a testujte v reálnych veľkostiach. Ak je ikona zmysluplný obsah vo vnútri stránky, potom záleží na prístupnosti, napríklad na alt texte; pri samotnom favicone ide o dekoráciu rozhrania prehliadača, nie o obsah stránky. K tomuto rozlíšeniu pozrite náš pragmatický sprievodca alt textom obrázkov.

<!-- tool-cta:start -->

💡 Vyskúšajte toto: Vygenerujte naraz varianty ICO, PNG a SVG, ktoré moderné prehliadače očakávajú, pomocou Ultimate Favicon Generator.

<!-- tool-cta:end -->

Jednoduchý implementačný kontrolný zoznam

Pred nasadením použite tento kontrolný zoznam:

1. Začnite z čistého vektorového masteru.
2. Otestujte značku pri 16×16 a 32×32.
3. Exportujte samostatný SVG favicon.
4. Vygenerujte viacveľkostnú ICO zálohu.
5. Exportujte 180×180 Apple touch icon.
6. Ak používate manifest, pridajte PNG vo veľkostiach 192×192 a 512×512.
7. Umiestnite /favicon.ico do koreňa webu.
8. Overte stavové kódy, MIME types a cacheovacie hlavičky.
9. Testujte aspoň v jednom prehliadači Chromium, vo Firefox a v Safari, ak vaše publikum zahŕňa zariadenia Apple.

Favicons sú malé, ale sú aj veľmi viditeľné. Pokazený favicon spôsobí, že web pôsobí nedokončene. Dobre spracovaný favicon sa stratí v rozhraní, čo je presne cieľ.