Favicon UX: Co dělá favicon skvělým

Skvělý favicon je jednoduchá, kontrastní značka, obvykle symbol vašeho loga nebo jedno či dvě písmena, která zůstává čitelná v 16x16 pixelech na světlých i tmavých panelech prohlížeče, odpovídá vaší značce a jen zřídka se mění. Vše ostatní v tomto průvodci (zarovnání na pixely, barvy, odsazení, průhlednost, velikost souboru) slouží těmto cílům: aby byl váš web okamžitě k nalezení mezi desítkami otevřených panelů.

Favicon je drobný, ale objevuje se na mnoha místech: v panelech prohlížeče, na liště záložek, v seznamech historie, ve vyhledávání panelů, ve výsledcích vyhledávání Google na mobilu i počítači a na domovských obrazovkách telefonů. U uživatelů s mnoha otevřenými panely se název často zkrátí na nic a ikona je jediným vodítkem, které zbývá. Je to tedy skutečný navigační prvek, ne dekorace.

1. Čitelnost v 16x16

Klasická velikost faviconu je 16x16 CSS pixelů. Na standardním displeji je to doslova 256 pixelů; na retina displeji 2x prohlížeč pro stejný prostor obvykle vybere obrázek 32x32. Cokoli navrhnete, musí toto zmenšení přežít.

Udržte to jednoduché

• Jeden tvar nebo jedno až dvě písmena. Funguje jedno tučné písmeno, kruh se symbolem nebo jednoduchý geometrický znak. Tři písmena nebo slovo se změní v šum.
• Jeden středobod. Pokud ikonu neumíte popsat pěti slovy, je příliš složitá.
• Žádné přechody, stíny ani jemné textury. V malých velikostech se z nich stanou rozmazané šmouhy.

Zarovnejte na pixelovou mřížku

V 16x16 se čára umístěná o půl pixelu mimo mřížku vyhladí přes dvě řady pixelů a vypadá šedě a měkce. Hrany umísťujte na celé pixelové hranice a u souměrných tvarů používejte sudé šířky. Pokud exportujete z vektorového nástroje, zapněte přichytávání na pixely, nebo zkontrolujte zmenšený výsledek a opravte ho ručně.

Vyhněte se tenkým čárám

Tahy tenčí než 2 pixely v 16x16 (asi 12 procent šířky ikony) mívají tendenci mizet nebo blikat mezi velikostmi. Tahy zesilte, odstraňte vnitřní detaily a sloučte malé mezery. Tučný, mírně těžší symbol se obvykle čte lépe než věrná miniatura detailního loga.

Doladění ručně

Soubory ICO a PNG nemají žádné hinting pro písmo, takže ruční úprava pixelů je jeho ekvivalentem: upravujete jednotlivé pixely tak, aby křivky, úhlopříčky a vnitřní otvory (díry v písmenech jako „a“ nebo „e“) zůstaly ostré. Automatické zmenšení je dobrý první návrh, ale několik ručně umístěných pixelů často rozhodne mezi skvrnou a rozpoznatelným písmenem. Pixelový editor MakeFav je pro to vytvořen: otevřete plátno 16x16, opravte problémové pixely a exportujte.

2. Kontrast na světlých a tmavých panelech

Prohlížeče dnes běžně běží v tmavém režimu a mnoho uživatelů má lištu panelů jinou než motiv stránky. Tmavě námořnická ikona s průhledným pozadím může být na bílém panelu dokonalá a na tmavě šedém téměř neviditelná. Vždy testujte obě varianty.

Praktická řešení

