Favicon UX: Čo robí favicon skvelým

Skvelý favicon je jednoduchá, kontrastná značka, zvyčajne váš logomark alebo jedno až dve písmená, ktorá zostáva čitateľná v 16x16 pixeloch na svetlých aj tmavých kartách prehliadača, zodpovedá vašej značke a len zriedka sa mení. Všetko ostatné v tomto sprievodcovi (zarovnanie na pixely, farby, odsadenie, priehľadnosť, veľkosť súboru) slúži týmto cieľom: aby bol váš web okamžite nájditeľný medzi desiatkami otvorených kariet.

Favicon je drobný, ale zobrazuje sa na mnohých miestach: v kartách prehliadača, na paneli záložiek, v zozname histórie, v ponuke vyhľadávania kariet, vo výsledkoch vyhľadávania Google na mobiloch aj počítačoch a na domovských obrazovkách telefónov. Ak má používateľ otvorených veľa kariet, názov sa často skráti na nič a ikona je jediným orientačným bodom. Je to teda skutočný navigačný prvok, nie dekorácia.

1. Čitateľnosť v 16x16

Klasická veľkosť faviconu je 16x16 CSS pixelov. Na štandardnom displeji je to doslova 256 pixelov; na 2x retina displeji prehliadač pre rovnaký priestor zvyčajne vyberie obrázok 32x32. Čokoľvek navrhnete, musí toto zmenšenie prežiť.

Udržte to jednoduché

• Jeden tvar alebo jedno až dve písmená. Funguje jedno výrazné písmeno, kruh so symbolom alebo jednoduchá geometrická značka. Tri písmená alebo slovo sa zmenia na šum.
• Jeden stredobod. Ak ikonu nedokážete opísať piatimi slovami, je príliš komplikovaná.
• Žiadne prechody, tiene ani jemné textúry. V malých veľkostiach sa menia na rozmazané škvrny.

Zarovnajte na pixelovú mriežku

V 16x16 sa čiara posunutá o pol pixela mimo mriežky vyhladí cez dva riadky pixelov a vyzerá sivo a mäkko. Hrany umiestnite na celé pixely a pri symetrických tvaroch používajte párne šírky. Ak exportujete z vektorového nástroja, zapnite prichytávanie k pixelom, alebo skontrolujte zmenšený výsledok a opravte ho ručne.

Vyhnite sa tenkým čiaram

Ťahy tenšie ako 2 pixely v 16x16 (asi 12 percent šírky ikony) majú tendenciu miznúť alebo blikať medzi veľkosťami. Ťahy zhrubnite, odstráňte vnútorné detaily a zlúčte malé medzery. Výrazný, o niečo hrubší glyf sa zvyčajne číta lepšie než verná miniatúra detailného loga.

Dolaďte ručne

Súbory ICO a PNG nemajú hinting ako písma, takže ekvivalentom je ručná úprava pixelov: upravujete jednotlivé pixely tak, aby krivky, uhlopriečky a vnútorné otvory (diery v písmenách ako „a“ alebo „e“) zostali ostré. Automatické zmenšenie je dobrý prvý návrh, ale niekoľko ručne umiestnených pixelov často rozhodne medzi škvrnou a rozpoznateľným písmenom. Pixelový editor MakeFav je na to vytvorený: otvorte plátno 16x16, opravte problémové pixely a exportujte.

2. Kontrast na svetlých a tmavých kartách

Prehliadače dnes bežne bežia v tmavom režime a mnohí používatelia majú panel kariet odlišný od témy stránky. Tmavomodrá ikona s priehľadným pozadím môže byť na bielej karte perfektná a na tmavosivej takmer neviditeľná. Vždy testujte obe varianty.

Praktické riešenia

• Pridajte tvar na pozadí. Plný zaoblený štvorec alebo kruh vo farbe značky zaručí, že značka má vlastný kontrast bez ohľadu na kartu.
• Použite tenký obrys alebo halo. 1px svetlejší okraj okolo tmavého glyfu (alebo naopak) udrží siluetu viditeľnú v oboch témach, ale v 16x16 musí zostať ostrý, preto ho otestujte.
• Vyberte stredne sýte farby značky. Farby ako výrazná modrá, oranžová, zelená alebo purpurová zvyčajne fungujú na bielych aj takmer čiernych plochách. Rizikové sú veľmi svetlá žltá alebo veľmi tmavá námornícka modrá.
• Použite adaptívny SVG favicon. SVG môže obsahovať media query prefers-color-scheme, takže sa ikona mení podľa systémovej témy.

<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>

