Favicon UX: što čini sjajan favicon

Sjajan favicon je jednostavan, kontrastan znak, obično vaš logotip-simbol ili jedno ili dva slova, koji ostaje čitljiv na 16x16 piksela i na svijetlim i na tamnim karticama preglednika, odgovara vašem brendu i rijetko se mijenja. Sve ostalo u ovom vodiču (poravnanje piksela, boja, razmak, prozirnost, veličina datoteke) služi tim ciljevima: da vašu stranicu odmah pronađete među desecima otvorenih kartica.

Favicon je sićušan, ali se pojavljuje na mnogim mjestima: u karticama preglednika, trakama oznaka, popisima povijesti, izborniku za pretraživanje kartica, Googleovim rezultatima pretraživanja na mobitelu i računalu te na početnim zaslonima telefona. Korisnicima s mnogo otvorenih kartica naslov je često skraćen do nestanka pa je ikona jedini preostali putokaz. Zato je ona pravi element navigacije, a ne ukras.

1. Čitljivost na 16x16

Klasična veličina favicona je 16x16 CSS piksela. Na standardnom zaslonu to je doslovno 256 piksela; na retina zaslonu s 2x gustoćom preglednik za isti prostor obično odabire sliku od 32x32. Što god dizajnirate, mora izdržati to smanjenje.

Neka bude jednostavno

• Jedan oblik ili jedno do dva slova. Dobro funkcionira jedno podebljano slovo, krug sa simbolom ili jednostavan geometrijski znak. Tri slova ili riječ pretvorit će se u šum.
• Jedna žarišna točka. Ako ikonu ne možete opisati u pet riječi, preslojevita je.
• Bez prijelaza boja, sjena ili finih tekstura. Na malim veličinama pretvaraju se u mutne mrlje.

Poravnajte s mrežom piksela

Na 16x16 linija koja je pola piksela izvan mreže zaglađuje se kroz dva reda piksela i izgleda sivo i meko. Postavite rubove na cjelobrojne granice piksela i koristite parne širine tamo gdje je oblik simetričan. Ako izvozite iz vektorskog alata, uključite hvatanje na piksele ili provjerite smanjeni rezultat i ručno ga ispravite.

Izbjegavajte tanke linije

Crte tanje od 2 piksela na 16x16 (oko 12 posto širine ikone) obično nestanu ili trepere između veličina. Zadebljajte crte, uklonite unutarnje detalje i spojite sitne razmake. Podebljan, malo teži znak obično se čita bolje od vjerne minijature detaljnog logotipa.

Ručno doradite piksele

ICO i PNG datoteke nemaju hinting kao fontovi, pa je ručno uređivanje piksela njegov ekvivalent: prilagođavate pojedinačne piksele kako bi krivulje, dijagonale i unutarnji prostori (rupe u slovima poput „a“ ili „e“) ostali oštri. Automatsko smanjivanje dobra je prva skica, ali nekoliko ručno postavljenih piksela često čini razliku između mrlje i prepoznatljivog slova. MakeFav uređivač piksela napravljen je upravo za to: otvorite platno 16x16, ispravite problematične piksele i izvezite.

2. Kontrast na svijetlim i tamnim karticama

Preglednici se danas često koriste u tamnom načinu rada, a mnogi korisnici imaju traku kartica koja se razlikuje od teme stranice. Tamnoplava ikona s prozirnom pozadinom može biti savršena na bijeloj kartici, a gotovo nevidljiva na tamnosivoj. Uvijek testirajte oba slučaja.

Praktična rješenja

• Dodajte pozadinski oblik. Puni zaobljeni kvadrat ili krug u boji brenda jamči da znak ima vlastiti kontrast, neovisno o kartici.
• Koristite tanki obrub ili oreol. Svjetliji rub od 1 px oko tamnog znaka (ili obrnuto) zadržava vidljivost siluete na objema temama, ali na 16x16 mora ostati oštar, pa ga testirajte.
• Odaberite boje brenda srednjeg tona. Boje poput jake plave, narančaste, zelene ili magente obično funkcioniraju i na bijelim i na gotovo crnim podlogama. Rizične su vrlo svijetlo žuta ili vrlo tamnoplava.
• Koristite prilagodljivi SVG favicon. SVG može sadržavati media query prefers-color-scheme pa se ikona mijenja sa sistemskom temom.

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

