UX ikone favicon: kaj naredi odličen favicon

Odličen favicon je preprost, visoko kontrasten znak, običajno znak vaše znamke ali ena do dve črki, ki ostane berljiv pri 16x16 pikslih na svetlih in temnih zavihkih brskalnika, se ujema z vašo znamko in se redko spreminja. Vse ostalo v tem vodniku (poravnava pikslov, barve, odmiki, prosojnost, velikost datoteke) služi tem ciljem: da bo vaše spletno mesto takoj najdljivo med ducati odprtih zavihkov.

Favicon je droben, a se pojavlja na mnogih mestih: v zavihkih brskalnika, vrsticah zaznamkov, seznamih zgodovine, meniju za iskanje po zavihkih, v Googlovih rezultatih iskanja na mobilnih napravah in računalnikih ter na domačih zaslonih telefonov. Pri uporabnikih z veliko odprtimi zavihki je naslov pogosto skrajšan do neprepoznavnosti, ikona pa je edino, kar ostane. Zato je favicon pravi navigacijski element, ne okras.

1. Berljivost pri 16x16

Klasična velikost favicona je 16x16 CSS pikslov. Na standardnem zaslonu je to dobesedno 256 pikslov; na zaslonu retina 2x brskalnik za isti prostor običajno izbere sliko 32x32. Karkoli oblikujete, mora prestati to pomanjšanje.

Naj bo preprosto

• Ena oblika ali ena do dve črki. Deluje ena krepka črka, krog s simbolom ali preprost geometrijski znak. Tri črke ali beseda se spremenijo v šum.
• Ena žariščna točka. Če ikone ne znate opisati s petimi besedami, je preveč zapletena.
• Brez prelivov, senc ali finih tekstur. Pri majhnih velikostih postanejo zamegljene packe.

Poravnajte na mrežo pikslov

Pri 16x16 se črta, ki je za pol piksla zamaknjena od mreže, zgladi čez dve vrstici pikslov in je videti siva in mehka. Robove postavite na cele piksle in pri simetričnih oblikah uporabite sode širine. Če izvažate iz vektorskega orodja, vklopite pripenjanje na piksle ali preverite pomanjšan rezultat in ga ročno popravite.

Izogibajte se tankim črtam

Poteze, tanjše od 2 pikslov pri 16x16 (približno 12 odstotkov širine ikone), ponavadi izginejo ali utripajo med velikostmi. Poteze odebelite, odstranite notranje podrobnosti in združite majhne razmike. Krepek, nekoliko težak glif se običajno bere bolje kot zvesta pomanjšava podrobnega logotipa.

Popravljajte ročno

Datoteke ICO in PNG nimajo namigov (hintinga) kot pisave, zato je enakovredna rešitev ročno urejanje pikslov: prilagodite posamezne piksle, da ostanejo krivulje, diagonale in notranje odprtine (luknje v črkah, kot sta „a“ ali „e“) ostre. Samodejno pomanjšanje je dober prvi osnutek, a nekaj ročno postavljenih pikslov pogosto naredi razliko med packo in prepoznavno črko. Urejevalnik pikslov MakeFav je narejen prav za to: odprite platno 16x16, popravite problematične piksle in izvozite.

2. Kontrast na svetlih in temnih zavihkih

Brskalniki danes pogosto delujejo v temnem načinu, mnogi uporabniki pa imajo vrstico zavihkov, ki se razlikuje od teme strani. Temno mornarsko modra ikona s prosojnim ozadjem je lahko popolna na belem zavihku in skoraj nevidna na temno sivem. Vedno preizkusite oba.

Praktične rešitve

• Dodajte obliko ozadja. Polni zaobljeni kvadrat ali krog v barvi znamke zagotovi, da ima znak lasten kontrast, ne glede na zavihek.
• Uporabite tanek obris ali svetlobni obroč. 1 px svetlejši rob okoli temnega glifa (ali obratno) ohrani silueto vidno v obeh temah, vendar mora pri 16x16 ostati oster, zato ga preizkusite.
• Izberite srednje tone barv znamke. Barve, kot so močna modra, oranžna, zelena ali magenta, običajno delujejo na belih in skoraj črnih površinah. Tvegani sta zelo svetlo rumena ali zelo temno mornarsko modra.
• Uporabite prilagodljiv SVG favicon. SVG lahko vsebuje medijsko poizvedbo prefers-color-scheme, tako da se ikona spreminja s sistemsko temo.

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