Majte na pamäti, že media query odráža tému operačného systému alebo prehliadača, ktorú panel kariet zvyčajne nasleduje, ale nie vždy. Podpora SVG faviconov sa tiež líši: Chrome a Firefox ich zvládajú, Safari v minulosti zaostával, preto vždy ponechajte záložné PNG alebo ICO. Dizajn s plným pozadím je najrobustnejšou možnosťou, pretože nepotrebuje žiadnu logiku tém.

3. Rozpoznateľnosť a konzistentnosť značky

Použite logomark (symbol alebo monogram), nie celé logo so slovnou časťou. Text v ikone 16x16 je nečitateľný a široké horizontálne logo zmenšené do štvorca vám zanechá len drobný pásik uprostred.

• Ak má vaša značka symbol, zjednodušte ho pre malé veľkosti namiesto toho, aby ste ho len zmenšili. „Favicon verzia“ s menším počtom detailov je bežná prax.
• Ak je vaša značka iba slovná, vezmite prvé písmeno alebo výrazný pár písmen a zapíšte ich písmom značky v tučnom reze.
• Farby udržte v súlade s logom, ikonou aplikácie a avatarmi na sociálnych sieťach, aby používateľ rozpoznal tú istú značku všade.

Odlišnosť je rovnako dôležitá ako vernosť. Pozrite sa na rad kariet: ak aj ďalšie tri weby používajú modrý kruh, ten váš nevynikne. Iný tvar alebo farba je užitočnejšia než dokonale verné zmenšenie.

4. Farby: obmedzená, sýta paleta

Pri tak málo pixeloch každá ďalšia farba pridáva neporiadok. Mierte na jednu alebo dve farby plus najviac bielu alebo čiernu. Sýte farby v malých veľkostiach fungujú lepšie než pastelové, ktoré sa majú tendenciu strácať v pozadí karty.

Požičajte si trochu z prístupnosti. WCAG vyžaduje kontrast aspoň 3:1 pre zmysluplné grafické objekty (kritérium úspešnosti 1.4.11, Kontrast netextového obsahu). Favicon sa formálne nevzťahuje, pretože ide o súčasť prehliadača, nie o obsah stránky, ale 3:1 medzi glyfom a jeho pozadím a medzi ikonou a kartou je rozumný cieľ. Vyhnite sa tiež tomu, aby ste čokoľvek vyjadrovali len odtieňom: červený a zelený variant tej istej ikony sú pre mnohých farboslepých používateľov nerozlíšiteľné, preto meňte tvar alebo pridajte symbol.

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

Vyplňte štvorec

Karty prehliadača zobrazujú favicon v pevnej malej veľkosti, takže ďalší okraj len zmenšuje vašu značku. Pri štandardných ikonách kariet využite väčšinu plátna, s jedným či dvoma pixelmi voľného priestoru, aby bola značka čo najväčšia.

Zaoblený alebo štvorcový?

Prehliadače favicony kariet vo všeobecnosti neorezávajú, takže tvar, ktorý nakreslíte, je tvar, ktorý používatelia uvidia. Štvorec s jemne zaoblenými rohmi vyzerá upravene a poskytuje konzistentné pozadie; voľný glyf alebo kruh na priehľadnom pozadí môže pôsobiť ľahšie a výraznejšie. Obe možnosti sú v poriadku. Vyberte jednu a celú sadu ikon udržte konzistentnú.

Apple touch ikony

iOS pridáva k apple-touch-icon vlastné zaoblené rohy (bežná veľkosť je 180x180). Dodajte štvorec vyplnený až po okraj bez vopred zaoblených rohov, inak sa môžu v rohoch objaviť viditeľné tmavé alebo biele pásiky.

Maskovateľné ikony pre Android a PWA

Maskovateľné ikony operačný systém orezáva do kruhov, squircle tvarov alebo iných tvarov. Všetok dôležitý obsah držte v bezpečnej zóne: kruhu vycentrovanom v ikone s polomerom 40 percent šírky ikony. Farbu pozadia rozšírte až k okrajom, aby vyzerala dobre každá maska. Nepoužívajte tesný favicon z karty (od okraja k okraju) ako maskovateľnú ikonu, pretože ho maska odreže.

6. Priehľadnosť

Priehľadnosť je v poriadku pre favicony kariet a práve vďaka nej môže ikona len s glyfom čisto sedieť na karte ľubovoľnej farby. Problém je pri Apple touch ikonách: iOS vypĺňa priehľadné oblasti plnou farbou (zvyčajne čiernou), čo môže zničiť dizajn. Apple-touch-icon vždy vybavte nepriehľadným pozadím vo farbe vašej značky. To isté platí pre maskovateľné ikony a väčšinu prípadov použitia na domovskej obrazovke Androidu, kde nepriehľadné pozadie dáva predvídateľné výsledky.

