Formáty faviconů vysvětleně: ICO, PNG, SVG a co potřebují prohlížeče

Proč jsou favicony pořád zvláštně komplikované

Favicon vypadá jako jeden malý obrázek, ale stojí na průsečíku uživatelského rozhraní prohlížeče, záložek, panelů, připnutých zkratek, výsledků vyhledávání, mobilních domovských obrazovek a instalací progresivních webových aplikací. Každý kontext má trochu jiná očekávání.

Proto rady k faviconům často působí chaoticky. Některé týmy nasazují jen jediný favicon.ico, protože to dříve stačilo. Jiné generují tucet souborů, aniž by věděly, které se skutečně používají. Rozumný střed je menší: pochopit, v čem jsou ICO, PNG a SVG dobré, a pak dodat kompaktní sadu, která pokryje současné prohlížeče a běžné kontexty zařízení.

Favicony nejsou místo, kde předvádět obrazový pipeline. Jsou místem, kde se vyplatí být nudný, explicitní a kompatibilní.

ICO: starý formát, který odmítá zmizet

ICO je klasický kontejner ikon z Windows. Může obsahovat několik bitmapových obrázků v různých velikostech, běžně 16×16, 32×32 a 48×48 pixelů. To je důležité, protože favicon se může vykreslovat velmi malý v panelu prohlížeče, větší v seznamu záložek a zase jinak u zkratek ve Windows.

Důležitý detail je, že ICO je kontejner, ne prostě jeden obrázek. Dobrý favicon.ico obvykle obsahuje více rastrových velikostí, aby si prohlížeč nebo operační systém mohl vybrat nejbližší variantu místo škálování jedné drobné bitmapy.

ICO je stále užitečné ze tří důvodů:

• Prohlížeče mohou automaticky požadovat /favicon.ico, i když ho v HTML neodkazujete.
• Některé starší prohlížeče a integrace ho očekávají.
• Je to bezpečná záloha, když jsou novější deklarace ikon ignorovány.

To neznamená, že ICO má být vaše jediná ikona. Špatně se upravuje, není zvlášť přívětivé k moderním workflow a jako zdroj pravdy pro značku je slabé. Berte ho jako kompatibilní fallback.

V praxi umístěte skutečný /favicon.ico do kořene webu. Neservírujte tam 404, pokud nemáte rádi hlučné logy a zbytečné opakované požadavky prohlížečů.

PNG: spolehlivý tahoun

PNG je stále nejpředvídatelnější rastrový formát pro favicony a dotykové ikony. Podporuje průhlednost, má širokou podporu a chová se konzistentně napříč prohlížeči i platformami.

Pro favicony je PNG užitečné, když chcete explicitní ikony v konkrétní pixelové velikosti, například 32×32 nebo 48×48. Pro ikony na mobilní domovské obrazovce je PNG v některých prostředích prakticky povinné. Například Apple touch icons jsou v běžném produkčním použití založené na PNG.

Pomáhá několik praktických pravidel:

• Exportujte z vektorového zdroje, ne z už malé bitmapy.
• Nejdřív zajistěte čitelnost ikony při 16×16 a až potom řešte větší velikosti.
• Přidejte dostatečný vnitřní okraj, aby značka nepůsobila oříznutě v zaoblených nebo maskovaných kontextech.
• Vyhněte se jemnému textu, tenkým linkám a detailním ilustracím.

Kompresi PNG se u faviconů obvykle nevyplatí přehnaně řešit, protože soubory jsou malé. Přesto nenasazujte 500KB dotykovou ikonu jen proto, že vypadla přímo z exportu z návrhového nástroje. Pokud už revidujete širší rozhodnutí kolem obrázků, stejné disciplinované uvažování z článku rozhodování o obrazových formátech na moderním webu platí i tady: vybírejte formát podle úkolu, ne podle toho, co je zrovna módní.

SVG: moderní, flexibilní možnost

SVG favicony jsou atraktivní, protože jsou nezávislé na rozlišení. Jeden malý soubor se může čistě vykreslit v mnoha velikostech a lze ho upravovat přímo v kódu nebo exportovat z návrhového softwaru.

Moderní verze Chromium, Firefox a Safari SVG favicony podporují. Díky tomu je SVG pro mnoho webů dobrým primárním formátem faviconu, zvlášť když je ikonou jednoduché logo, glyf nebo geometrická značka.

SVG favicony ale mají svá úskalí.

Za prvé, SVG by mělo být soběstačné. Nespoléhejte se na externí fonty, vzdálené obrázky ani skripty. Prohlížeče na SVG použité jako obrázek uplatňují omezení, a i když něco funguje v jednom prohlížeči, v jiném to může selhat.

Za druhé, udržujte ho vizuálně jednoduché. SVG magicky neřeší problém 16 pixelů. Detailní vektorová ilustrace je po stlačení do panelu pořád jen rozmazaná skvrna.