• Přidejte tvar na pozadí. Plný zaoblený čtverec nebo kruh v barvě značky zaručí, že znak má vlastní kontrast bez ohledu na panel.
• Použijte tenký obrys nebo svatozář. Světlejší okraj o tloušťce 1 px kolem tmavého symbolu (nebo naopak) udrží siluetu viditelnou v obou motivech, ale v 16x16 musí zůstat ostrý, proto ho otestujte.
• Vyberte středně sytý odstín značky. Barvy jako výrazná modrá, oranžová, zelená nebo purpurová obvykle fungují na bílém i téměř černém povrchu. Riziková je velmi světlá žlutá a velmi tmavá námořnická modř.
• Použijte adaptivní SVG favicon. SVG může obsahovat media query prefers-color-scheme, takže se ikona mění podle motivu systému.

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'>
  <style>
    .mark { fill: #1b2a49; }
    @media (prefers-color-scheme: dark) {
      .mark { fill: #f5f7fa; }
    }
  </style>
  <path class='mark' d='M6 26V6h6l4 10 4-10h6v20h-4V13l-4 10h-4l-4-10v13z'/>
</svg>

Mějte na paměti, že media query odráží motiv operačního systému nebo prohlížeče, který lišta panelů obvykle následuje, ale ne vždy. Podpora SVG faviconů se také liší: Chrome a Firefox s nimi pracují, zatímco Safari historicky zaostávalo, proto vždy ponechte záložní PNG nebo ICO. Návrh s plným pozadím je nejrobustnější možností, protože nepotřebuje žádnou logiku motivů.

3. Rozpoznatelnost a konzistence značky

Použijte symbol loga (znak nebo monogram), ne kompletní logo s textovou částí. Text uvnitř ikony 16x16 je nečitelný a široké horizontální logo zmenšené do čtverce vám v prostředku zanechá jen drobný proužek.

• Pokud má vaše značka symbol, zjednodušte ho pro malé velikosti, místo abyste ho jen zmenšili. „Favicon verze“ s menším počtem detailů je běžná praxe.
• Pokud je vaše značka pouze textové logo, vezměte první písmeno nebo výrazný pár písmen a nastavte je firemním písmem v tučném řezu.
• Udržujte barvy konzistentní s logem, ikonou aplikace a avatary na sociálních sítích, aby uživatel poznal stejnou značku všude.

Odlišnost je stejně důležitá jako věrnost. Podívejte se na řadu panelů: pokud tři další weby také používají modrý kruh, ten váš nevynikne. Jiný tvar nebo barva je užitečnější než dokonale věrné zmenšení.

4. Barva: omezená, sytá paleta

S tak málo pixely každá další barva přidává nepořádek. Mějte jednu nebo dvě barvy plus nanejvýš bílou nebo černou. Sytější barvy v malých velikostech nesou lépe než pastelové, které mají tendenci splývat s pozadím panelu.

Přibližte se trochu myšlení o přístupnosti. WCAG požaduje kontrast alespoň 3:1 pro smysluplné grafické objekty (kritérium úspěšnosti 1.4.11, Kontrast netextového obsahu). Favicon se formálně nevztahuje, protože je součástí prohlížeče, ne obsahu stránky, ale 3:1 mezi symbolem a jeho pozadím i mezi ikonou a panelem je rozumný cíl. Vyhněte se také sdělování čehokoli pouze odstínem: červená a zelená varianta téže ikony jsou pro mnoho lidí s barvoslepostí nerozlišitelné, proto měňte tvar nebo přidejte symbol.

5. Tvar, odsazení a bezpečné zóny

Vyplňte čtverec

Panely prohlížeče zobrazují favicon v pevné malé velikosti, takže další okraj váš znak jen zmenšuje. U standardních ikon panelů využijte většinu plátna, jen s pixelem či dvěma volného místa, aby byl znak co největší.

Zaoblený, nebo hranatý?

Prohlížeče favicony v panelech obecně neořezávají, takže tvar, který nakreslíte, je tvar, který uživatelé uvidí. Čtverec s mírně zaoblenými rohy vypadá úhledně a poskytuje jednotné pozadí; volný symbol nebo kruh na průhlednosti může působit lehčeji a osobitěji. Obojí je v pořádku. Vyberte jednu variantu a držte se jí v celé sadě ikon.

Ikony Apple touch

iOS přidává apple-touch-icon vlastní zaoblené rohy (obvyklá velikost je 180x180). Dodejte čtverec bez okrajů a bez předem zaoblených rohů, jinak se vám v rozích mohou objevit viditelné tmavé nebo bílé proužky.

Maskovatelné ikony pro Android a PWA

Maskovatelné ikony operační systém ořízne do kruhů, zaoblených čtverců nebo jiných tvarů. Veškerý důležitý obsah držte uvnitř bezpečné zóny: kruhu se středem v ikoně a poloměrem 40 procent šířky ikony. Barvu pozadí natáhněte až k okrajům, aby každá maska vypadala správně. Nepoužívejte těsný favicon pro panely, vyplňující plochu až k okrajům, jako maskovatelnou ikonu, protože ho maska ořízne.

6. Průhlednost

Průhlednost je u faviconů pro panely v pořádku a právě ta umožňuje, aby ikona pouze se symbolem čistě seděla na jakékoli barvě panelu. Problémem je u ikon Apple touch: iOS vyplní průhledné oblasti plnou barvou (typicky černou), což může návrh zničit. Apple-touch-icon vždy opatřete neprůhledným pozadím v barvě značky. Totéž platí pro maskovatelné ikony a většinu případů použití na domovské obrazovce Androidu, kde neprůhledné pozadí dává předvídatelné výsledky.

7. Stabilita: neměňte ho příliš často

Favicon buduje rozpoznání opakováním. Časté změny nutí uživatele znovu se učit, který panel je váš, a způsobují také technické potíže. Prohlížeče favicony agresivně cachují a Google je stahuje a ukládá odděleně od vašich stránek, takže nové ikoně může trvat dny či týdny, než se objeví ve výsledcích vyhledávání. Google také požaduje stabilní URL faviconu, ikonu s velikostí násobkem 48 pixelů (48x48, 96x96 a tak dále) a soubor, který může procházet (není blokován v robots.txt). Změnu faviconu berte jako rozhodnutí na úrovni rebrandingu, ne sezónní dekoraci.

8. Stavy oznámení a dynamické favicony

Některé webové aplikace mění favicon, aby signalizovaly nepřečtené zprávy, stav nahrávání nebo chybu. Dobře provedené je to užitečné, přehnané je to dráždivé.

• Použijte malý odznak (tečku nebo krátké číslo) v rohu, ne kompletní redesign. Základní ikona by měla zůstat rozpoznatelná.
• Šetřete jím. Odznaky si nechte pro události vyžadující akci uživatele. Ikonu nepřetržitě neanimujte.
• Omezte čísla. V 16x16 jsou čitelné jen jedna či dvě číslice; místo „137“ zobrazte „9+“ nebo prostou tečku.
• Rychle resetujte, jakmile uživatel položku vyřídí, a obnovte výchozí ikonu.
• Nespoléhejte jen na barvu. Červenou tečku by měl podpořit také název stránky, například „(3) Doručená pošta“, aby informace byla dostupná všem.

Dynamické favicony se obvykle kreslí na canvas a vyměňují se aktualizací atributu href prvku link s ikonou. Aktualizace omezujte, protože neustálé měnění faviconu může zatěžovat procesor a rozptylovat uživatele.

9. Výkon

Favicony jsou malé, ale stále jde o požadavky, které lze provést špatně.

• Udržujte soubory malé. PNG favicon má obvykle několik set bajtů až několik kilobajtů. Jednoduché SVG může mít méně než 1 KB.
• Vyhněte se nafouknutým souborům ICO. Víceveliké ICO s obrázky 16, 32 a 48 pixelů stačí. Vložení obrázku 256x256 znásobí velikost souboru bez viditelného přínosu v panelech prohlížeče.
• Nastavte cachovací hlavičky. Ikony servírujte s dlouhou platností Cache-Control, například public, max-age=31536000, immutable, a při jejich změně použijte verzovaný nebo hashovaný název souboru.
• Deklarujte ikony explicitně. Prohlížeče standardně požadují /favicon.ico, proto jej poskytněte, i když deklarujete jiné ikony, abyste předešli šumu 404 v logech.
• Komprimujte. PNG protáhněte bezztrátovým optimalizátorem a SVG minifikujte.

<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='/manifest.webmanifest'>

Pokud chcete všechny tyto soubory vygenerovat z jednoho zdrojového obrázku, generátor faviconů MakeFav vytvoří standardní sadu a stránka pro vývojáře popisuje možnosti integrace.

10. Přístupnost

Favicon nemá alternativní text a čtečky obrazovky ho neoznamují, takže tradiční nástroje přístupnosti jako atributy alt neplatí. Co důležité je:

• Význam nese název stránky. Pište jedinečné, popisné prvky <title>. Nikdy se nespoléhejte, že ikona sdělí stav; jakýkoli odznak zopakujte v názvu.
• Viditelnost pro slabozraké. Vysoký kontrast, tučný tvar a velký znak pomáhají uživatelům, kteří panely procházejí zrakem.
• Nezávislost na barvě. Zajistěte, aby stavy rozlišoval tvar nebo písmeno, nejen odstín.
• Méně rozptylování. Vyhněte se blikajícím nebo animovaným faviconům, které mohou být problémem pro uživatele citlivé na pohyb.

Kontrolní seznam favicon UX

Kontrolní seznam testování

Nevěřte velkému náhledu ve svém návrhářském nástroji. Otestujte skutečnou ikonu ve skutečných podmínkách:

1. Více prohlížečů. Zkontrolujte Chrome, Firefox, Safari a Edge, protože každý vybírá ikony a velikosti trochu jinak.
2. Světlý a tmavý režim. Přepněte motiv OS a prohlížeče a pokaždé se podívejte na lištu panelů.
3. Retina a standardní displeje. Zkontrolujte na monitoru 1x i na obrazovce 2x nebo 3x a přibližte stránku v prohlížeči.
4. Lišta záložek. Přidejte stránku do záložek a zjistěte, zda je ikona vedle jiných webů stále čitelná.
5. Mnoho panelů. Otevřete 20 panelů a zjistěte, zda ten svůj najdete na první pohled.
6. Náhled ve výsledcích Google. Zkontrolujte výsledek mobilního vyhledávání poté, co byla ikona znovu procházena. Pamatujte, že aktualizace může chvíli trvat.
7. Domovská obrazovka. Přidejte web na domovskou obrazovku iOS a Androidu a ověřte, že ikona není oříznutá, nemá černé rohy a není uvnitř masky příliš malá.
8. Technická kontrola. Projděte svou doménu kontrolou faviconů MakeFav a ověřte, že soubory existují, vracejí stav 200, mají správné velikosti a jsou správně deklarovány v HTML.

Praktický postup

1. Začněte symbolem svého loga a zjednodušte ho na jeden tvar nebo písmeno.
2. Vytvořte čtvercové plátno s plným nebo tvarovaným pozadím, které funguje v obou motivech.
3. Exportujte velikosti 32x32 a 16x16 a malou verzi doladěte ručně v pixelovém editoru.
4. Vygenerujte kompletní sadu (ICO, PNG, apple-touch-icon, ikony manifestu) pomocí generátoru.
5. Přidejte značky link, nastavte cachovací hlavičky, nasaďte a ověřte pomocí kontroly.

Favicon je jedním z nejmenších prvků vašeho webu a zároveň jedním z nejčastěji viditelných. Několik pečlivých rozhodnutí o kontrastu, jednoduchosti a konzistenci zařídí, že bude fungovat v každém panelu, motivu i zařízení.

Často kladené otázky

Jak velký by měl favicon být?

Navrhujte pro 16x16 a 32x32 pro panely prohlížeče (na displejích s vysokou hustotou prohlížeč používá 32x32), pro iOS dodejte apple-touch-icon 180x180 a pro Android a PWA PNG 192x192 a 512x512. Pro výsledky vyhledávání Google použijte čtvercovou ikonu s velikostí násobkem 48 pixelů, například 48x48 nebo 96x96. Zdroj ve formátu SVG se škáluje na všechny tyto velikosti.

Mám jako favicon použít celé logo?

Obvykle ne. Kompletní loga s textovou částí jsou příliš detailní a příliš široká pro čtvercovou ikonu 16x16. Použijte symbol loga nebo monogram z jednoho či dvou písmen a zjednodušte ho tak, aby zůstal rozpoznatelný i v malé velikosti.

Jak zajistit, aby favicon fungoval v tmavém režimu?

Nejbezpečnější je dát ikoně vlastní plný tvar na pozadí nebo kontrastní obrys, aby nezávisela na barvě panelu. Případně použijte SVG favicon s media query prefers-color-scheme pro přepínání barev a ponechte záložní PNG nebo ICO pro prohlížeče, které SVG ikony nepodporují. Vždy testujte ve světlém i tmavém motivu.

Proč se můj nový favicon nezobrazuje?

Prohlížeče favicony cachují dlouho a Google ukládá vlastní kopii, kterou obnovuje podle vlastního plánu, často po dnech či týdnech. Stránku natvrdo obnovte, vymažte cache prohlížeče, použijte nový verzovaný název souboru a ujistěte se, že značky link i kořenový /favicon.ico ukazují na správný soubor. Nastavení můžete ověřit pomocí kontroly MakeFav.

Je dobrý nápad zobrazovat na faviconu odznaky oznámení?

Ano, pokud se používají střídmě. Malá tečka nebo jedno- či dvoumístné číslo pomůže uživatelům všimnout si něčeho, co vyžaduje akci, ale neustálá animace nebo velká čísla poškozují čitelnost i pozornost. Stav vždy zopakujte v názvu stránky, po vyřízení položky obnovte výchozí ikonu a nespoléhejte jen na barvu.