7. Stabilita: nemeňte ho príliš často

Favicon buduje rozpoznateľnosť opakovaním. Časté zmeny nútia používateľov znova sa učiť, ktorá karta je vaša, a spôsobujú aj technické problémy. Prehliadače favicony agresívne ukladajú do cache a Google ich sťahuje a ukladá oddelene od vašich stránok, takže nová ikona sa vo výsledkoch vyhľadávania môže objaviť až po dňoch či týždňoch. Google tiež vyžaduje stabilnú URL faviconu, ikonu, ktorej veľkosť je násobkom 48 pixelov (48x48, 96x96 a podobne), a súbor, ktorý môže prehľadávať (nie je blokovaný v robots.txt). Zmenu faviconu berte ako rozhodnutie na úrovni rebrandingu, nie ako sezónnu dekoráciu.

8. Stavy upozornení a dynamické favicony

Niektoré webové aplikácie menia favicon, aby signalizovali neprečítané správy, stav nahrávania alebo chybu. Ak sa to urobí dobre, je to užitočné; ak sa to preženie, je to otravné.

• Použite malý odznak (bodku alebo krátky počet) v rohu, nie úplný redizajn. Základná ikona má zostať rozpoznateľná.
• Používajte ho striedmo. Odznaky si nechajte pre udalosti, ktoré vyžadujú akciu používateľa. Ikonu neanimujte nepretržite.
• Obmedzte čísla. V 16x16 je čitateľná iba jedna či dve číslice; namiesto „137“ zobrazte „9+“ alebo obyčajnú bodku.
• Rýchlo obnovte pôvodný stav, keď používateľ vec vybavil, a vráťte predvolenú ikonu.
• Nespoliehajte sa len na farbu. Červenú bodku by mal podporiť aj názov stránky, napríklad „(3) Doručená pošta“, aby bola informácia dostupná každému.

Dynamické favicony sa zvyčajne kreslia na canvas a vymieňajú sa aktualizáciou atribútu href prvku link s ikonou. Aktualizácie obmedzte, pretože neustále meniaci sa favicon môže zaťažovať procesor a rozptyľovať používateľov.

9. Výkon

Favicony sú malé, ale stále ide o požiadavky, ktoré sa dajú vyriešiť zle.

• Súbory držte malé. PNG favicon má zvyčajne niekoľko stoviek bajtov až niekoľko kilobajtov. Jednoduché SVG môže mať menej ako 1 KB.
• Vyhnite sa nafúknutým súborom ICO. Viacveľkostný ICO s obrázkami 16, 32 a 48 pixelov stačí. Vloženie obrázka 256x256 znásobí veľkosť súboru bez viditeľného prínosu v kartách prehliadača.
• Nastavte hlavičky cache. Ikony servírujte s dlhou platnosťou Cache-Control, napríklad public, max-age=31536000, immutable, a keď ich meníte, použite verzovaný alebo hashovaný názov súboru.
• Deklarujte ikony explicitne. Prehliadače predvolene žiadajú /favicon.ico, preto ho poskytnite, aj keď deklarujete iné ikony, aby ste predišli zbytočným chybám 404 vo vašich logoch.
• Komprimujte. PNG prepúšťajte cez bezstratový optimalizátor 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'>

Ak chcete všetky tieto súbory vygenerovať z jedného zdrojového obrázka, generátor faviconov MakeFav vytvorí štandardnú sadu a stránka pre vývojárov popisuje možnosti integrácie.

10. Prístupnosť

Favicon nemá alternatívny text a čítačky obrazovky ho neoznamujú, takže tradičné nástroje prístupnosti, ako sú atribúty alt, sa neuplatňujú. Čo skutočne záleží:

• Význam nesie názov stránky. Píšte jedinečné, popisné prvky <title>. Nikdy sa nespoliehajte, že stav vyjadrí ikona; každý odznak zopakujte v názve.
• Viditeľnosť pre používateľov so slabým zrakom. Vysoký kontrast, výrazný tvar a veľká značka pomáhajú používateľom, ktorí karty prehliadajú zrakom.
• Nezávislosť od farby. Dbajte na to, aby stavy odlišovali tvary alebo písmená, nie len odtieň.
• Menej rozptyľovania. Vyhnite sa blikajúcim alebo animovaným faviconom, ktoré môžu byť problémom pre používateľov citlivých na pohyb.

Kontrolný zoznam favicon UX

Kontrolný zoznam testovania