Upoštevajte, da medijska poizvedba odraža temo operacijskega sistema ali brskalnika, ki ji vrstica zavihkov običajno sledi, vendar ne vedno. Tudi podpora za SVG favicone je različna: Chrome in Firefox jih podpirata, Safari pa je zgodovinsko zaostajal, zato vedno ohranite nadomestne datoteke PNG ali ICO. Zasnova s polnim ozadjem je najrobustnejša možnost, ker sploh ne potrebuje logike tem.

3. Prepoznavnost in skladnost znamke

Uporabite znak znamke (simbol ali monogram), ne celotne postavitve logotipa z besedilnim delom. Besedilo v ikoni 16x16 je neberljivo, širok vodoravni logotip, skrčen v kvadrat, pa pusti le drobno črto na sredini.

• Če ima vaša znamka simbol, ga za majhne velikosti poenostavite, namesto da ga samo pomanjšate. „Favicon različica“ z manj podrobnostmi je običajna praksa.
• Če je vaša znamka samo besedni znak, vzemite prvo črko ali značilen par črk in ju zapišite v pisavi znamke v krepki težini.
• Barve naj bodo skladne z vašim logotipom, ikono aplikacije in avatarji na družbenih omrežjih, da uporabnik povsod prepozna isto znamko.

Posebnost je enako pomembna kot zvestoba originalu. Poglejte vrsto zavihkov: če tudi tri druga spletna mesta uporabljajo modri krog, se vaše ne bo izpostavilo. Drugačna oblika ali barva je bolj uporabna kot popolnoma zvesta pomanjšava.

4. Barve: omejena, nasičena paleta

Pri tako malo pikslih vsaka dodatna barva doda nered. Ciljajte na eno ali dve barvi in največ še belo ali črno. Nasičene barve se pri majhnih velikostih bolje obnesejo kot pastelne, ki se ponavadi zlijejo z ozadjem zavihka.

Nekaj si sposodite iz razmišljanja o dostopnosti. WCAG zahteva vsaj 3:1 kontrast za pomembne grafične objekte (merilo uspeha 1.4.11, Kontrast nebesedilnih elementov). Favicon formalno ni zajet, saj je del vmesnika brskalnika in ne vsebina strani, vendar je 3:1 med glifom in njegovim ozadjem ter med ikono in zavihkom smiseln cilj. Prav tako ničesar ne sporočajte samo z odtenkom: rdeča in zelena različica iste ikone sta za mnoge barvno slepe uporabnike neločljivi, zato spremenite obliko ali dodajte simbol.

5. Oblika, odmiki in varna območja

Zapolnite kvadrat

Zavihki brskalnika prikazujejo favicon v fiksni majhni velikosti, zato dodaten rob samo zmanjša vaš znak. Za standardne ikone zavihkov uporabite večino platna z le enim ali dvema pikslema prostora, da je znak čim večji.

Zaobljen ali oglat?

Brskalniki favikonov v zavihkih na splošno ne obrežejo, zato je oblika, ki jo narišete, tista, ki jo vidijo uporabniki. Kvadrat rahlo zaobljenih vogalov je videti urejeno in zagotavlja enotno ozadje; prostoročni glif ali krog na prosojnem ozadju je lahko lahkotnejši in bolj izrazit. Obe možnosti sta v redu. Izberite eno in ohranite skladnost celotnega kompleta ikon.

Ikone Apple touch

iOS ikoni apple-touch-icon doda lastne zaobljene vogale (običajna velikost je 180x180). Priskrbite kvadrat do roba brez vnaprej zaobljenih vogalov, sicer lahko v vogalih nastanejo vidni temni ali beli trakovi.

Maskable ikone za Android in PWA

Maskable ikone operacijski sistem obreže v kroge, zaobljene kvadrate ali druge oblike. Vso pomembno vsebino ohranite znotraj varnega območja: kroga, centriranega v ikoni, s polmerom 40 odstotkov širine ikone. Barvo ozadja raztegnite do robov, da bo videti prav vsaka maska. Tesnega favicona do roba, namenjenega zavihkom, ne uporabljajte ponovno kot maskable ikono, ker ga bo maska odrezala.

6. Prosojnost

Prosojnost je za favicone v zavihkih v redu in omogoča, da ikona samo z glifom čisto sedi na kateri koli barvi zavihka. Težava pa je pri ikonah Apple touch: iOS prosojna področja zapolni s polno barvo (običajno črno), kar lahko uniči zasnovo. Ikoni apple-touch-icon vedno dodajte neprosojno ozadje v barvi znamke. Enako velja za maskable ikone in večino primerov uporabe na domačem zaslonu Androida, kjer neprosojno ozadje daje predvidljive rezultate.

