Favicon UX: mis teeb faviconi suurepäraseks

Suurepärane favicon on lihtne ja kõrge kontrastsusega märk, tavaliselt sinu logomärk või üks-kaks tähte, mis jääb 16x16 pikslis loetavaks nii heledatel kui tumedatel brauseri vahekaartidel, sobib sinu brändiga ja muutub harva. Kõik muu selles juhendis (pikslitele joondamine, värv, polsterdus, läbipaistvus, failisuurus) teenib neid eesmärke: muuta su sait kümnete avatud vahekaartide seas kohe leitavaks.

Favicon on pisike, kuid ilmub paljudes kohtades: brauseri vahekaartidel, järjehoidjariba, ajaloo nimekirjades, vahekaartide otsingumenüüs, Google'i otsingutulemustes mobiilis ja arvutis ning telefonide avaekraanidel. Kui kasutajal on palju vahekaarte lahti, on pealkiri sageli kärbitud olematuks ja ikoon on ainus järelejäänud vihje. See teeb sellest päris navigeerimiselemendi, mitte dekoratsiooni.

1. Loetavus 16x16 suuruses

Klassikaline favicon on 16x16 CSS-pikslit. Tavalisel ekraanil on see sõna-sõnalt 256 pikslit; 2x retina-ekraanil valib brauser samale pinnale tavaliselt 32x32 pildi. Mida iganes sa kujundad, peab see sellise vähendamise üle elama.

Hoia see lihtne

• Üks kujund või üks kuni kaks tähte. Sobib üks jässakas täht, ring sümboliga või lihtne geomeetriline märk. Kolm tähte või sõna muutub müraks.
• Üks fookuspunkt. Kui sa ei suuda ikooni viie sõnaga kirjeldada, on see liiga keeruline.
• Ei mingeid gradiente, varje ega peeneid tekstuure. Väikeses suuruses muutuvad need hägusteks plekkideks.

Joonda pikslivõrgule

16x16 puhul silutakse pool pikslit võrgust eemal olev joon kahele pikslireale ning see näeb hall ja pehme välja. Aseta servad täispiksli piiridele ja kasuta sümmeetrilistel kujunditel paarisarvulisi laiusi. Kui ekspordid vektortööriistast, lülita sisse pikslitele klõpsamine (pixel snapping) või kontrolli vähendatud tulemust ja paranda see käsitsi.

Väldi õhukesi jooni

Alla 2 piksli paksused jooned 16x16 puhul (umbes 12 protsenti ikooni laiusest) kipuvad kaduma või suuruste vahel vilkuma. Paksenda jooni, eemalda sisemised detailid ja ühenda väikesed vahed. Julge, veidi raske glüüf loetakse tavaliselt paremini kui detailse logo truu miniatuur.

Viimistle käsitsi

ICO- ja PNG-failidel pole fondi-stiilis vihjestust (hinting), seega on selle vasteks käsitsi pikslite redigeerimine: kohandad üksikuid piksleid nii, et kõverad, diagonaalid ja sisemised augud (näiteks tähtedes „a“ või „e“) püsiksid teravad. Automaatne vähendamine on hea esimene mustand, kuid mõni käsitsi paigutatud piksel teeb sageli vahe plekkide ja äratuntava tähe vahel. MakeFavi pikslieditor on selleks loodud: ava 16x16 lõuend, paranda probleemsed pikslid ja ekspordi.

2. Kontrastsus heledatel ja tumedatel vahekaartidel

Brauserid töötavad nüüd sageli tumedas režiimis ning paljudel kasutajatel erineb vahekaardiriba lehe teemast. Tume mereväe-sinine ikoon läbipaistva taustaga võib valgel vahekaardil olla ideaalne ja tumehallil peaaegu nähtamatu. Testi alati mõlemat.

Praktilised lahendused

• Lisa taustakujund. Kindlavärviline ümardatud ruut või ring brändivärvis tagab märgile oma kontrasti sõltumata vahekaardist.
• Kasuta õhukest piirjoont või halo-efekti. 1 px heledam serv tumeda glüüfi ümber (või vastupidi) hoiab siluetti mõlemas teemas nähtavana, kuid 16x16 puhul peab see jääma terav, seega testi seda.
• Vali keskmise tooniga brändivärvid. Värvid nagu tugev sinine, oranž, roheline või magenta sobivad tavaliselt nii valgele kui peaaegu mustale taustale. Riskantsed on väga hele kollane või väga tume mereväe-sinine.
• Kasuta kohanduvat SVG-faviconi. SVG võib sisaldada prefers-color-scheme meediapäringut, nii et ikoon muutub süsteemi teemaga kaasa.

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