Neverte veľkému náhľadu vo svojom dizajnérskom nástroji. Otestujte skutočnú ikonu v reálnych podmienkach:

1. Viaceré prehliadače. Skontrolujte Chrome, Firefox, Safari a Edge, pretože každý vyberá ikony a veľkosti trochu inak.
2. Svetlý a tmavý režim. Prepnite tému OS aj prehliadača a zakaždým sa pozrite na panel kariet.
3. Retina a štandardné displeje. Skontrolujte na monitore 1x aj na obrazovke 2x alebo 3x a priblížte v prehliadači.
4. Panel záložiek. Pridajte stránku do záložiek a pozrite sa, či je ikona vedľa iných webov stále čitateľná.
5. Veľa kariet. Otvorte 20 kariet a zistite, či tú svoju nájdete na prvý pohľad.
6. Náhľad Google SERP. Skontrolujte mobilný výsledok vyhľadávania po opätovnom prehľadaní ikony. Pamätajte, že aktualizácia môže chvíľu trvať.
7. Domovská obrazovka. Pridajte web na domovskú obrazovku iOS aj Androidu a overte, že ikona nie je orezaná, nemá čierne rohy a nie je príliš malá v rámci masky.
8. Technická kontrola. Prejdite svoju doménu cez kontrolór faviconov MakeFav a overte, že súbory existujú, vracajú stav 200, majú správne veľkosti a sú správne deklarované vo vašom HTML.

Praktický postup

1. Začnite svojím logomarkom a zjednodušte ho na jeden tvar alebo písmeno.
2. Vytvorte štvorcové plátno s plným alebo tvarovaným pozadím, ktoré funguje v oboch témach.
3. Exportujte veľkosti 32x32 a 16x16 a malú verziu doladťe ručne v pixelovom editore.
4. Vygenerujte celú sadu (ICO, PNG, apple-touch-icon, ikony manifestu) pomocou generátora.
5. Pridajte značky link, nastavte hlavičky cache, nasaďte a overte pomocou kontrolóra.

Favicon je jedným z najmenších prvkov vášho webu a zároveň jedným z najčastejšie videných. Niekoľko premyslených rozhodnutí o kontraste, jednoduchosti a konzistentnosti zabezpečí, že bude fungovať v každej karte, téme a zariadení.

Často kladené otázky

Akú veľkosť by mal mať favicon?

Navrhujte pre 16x16 a 32x32 pre karty prehliadača (na displejoch s vysokou hustotou prehliadač používa 32x32), pripravte apple-touch-icon 180x180 pre iOS a PNG 192x192 a 512x512 pre Android a PWA. Pre výsledky vyhľadávania Google použite štvorcovú ikonu, ktorej veľkosť je násobkom 48 pixelov, napríklad 48x48 alebo 96x96. Zdroj v SVG sa škáluje na všetky tieto veľkosti.

Mám ako favicon použiť celé logo?

Zvyčajne nie. Celé logá so slovnou časťou sú príliš detailné a príliš široké pre štvorcovú ikonu 16x16. Použite logomark alebo monogram z jedného či dvoch písmen a zjednodušte ho tak, aby zostal rozpoznateľný aj v malej veľkosti.

Ako zabezpečiť, aby favicon fungoval v tmavom režime?

Najbezpečnejší prístup je dať ikone vlastný plný tvar pozadia alebo kontrastný obrys, aby nezávisela od farby karty. Alternatívne použite SVG favicon s media query prefers-color-scheme na zámenu farieb a ponechajte záložné PNG alebo ICO pre prehliadače, ktoré SVG ikony nepodporujú. Vždy testujte v svetlej aj tmavej téme.

Prečo sa môj nový favicon nezobrazuje?

Prehliadače favicony ukladajú do cache na dlhý čas a Google uchováva vlastnú kópiu, ktorú obnovuje podľa vlastného harmonogramu, čo často trvá dni či týždne. Obnovte stránku natvrdo, vymažte cache prehliadača, použite nový verzovaný názov súboru a uistite sa, že značky link a koreňový /favicon.ico ukazujú na správny súbor. Nastavenie môžete overiť pomocou kontrolóra MakeFav.

Je dobrý nápad zobrazovať na faviconi odznaky upozornení?

Áno, ak sa používajú striedmo. Malá bodka alebo jedno- či dvojciferný počet pomáha používateľom všimnúť si niečo, čo vyžaduje akciu, ale neustála animácia alebo veľké čísla poškodzujú čitateľnosť a pozornosť. Stav vždy zopakujte v názve stránky, po vybavení položky obnovte predvolenú ikonu a nespoliehajte sa len na farbu.