Imajte na umu da media query odražava temu operacijskog sustava ili preglednika, što traka kartica obično slijedi, ali ne uvijek. Podrška za SVG favicone također varira: Chrome i Firefox ih podržavaju, dok je Safari povijesno kasnio, zato uvijek zadržite PNG ili ICO rezervne verzije. Dizajn s punom pozadinom najpouzdanija je opcija jer ne treba nikakvu logiku za teme.

3. Prepoznatljivost i dosljednost brenda

Koristite logotip-simbol (simbol ili monogram), a ne cijeli logotip s natpisom. Tekst unutar ikone 16x16 nije čitljiv, a široki horizontalni logotip stisnut u kvadrat ostavlja samo sićušnu traku u sredini.

• Ako vaš brend ima simbol, pojednostavite ga za male veličine umjesto da ga samo smanjite. „Favicon verzija“ s manje detalja uobičajena je praksa.
• Ako je vaš brend samo natpis, uzmite prvo slovo ili karakterističan par slova i postavite ga u fontu svog brenda u debelom rezu.
• Boje neka budu usklađene s logotipom, ikonom aplikacije i avatarima na društvenim mrežama kako bi korisnik posvuda prepoznao isti brend.

Osebujnost je važna koliko i vjernost. Pogledajte niz kartica: ako i tri druge stranice koriste plavi krug, vaša se neće isticati. Drukčiji oblik ili boja korisniji su od savršeno vjernog smanjenja.

4. Boja: ograničena, zasićena paleta

Uz tako malo piksela svaka dodatna boja stvara nered. Ciljajte na jednu ili dvije boje plus, najviše, bijelu ili crnu. Zasićene boje bolje se uočavaju na malim veličinama od pastelnih, koje se često stope s pozadinom kartice.

Posudite malo iz razmišljanja o pristupačnosti. WCAG traži kontrast od najmanje 3:1 za smislene grafičke objekte (kriterij uspjeha 1.4.11, Kontrast netekstualnih elemenata). Favicon formalno nije obuhvaćen jer je dio preglednika, a ne sadržaj stranice, no 3:1 između znaka i njegove pozadine te između ikone i kartice dobar je cilj. Također izbjegavajte prenošenje informacija samo bojom: crvene i zelene varijante iste ikone neraspoznatljive su mnogim daltonistima, pa mijenjajte oblik ili dodajte simbol.

5. Oblik, razmak i sigurne zone

Ispunite kvadrat

Kartice preglednika prikazuju favicon u fiksnoj maloj veličini, pa dodatna margina samo smanjuje vaš znak. Za standardne ikone kartica koristite većinu platna, sa samo jednim ili dva piksela prostora oko znaka, kako bi znak bio što veći.

Zaobljeno ili kvadratno?

Preglednici općenito ne obrezuju favicone kartica, pa je oblik koji nacrtate oblik koji korisnici vide. Kvadrat s blago zaobljenim kutovima izgleda uredno i daje ujednačenu pozadinu; slobodni znak ili krug na prozirnoj podlozi može djelovati lakše i osebujnije. Oboje je u redu. Odaberite jedno i držite cijeli skup ikona dosljednim.

Apple touch ikone

iOS apple-touch-icon sam zaobljuje (180x180 uobičajena je veličina). Isporučite kvadrat koji ide do rubova, bez unaprijed zaobljenih kutova, inače u kutovima možete dobiti vidljive tamne ili bijele crtice.

Maskable ikone za Android i PWA

Operacijski sustav obrezuje maskable ikone u krugove, „squircle“ ili druge oblike. Sav važan sadržaj držite unutar sigurne zone: kruga u središtu ikone s polumjerom od 40 posto širine ikone. Proširite boju pozadine do samih rubova kako bi svaka maska izgledala ispravno. Ne koristite usko, rub-do-ruba favicon kartice kao maskable ikonu jer će je maska odrezati.

6. Prozirnost

Prozirnost je u redu za favicone kartica i zahvaljujući njoj ikona samo sa znakom čisto stoji na bilo kojoj boji kartice. Problem je kod Apple touch ikona: iOS prozirna područja ispunjava jednobojnom bojom (obično crnom), što može uništiti dizajn. Apple-touch-icon uvijek dajte s neprozirnom pozadinom u boji brenda. Isto vrijedi za maskable ikone i većinu slučajeva upotrebe na početnom zaslonu Androida, gdje neprozirna pozadina daje predvidljive rezultate.