Pane tähele, et meediapäring peegeldab operatsioonisüsteemi või brauseri teemat, mida vahekaardiriba tavaliselt järgib, kuid mitte alati. SVG-faviconide tugi on samuti erinev: Chrome ja Firefox saavad nendega hakkama, Safari on ajalooliselt maha jäänud, seega hoia alati PNG- või ICO-varuvariandid. Kindla taustaga lahendus on kõige töökindlam, sest see ei vaja üldse teemaloogikat.

3. Äratuntavus ja brändi järjepidevus

Kasuta logomärki (sümbolit või monogrammi), mitte kogu logo koos sõnamärgiga. Tekst 16x16 ikooni sees on loetamatu ja lai horisontaalne logo ruuduks kokku surutuna jätab sulle keskele pisikese riba.

• Kui su brändil on sümbol, lihtsusta seda väikeste suuruste jaoks, mitte ainult ei vähenda seda. „Favicon'i versioon“ vähemate detailidega on tavapärane praktika.
• Kui su bränd on ainult sõnamärk, võta esimene täht või eristuv tähepaar ja kujunda see oma brändi kirjatüübis paksus kirjas.
• Hoia värvid kooskõlas oma logo, rakenduse ikooni ja sotsiaalmeedia avatariga, et kasutaja tunneks sama brändi igal pool ära.

Eristuvus on sama oluline kui truudus. Vaata vahekaartide rida: kui kolm teist saiti kasutavad samuti sinist ringi, siis sinu oma ei paista silma. Teistsugune kuju või värv on kasulikum kui täiuslikult truu vähendus.

4. Värv: piiratud, küllastunud palett

Nii väheste pikslite juures lisab iga täiendav värv segadust. Püüa kasutada ühte või kahte värvi pluss maksimaalselt valget või musta. Küllastunud värvid kandavad väikeses suuruses paremini kui pastelsed, mis kipuvad vahekaardi taustaga sulanduma.

Laena veidi ligipääsetavuse mõtteviisist. WCAG nõuab tähenduslikele graafilistele objektidele vähemalt 3:1 kontrasti (edukriteerium 1.4.11, mittetekstiline kontrast). Favicon ei kuulu ametlikult selle alla, kuna see on brauseri liidese osa, mitte lehe sisu, kuid 3:1 glüüfi ja selle tausta vahel ning ikooni ja vahekaardi vahel on mõistlik siht. Väldi ka mis tahes info edastamist ainult värvitooniga: sama ikooni punane ja roheline variant on paljudele värvipimedatele eristamatud, seega muuda kuju või lisa sümbol.

5. Kuju, polsterdus ja turvaalad

Täida ruut

Brauseri vahekaardid kuvavad faviconi fikseeritud väikeses suuruses, seega teeb lisaveeris sinu märgi lihtsalt väiksemaks. Tavaliste vahekaardiikoonide puhul kasuta enamikku lõuendist, jättes vaid piksli või kaks hingamisruumi, et märk oleks nii suur kui võimalik.

Ümar või nurgeline?

Brauserid üldiselt vahekaardi faviconeid ei kärbi, seega on kuju, mille sa joonistad, see, mida kasutajad näevad. Veidi ümardatud nurkadega ruut näeb korrastatud välja ja annab ühtlase tausta; vabakujuline glüüf või ring läbipaistval taustal võib tunduda kergem ja eristuvam. Mõlemad sobivad. Vali üks ja hoia kogu ikoonikomplekt ühtlane.

Apple touch ikoonid

iOS lisab apple-touch-icon'ile oma ümarad nurgad (tavaline suurus on 180x180). Anna täisserva ruut ilma eelnevalt ümardatud nurkadeta, vastasel juhul võivad nurkadesse tekkida nähtavad tumedad või valged ribad.

Maskeeritavad ikoonid Androidile ja PWA-dele

Maskeeritavaid ikoone kärbib operatsioonisüsteem ringideks, ümarruutudeks (squircle) või muudeks kujunditeks. Hoia kogu oluline sisu turvaalas: ikooni keskel olev ring raadiusega 40 protsenti ikooni laiusest. Laienda taustavärv täielikult servadeni, et iga mask näeks õige välja. Ära kasuta tihedat, servast servani vahekaardi faviconi maskeeritava ikoonina, sest mask kärbib selle.

6. Läbipaistvus

Läbipaistvus sobib vahekaardi faviconidele ja just see lubab ainult glüüfist ikoonil istuda puhtalt igal vahekaardi värvil. Apple touch ikoonide puhul on see probleem: iOS täidab läbipaistvad alad ühtlase värviga (tavaliselt mustaga), mis võib kujunduse rikkuda. Anna apple-touch-icon'ile alati läbipaistmatu taust oma brändivärvis. Sama kehtib maskeeritavate ikoonide ja enamiku Androidi avaekraani kasutusjuhtude kohta, kus läbipaistmatu taust annab etteaimatavaid tulemusi.