7. Stabilnost: ne spreminjajte ga prepogosto

Favicon gradi prepoznavnost s ponavljanjem. Pogosto spreminjanje prisili uporabnike, da se znova učijo, kateri zavihek je vaš, povzroča pa tudi tehnične težave. Brskalniki favicone agresivno predpomnijo, Google pa jih pridobiva in shranjuje ločeno od vaših strani, zato lahko nova ikona v rezultatih iskanja postane vidna šele čez dneve ali tedne. Google prav tako zahteva stabilen URL favicona, ikono z velikostjo, ki je večkratnik 48 pikslov (48x48, 96x96 in tako naprej), ter datoteko, ki jo lahko preišče (ni blokirana z robots.txt). Spremembo favicona obravnavajte kot odločitev na ravni prenove znamke, ne kot sezonsko dekoracijo.

8. Stanja obvestil in dinamični favicon

Nekatere spletne aplikacije spremenijo favicon, da nakažejo neprebrana sporočila, stanje snemanja ali napako. Če je dobro narejeno, je to koristno; če pretirano, je moteče.

• Uporabite majhno značko (pika ali kratko število) v kotu, ne popolne prenove. Osnovna ikona naj ostane prepoznavna.
• Bodite zadržani. Značke prihranite za dogodke, ki zahtevajo uporabnikovo dejanje. Ikone ne animirajte neprekinjeno.
• Omejite števila. Pri 16x16 sta berljivi le ena ali dve števki; namesto „137“ pokažite „9+“ ali preprosto piko.
• Hitro ponastavite, ko uporabnik element obravnava, in obnovite privzeto ikono.
• Ne zanašajte se samo na barvo. Rdečo piko naj podpre tudi naslov strani, na primer „(3) Prejeto“, da so informacije na voljo vsem.

Dinamične favicone običajno narišemo na platno in zamenjamo s posodobitvijo atributa href elementa povezave ikone. Posodobitve omejite, saj stalno spreminjanje favicona lahko porablja procesor in moti uporabnike.

9. Zmogljivost

Favicone so majhne, a so še vedno zahtevki, ki jih je mogoče slabo izvesti.

• Datoteke naj bodo majhne. PNG favicon je običajno velik od nekaj sto bajtov do nekaj kilobajtov. Preprost SVG je lahko pod 1 KB.
• Izogibajte se napihnjenim datotekam ICO. Večvelikostni ICO s slikami 16, 32 in 48 pikslov zadostuje. Vdelava slike 256x256 večkratno poveča velikost datoteke brez vidne koristi v zavihkih brskalnika.
• Nastavite glave za predpomnjenje. Ikone postrezite z dolgo življenjsko dobo Cache-Control, na primer public, max-age=31536000, immutable, in ob spremembi uporabite različico ali zgoščeno ime datoteke.
• Ikone izrecno deklarirajte. Brskalniki privzeto zahtevajo /favicon.ico, zato ga priskrbite, tudi če deklarirate druge ikone, da se izognete šumu 404 v dnevnikih.
• Stisnite. PNG-je spustite skozi optimizator brez izgub, SVG-je pa minificirajte.

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

Če želite vse te datoteke ustvariti iz ene izvorne slike, generator faviconov MakeFav izdela standardni komplet, stran za razvijalce pa zajema možnosti integracije.

10. Dostopnost

Favicon nima nadomestnega besedila, bralniki zaslona pa ga ne napovedo, zato tradicionalna orodja za dostopnost, kot so atributi alt, ne veljajo. Kaj je pomembno:

• Pomen nosi naslov strani. Pišite edinstvene, opisne elemente <title>. Nikoli se ne zanašajte, da bo ikona prenašala stanje; vsako značko ponovite v naslovu.
• Vidnost za slabovidne uporabnike. Visok kontrast, krepka oblika in velik znak pomagajo uporabnikom, ki zavihke pregledujejo vizualno.
• Neodvisnost od barve. Poskrbite, da stanja ločujejo oblike ali črke, ne le odtenek.
• Manj motenj. Izogibajte se utripajočim ali animiranim faviconom, ki so lahko težava za uporabnike, občutljive na gibanje.

Kontrolni seznam UX za favicon

Kontrolni seznam za testiranje

Ne zaupajte velikemu predogledu v oblikovalskem orodju. Preizkusite pravo ikono v resničnih pogojih:

1. Več brskalnikov. Preverite Chrome, Firefox, Safari in Edge, saj vsak nekoliko drugače izbira ikone in velikosti.
2. Svetli in temni način. Preklopite temo OS in brskalnika ter vsakič poglejte vrstico zavihkov.
3. Zasloni retina in standardni zasloni. Preverite na monitorju 1x in zaslonu 2x ali 3x ter povečajte prikaz v brskalniku.
4. Vrstica zaznamkov. Dodajte stran med zaznamke in poglejte, ali je ikona poleg drugih spletnih mest še vedno berljiva.
5. Veliko zavihkov. Odprite 20 zavihkov in preverite, ali najdete svojega na prvi pogled.
6. Predogled Google SERP. Ko je ikona znova preiskana, preverite mobilni rezultat iskanja. Ne pozabite, da posodobitev lahko traja.
7. Domači zaslon. Dodajte spletno mesto na domači zaslon iOS in Androida ter potrdite, da ikona ni odrezana, nima črnih vogalov in ni premajhna znotraj maske.
8. Tehnični pregled. Svojo domeno preverite z preverjevalnikom faviconov MakeFav, da potrdite, da datoteke obstajajo, vračajo status 200, imajo prave velikosti in so pravilno deklarirane v vašem HTML.

Praktičen potek dela

1. Začnite z znakom znamke in ga poenostavite na eno obliko ali črko.
2. Ustvarite kvadratno platno s polnim ali oblikovanim ozadjem, ki deluje v obeh temah.
3. Izvozite velikosti 32x32 in 16x16 ter majhno različico ročno izpopolnite v urejevalniku pikslov.
4. Ustvarite celoten komplet (ICO, PNG, apple-touch-icon, ikone za manifest) z generatorjem.
5. Dodajte oznake link, nastavite glave predpomnjenja, objavite in preverite s preverjevalnikom.

Favicon je eden najmanjših elementov na vašem spletnem mestu in eden najpogosteje videnih. Nekaj premišljenih odločitev o kontrastu, preprostosti in skladnosti poskrbi, da deluje v vsakem zavihku, temi in napravi.

Pogosta vprašanja

Kako velik mora biti favicon?

Oblikujte za 16x16 in 32x32 za zavihke brskalnika (brskalnik na zaslonih z visoko gostoto uporabi 32x32), priskrbite apple-touch-icon 180x180 za iOS ter PNG-ja 192x192 in 512x512 za Android in PWA. Za Googlove rezultate iskanja uporabite kvadratno ikono, katere velikost je večkratnik 48 pikslov, na primer 48x48 ali 96x96. Izvorni SVG se prilagodi vsem tem velikostim.

Ali naj kot favicon uporabim celoten logotip?

Običajno ne. Celotni logotipi z besednim delom so preveč podrobni in preširoki za kvadratno ikono 16x16. Uporabite znak znamke ali monogram ene ali dveh črk in ga poenostavite, da ostane prepoznaven tudi v majhni velikosti.

Kako naredim, da favicon deluje v temnem načinu?

Najvarnejši pristop je, da ikoni daste lastno obliko polnega ozadja ali kontrasten obris, tako da ni odvisna od barve zavihka. Lahko pa uporabite SVG favicon z medijsko poizvedbo prefers-color-scheme za zamenjavo barv in ohranite nadomestne datoteke PNG ali ICO za brskalnike, ki SVG ikon ne podpirajo. Vedno preizkusite v svetli in temni temi.

Zakaj se moj novi favicon ne prikaže?

Brskalniki favicone dolgo predpomnijo, Google pa hrani lastno kopijo, ki jo osvežuje po svojem urniku, kar pogosto traja dneve ali tedne. Osvežite stran s hitrim ponovnim nalaganjem, počistite predpomnilnik brskalnika, uporabite novo ime datoteke z različico ter poskrbite, da oznake link in korenski /favicon.ico kažejo na pravo datoteko. Nastavitev lahko preverite s preverjevalnikom MakeFav.

Ali je dobra zamisel, da na faviconu prikažem značke obvestil?

Da, če jih uporabljate zmerno. Majhna pika ali enomestno ali dvomestno število uporabnikom pomaga opaziti nekaj, kar zahteva dejanje, vendar stalna animacija ali velika števila škodujejo berljivosti in pozornosti. Stanje vedno ponovite v naslovu strani, ob obravnavi elementa obnovite privzeto ikono in se ne zanašajte samo na barvo.