7. Stabilnost: ne mijenjajte ga prečesto

Favicon gradi prepoznatljivost ponavljanjem. Njegovo često mijenjanje tjera korisnike da iznova uče koja je kartica vaša, a stvara i tehničke glavobolje. Preglednici agresivno predmemoriraju favicone, a Google ih dohvaća i pohranjuje odvojeno od vaših stranica, pa nova ikona može trebati dane ili tjedne da se pojavi u rezultatima pretraživanja. Google također traži stabilan URL favicona, ikonu čija je veličina višekratnik od 48 piksela (48x48, 96x96 i tako dalje) te datoteku koju može indeksirati (koju ne blokira robots.txt). Promjenu favicona tretirajte kao odluku razine redizajna brenda, a ne kao sezonski ukras.

8. Stanja obavijesti i dinamični faviconi

Neke web aplikacije mijenjaju favicon kako bi označile nepročitane poruke, status snimanja ili pogrešku. Ako je dobro izvedeno, korisno je; ako se pretjera, iritantno je.

• Koristite malu značku (točku ili kratak broj) u kutu, a ne potpuni redizajn. Osnovna ikona treba ostati prepoznatljiva.
• Budite štedljivi. Značke ostavite za događaje koji zahtijevaju radnju korisnika. Ne animirajte ikonu neprekidno.
• Ograničite brojeve. Na 16x16 čitljive su samo jedna ili dvije znamenke; prikažite „9+“ ili običnu točku umjesto „137“.
• Odmah vratite stanje kad korisnik riješi stavku i vratite zadanu ikonu.
• Ne oslanjajte se samo na boju. Crvenu točku treba poduprijeti i naslovom stranice, na primjer „(3) Inbox“, kako bi informacija bila dostupna svima.

Dinamični faviconi obično se crtaju na canvasu i zamjenjuju ažuriranjem atributa href elementa link za ikonu. Ograničite učestalost ažuriranja jer stalno mijenjanje favicona može opteretiti procesor i odvlačiti pažnju korisnika.

9. Performanse

Faviconi su mali, ali su ipak zahtjevi koji se mogu loše izvesti.

• Datoteke neka budu male. PNG favicon obično je od nekoliko stotina bajtova do nekoliko kilobajta. Jednostavan SVG može biti manji od 1 KB.
• Izbjegavajte napuhane ICO datoteke. Viševeličinski ICO sa slikama od 16, 32 i 48 piksela dovoljan je. Ugradnja slike 256x256 višestruko povećava veličinu datoteke bez vidljive koristi u karticama preglednika.
• Postavite zaglavlja za predmemoriranje. Ikone poslužujte s dugim trajanjem Cache-Control, na primjer public, max-age=31536000, immutable, a kad ih mijenjate, koristite naziv datoteke s verzijom ili hashom.
• Izričito deklarirajte ikone. Preglednici prema zadanim postavkama traže /favicon.ico, pa ga osigurajte čak i ako deklarirate druge ikone, kako biste izbjegli 404 šum u zapisnicima.
• Komprimirajte. Provucite PNG-ove kroz optimizator bez gubitaka i minificirajte SVG-ove.

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

Ako sve te datoteke želite generirati iz jedne izvorne slike, MakeFav generator favicona izrađuje standardni skup, a stranica za programere opisuje mogućnosti integracije.

10. Pristupačnost

Favicon nema alternativni tekst i čitači zaslona ga ne najavljuju, pa tradicionalni alati za pristupačnost poput atributa alt ne vrijede. Ono što je bitno:

• Naslov stranice nosi značenje. Pišite jedinstvene, opisne elemente <title>. Nikad se ne oslanjajte na ikonu za prenošenje stanja; svaku značku odrazite i u naslovu.
• Vidljivost za slabovidne korisnike. Visok kontrast, podebljan oblik i velik znak pomažu korisnicima koji vizualno pregledavaju kartice.
• Neovisnost o boji. Pobrinite se da stanja razlikuju oblici ili slova, a ne samo nijansa.
• Manje ometanja. Izbjegavajte treperave ili animirane favicone, koji mogu smetati korisnicima osjetljivima na pokret.

Popis za provjeru Favicon UX-a

Popis za testiranje

Ne vjerujte velikom pregledu u alatu za dizajn. Testirajte stvarnu ikonu u stvarnim uvjetima:

1. Više preglednika. Provjerite Chrome, Firefox, Safari i Edge jer svaki malo drukčije bira ikone i veličine.
2. Svijetli i tamni način rada. Promijenite temu OS-a i preglednika i svaki put pogledajte traku kartica.
3. Retina i standardni zasloni. Provjerite na monitoru 1x i zaslonu 2x ili 3x te zumirajte u pregledniku.
4. Traka oznaka. Spremite stranicu u oznake i pogledajte je li ikona još čitljiva pokraj ostalih stranica.
5. Mnogo kartica. Otvorite 20 kartica i provjerite možete li svoju pronaći na prvi pogled.
6. Pregled u Googleovim rezultatima (SERP). Provjerite mobilni rezultat pretraživanja nakon što je ikona ponovno indeksirana. Zapamtite da ažuriranje može potrajati.
7. Početni zaslon. Dodajte stranicu na početni zaslon iOS-a i Androida i potvrdite da ikona nije odrezana, nema crne kutove i nije premala unutar svoje maske.
8. Tehnička provjera. Provucite svoju domenu kroz MakeFav provjeru favicona kako biste potvrdili da datoteke postoje, vraćaju status 200, imaju prave veličine i ispravno su deklarirane u vašem HTML-u.

Praktičan tijek rada

1. Krenite od svog logotipa-simbola i pojednostavite ga na jedan oblik ili slovo.
2. Napravite kvadratno platno s punom ili oblikovanom pozadinom koja funkcionira u objema temama.
3. Izvezite veličine 32x32 i 16x16 te ručno doradite malu verziju u uređivaču piksela.
4. Generirajte cijeli skup (ICO, PNG, apple-touch-icon, ikone manifesta) pomoću generatora.
5. Dodajte link oznake, postavite zaglavlja predmemorije, objavite i provjerite pomoću provjere.

Favicon je jedan od najmanjih elemenata na vašoj stranici, a jedan od onih koji se najčešće vide. Nekoliko pažljivih odluka o kontrastu, jednostavnosti i dosljednosti čini da funkcionira na svakoj kartici, temi i uređaju.

Često postavljana pitanja

Koje veličine treba biti favicon?

Dizajnirajte za 16x16 i 32x32 za kartice preglednika (preglednik na zaslonima visoke gustoće koristi 32x32), osigurajte apple-touch-icon od 180x180 za iOS te PNG-ove 192x192 i 512x512 za Android i PWA. Za Googleove rezultate pretraživanja koristite kvadratnu ikonu čija je veličina višekratnik od 48 piksela, poput 48x48 ili 96x96. SVG izvor skalira se na sve njih.

Trebam li kao favicon koristiti cijeli logotip?

Obično ne. Cijeli logotipi s natpisom preopširni su i preširoki za kvadratnu ikonu 16x16. Koristite logotip-simbol ili monogram od jednog ili dva slova i pojednostavite ga kako bi ostao prepoznatljiv i kad je sićušan.

Kako postići da favicon radi u tamnom načinu rada?

Najsigurniji pristup je dati ikoni vlastiti oblik pune pozadine ili kontrastni obrub kako ne bi ovisila o boji kartice. Alternativno, koristite SVG favicon s media queryjem prefers-color-scheme za zamjenu boja i zadržite PNG ili ICO rezervne verzije za preglednike koji ne podržavaju SVG ikone. Uvijek testirajte u svijetloj i tamnoj temi.

Zašto se moj novi favicon ne prikazuje?

Preglednici dugo predmemoriraju favicone, a Google pohranjuje vlastitu kopiju koju osvježava prema vlastitom rasporedu, što često traje dane ili tjedne. Napravite tvrdo osvježavanje stranice, očistite predmemoriju preglednika, koristite novi naziv datoteke s verzijom i pobrinite se da link oznake i korijenski /favicon.ico pokazuju na pravu datoteku. Postavke možete provjeriti pomoću MakeFav provjere.

Je li dobra ideja prikazivati značke obavijesti na faviconu?

Da, ako se koriste štedljivo. Mala točka ili broj od jedne ili dvije znamenke pomaže korisnicima da uoče nešto što traži radnju, ali stalna animacija ili veliki brojevi narušavaju čitljivost i pažnju. Stanje uvijek odrazite i u naslovu stranice, vratite zadanu ikonu kad je stavka riješena i ne oslanjajte se samo na boju.