7. Stabiilsus: ära muuda seda liiga tihti

Favicon loob äratuntavust kordumise kaudu. Sage muutmine sunnib kasutajaid uuesti õppima, milline vahekaart on sinu oma, ning põhjustab ka tehnilisi pähkleid. Brauserid salvestavad faviconeid agressiivselt vahemällu ja Google hangib ning salvestab neid lehtedest eraldi, seega võib uue ikooni ilmumine otsingutulemustes võtta päevi või nädalaid. Google soovib ka stabiilset favicon'i URL-i, ikooni, mille suurus on 48 piksli kordne (48x48, 96x96 jne) ja faili, mida ta saab indekseerida (mis pole robots.txt-iga blokeeritud). Käsitle favicon'i muutmist rebrändingu tasemel otsusena, mitte hooajalise kaunistusena.

8. Teavitusolekud ja dünaamilised faviconid

Mõned veebirakendused muudavad faviconi, et näidata lugemata sõnumeid, salvestuse olekut või viga. Hästi tehtuna on see kasulik; liiale mindud on see tüütu.

• Kasuta väikest märki (täpp või lühike arv) nurgas, mitte täielikku ümberkujundust. Põhiikoon peab jääma äratuntavaks.
• Hoia see napp. Jäta märgid sündmustele, mis nõuavad kasutaja tegevust. Ära animeeri ikooni pidevalt.
• Piira numbreid. 16x16 puhul on loetav vaid üks või kaks numbrit; näita „9+“ või lihtsalt täppi, mitte „137“.
• Lähtesta kiiresti, kui kasutaja on asjaga tegelenud, ja taasta vaikeikoon.
• Ära toetu ainult värvile. Punast täppi peaks toetama ka lehe pealkiri, näiteks „(3) Postkast“, et info oleks kõigile kättesaadav.

Dünaamilised faviconid joonistatakse tavaliselt lõuendile ja vahetatakse sisse, uuendades ikoonilingi elemendi href-i. Piira uuenduste sagedust, sest pidev faviconi muutmine võib koormata protsessorit ja häirida kasutajaid.

9. Jõudlus

Faviconid on väikesed, kuid need on siiski päringud, mida saab teha halvasti.

• Hoia failid väikesed. PNG-favicon on tavaliselt paarsada baiti kuni paar kilobaiti. Lihtne SVG võib olla alla 1 KB.
• Väldi paisunud ICO-faile. Mitme suurusega ICO 16, 32 ja 48 pikslise pildiga on piisav. 256x256 pildi lisamine korrutab failisuurust, andmata brauseri vahekaartides nähtavat kasu.
• Sea vahemälu päised. Serveeri ikoone pika Cache-Control elueaga, näiteks public, max-age=31536000, immutable, ning kasuta versioonitud või räsitud failinime, kui neid muudad.
• Deklareeri ikoonid selgesõnaliselt. Brauserid küsivad vaikimisi /favicon.ico, seega paku see isegi siis, kui deklareerid muid ikoone, et vältida 404-müra oma logides.
• Tihenda. Käivita PNG-d kadudeta optimeerijast ja minimeeri SVG-d.

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

Kui soovid kõik need failid ühest lähtepildist genereerida, loob MakeFavi favicon'i generaator standardkomplekti ning arendajate leht käsitleb integreerimisvõimalusi.

10. Ligipääsetavus

Faviconil pole alt-teksti ja ekraanilugejad seda ei teata, seega traditsioonilised ligipääsetavuse tööriistad nagu alt-atribuudid ei kehti. Mis on oluline:

• Tähenduse kannab lehe pealkiri. Kirjuta unikaalsed, kirjeldavad <title> elemendid. Ära kunagi toetu ikoonile oleku edastamisel; peegelda iga märk pealkirjas.
• Nähtavus vaegnägijatele. Kõrge kontrastsus, julge kuju ja suur märk aitavad kasutajatel, kes skaneerivad vahekaarte visuaalselt.
• Värvist sõltumatus. Veendu, et olekuid eristavad kujud või tähed, mitte ainult värvitoon.
• Vähem häirimist. Väldi vilkuvaid või animeeritud faviconeid, mis võivad olla probleemiks liikumise suhtes tundlikele kasutajatele.

Favicon UX kontrollnimekiri

Testimise kontrollnimekiri

Ära looda oma kujundustööriista suurele eelvaatele. Testi päris ikooni päris tingimustes:

1. Mitu brauserit. Kontrolli Chrome'i, Firefoxi, Safarit ja Edge'i, kuna igaüks valib ikoone ja suurusi veidi erinevalt.
2. Hele ja tume režiim. Vaheta operatsioonisüsteemi ja brauseri teemat ning vaata iga kord vahekaardiriba.
3. Retina ja tavalised ekraanid. Kontrolli 1x monitoril ja 2x või 3x ekraanil ning suumi brauseris.
4. Järjehoidjariba. Lisa leht järjehoidjatesse ja vaata, kas ikoon on teiste saitide kõrval endiselt loetav.
5. Palju vahekaarte. Ava 20 vahekaarti ja vaata, kas leiad enda oma pilguheitega üles.
6. Google'i otsingutulemuste eelvaade. Kontrolli mobiilset otsingutulemust pärast ikooni uuesti indekseerimist. Pea meeles, et uuendamine võib aega võtta.
7. Avaekraan. Lisa sait iOS-i ja Androidi avaekraanile ning veendu, et ikooni ei kärbita, sellel pole musti nurki ja see pole oma maski sees liiga väike.
8. Tehniline kontroll. Käivita oma domeen läbi MakeFavi favicon'i kontrolli, et veenduda, et failid eksisteerivad, tagastavad 200 olekukoodi, on õiges suuruses ja deklareeritud su HTML-is õigesti.

Praktiline töövoog

1. Alusta oma logomärgist ja lihtsusta see üheks kujundiks või täheks.
2. Loo ruudukujuline lõuend kindla või kujundatud taustaga, mis töötab mõlemas teemas.
3. Ekspordi 32x32 ja 16x16 suurused ning viimistle väike versioon käsitsi pikslieditoris.
4. Genereeri täielik komplekt (ICO, PNG, apple-touch-icon, manifesti ikoonid) generaatoriga.
5. Lisa link-sildid, sea vahemälu päised, avalda ja kontrolli kontrolliga.

Favicon on üks väiksemaid ressursse sinu saidil ja üks kõige sagedamini nähtavaid. Mõned hoolikad otsused kontrastsuse, lihtsuse ja järjepidevuse kohta panevad selle toimima igal vahekaardil, teemal ja seadmel.

Korduma kippuvad küsimused

Mis suurusega peaks favicon olema?

Kujunda 16x16 ja 32x32 brauseri vahekaartide jaoks (brauser kasutab kõrge tihedusega ekraanidel 32x32), paku 180x180 apple-touch-icon iOS-ile ning 192x192 ja 512x512 PNG-d Androidile ja PWA-dele. Google'i otsingutulemuste jaoks kasuta ruudukujulist ikooni, mille suurus on 48 piksli kordne, näiteks 48x48 või 96x96. SVG-lähtefail skaleerub kõigi nendeni.

Kas peaksin faviconina kasutama kogu logo?

Tavaliselt mitte. Sõnamärgiga täislogod on liiga detailsed ja liiga laiad ruudukujulise 16x16 ikooni jaoks. Kasuta logomärki või ühe-kahe tähe monogrammi ning lihtsusta seda nii, et see jääb pisikesena äratuntavaks.

Kuidas panna favicon tumedas režiimis töötama?

Kõige ohutum viis on anda ikoonile oma kindel taustakujund või kontrastne piirjoon, et see ei sõltuks vahekaardi värvist. Alternatiivina kasuta SVG-faviconi koos prefers-color-scheme meediapäringuga värvide vahetamiseks ning hoia PNG- või ICO-varuvariandid brauseritele, mis SVG-ikoone ei toeta. Testi alati nii heledas kui tumedas teemas.

Miks mu uus favicon ei ilmu?

Brauserid salvestavad faviconeid pikaks ajaks vahemällu ja Google hoiab oma koopiat, mida ta uuendab oma ajakava järgi, sageli kulub selleks päevi või nädalaid. Värskenda lehte jõuga (hard refresh), tühjenda brauseri vahemälu, kasuta uut versioonitud failinime ning veendu, et link-sildid ja juurkataloogi /favicon.ico viitavad õigele failile. Seadistust saad kontrollida MakeFavi kontrolliga.

Kas on hea mõte näidata faviconil teavitusmärke?

Jah, kui kasutada napilt. Väike täpp või ühe- kuni kahekohaline arv aitab kasutajal märgata midagi, mis vajab tegevust, kuid pidev animatsioon või suured numbrid kahjustavad loetavust ja tähelepanu. Peegelda olek alati lehe pealkirjas, taasta vaikeikoon, kui asi on käsitletud, ning ära toetu ainult värvile.