Za třetí, opatrně s dynamickým stylováním. Některé týmy používají prefers-color-scheme uvnitř SVG faviconu, aby se ikona přizpůsobila tmavému a světlému motivu prohlížeče. Může to fungovat, ale chování prohlížečů a cachování mohou být nevyrovnané. Pokud je důležitá rozpoznatelnost značky, jedna robustní ikona často porazí chytrou adaptivní variantu.

SVG je dobrý zdroj i dobrý moderní doručovací formát. Není to ale důvod vynechat fallback soubory.

Co prohlížeče skutečně hledají

Prohlížeče objevují favicony dvěma hlavními způsoby: explicitními HTML odkazy a implicitními požadavky na kořen webu.

Implicitní chování je to staré: pokud prohlížeč chce ikonu a žádnou nenašel, může požádat o /favicon.ico. Proto je kořenový ICO soubor užitečný i na moderních webech.

Explicitní chování používá prvky <link> v hlavičce dokumentu. Kompaktní moderní nastavení vypadá 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 pak může odkazovat na větší PNG ikony používané pro instalovatelné webové aplikace:

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

Není to jediné platné nastavení, ale je to dobrý základ. Moderním prohlížečům dává SVG, poskytuje konvenční ICO fallback, pokrývá ukládání na domovskou obrazovku v iOS a podporuje kontexty instalace aplikace.

Sada faviconů, kterou by měla nasazovat většina webů

Pro běžný marketingový web, dokumentační web, SaaS aplikaci nebo publikaci tato sada stačí:

• /favicon.ico obsahující 16×16 a 32×32, volitelně 48×48.
• /icon.svg jako moderní škálovatelný favicon.
• /apple-touch-icon.png ve velikosti 180×180.
• /icon-192.png a /icon-512.png, pokud máte web app manifest.

Můžete přidat další velikosti, pokud má nějaká platforma konkrétní požadavek, ale negenerujte deset souborů ze zvyku. Každý další soubor je další věc, kterou je třeba cachovat, nezapomenout, správně pojmenovat a po rebrandingu nenechat zastarat.

Pokud váš web není instalovatelný a nemá manifest, ikony 192 a 512 pixelů možná nepotřebujete. Pokud se váš web chová jako aplikace, pravděpodobně ano.

Běžné způsoby selhání

Nejčastější chyby faviconů nejsou umělecké. Jsou to problémy s doručením.

Jedním je agresivní cachování. Prohlížeče se faviconů drží velmi tvrdohlavě. Během testování se změněná ikona nemusí objevit, dokud neprovedete tvrdé obnovení, nevymažete data webu, nepoužijete nový název souboru nebo netestujete v čerstvém profilu. U produkčních rebrandingů může v HTML pomoci změna na /icon.svg?v=2, ale kořenový /favicon.ico je složitější, protože si ho prohlížeče vyžadují přímo. Nahrazení souboru a vyčkání na doběhnutí cache bývá součástí práce.

Dalším běžným problémem je špatný MIME typ. SVG by se mělo servírovat jako image/svg+xml, PNG jako image/png a ICO běžně jako image/x-icon nebo image/vnd.microsoft.icon. Mnoho prohlížečů je tolerantních, ale ne všechny kontexty. Pokud něco selhává jen v jednom prohlížeči, prohlédněte síťovou odpověď dřív, než ikonu překreslíte. Platí tu stejné návyky jako při ladění přesměrování a HTTP hlaviček v produkci: dívejte se na skutečnou odpověď, ne na to, co CMS tvrdí, že servíruje.

Třetí problém je hustota návrhu. Loga, která krásně fungují v hlavičce webu, jako favicony často selhávají. Ikona v panelu je neúprosný test. Odstraňte slova, zjednodušte tvary, zvyšte kontrast a testujte ve skutečných velikostech. Pokud je ikona významovým obsahem uvnitř stránky, záleží na přístupnosti, například na alternativním textu; samotný favicon je ale dekorace rozhraní prohlížeče, ne obsah stránky. K tomuto rozlišení viz náš pragmatický průvodce alternativním textem obrázků.

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

💡 Vyzkoušejte toto: Vygenerujte varianty ICO, PNG a SVG, které moderní prohlížeče očekávají, najednou pomocí Ultimate Favicon Generator.

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

Jednoduchý implementační checklist

Před nasazením použijte tento checklist:

1. Začněte od čistého vektorového masteru.
2. Otestujte značku ve velikostech 16×16 a 32×32.
3. Exportujte soběstačný SVG favicon.
4. Vygenerujte vícerozměrový ICO fallback.
5. Exportujte Apple touch icon ve velikosti 180×180.
6. Pokud používáte manifest, přidejte PNG ve velikostech 192×192 a 512×512.
7. Umístěte /favicon.ico do kořene webu.
8. Ověřte stavové kódy, MIME typy a hlavičky cachování.
9. Testujte alespoň v jednom prohlížeči Chromium, ve Firefoxu a v Safari, pokud vaše publikum zahrnuje zařízení Apple.

Favicony jsou malé, ale také velmi viditelné. Rozbitý favicon působí, že web není dokončený. Dobře udělaný favicon se v rozhraní ztratí, a přesně o to jde.