Favicon UX: kas daro puikią favicon piktogramą

Puiki favicon piktograma yra paprastas, kontrastingas ženklas, dažniausiai jūsų logotipo ženklas arba viena ar dvi raidės, kuris išlieka įskaitomas 16x16 pikselių dydžiu tiek šviesiose, tiek tamsiose naršyklės kortelėse, atitinka jūsų prekės ženklą ir retai keičiamas. Viskas, kas aptariama šiame vadove (lygiavimas pagal pikselius, spalvos, tarpai, skaidrumas, failo dydis), tarnauja šiems tikslams: kad jūsų svetainę akimirksniu pavyktų rasti tarp dešimčių atidarytų kortelių.

Favicon yra mažytė, tačiau matoma daugelyje vietų: naršyklės kortelėse, žymių juostose, istorijos sąrašuose, kortelių paieškos meniu, „Google“ paieškos rezultatuose mobiliuosiuose įrenginiuose ir kompiuteriuose bei telefonų pradžios ekranuose. Kai vartotojas turi atidaręs daug kortelių, pavadinimas dažnai sutrumpinamas iki nieko, ir piktograma lieka vieninteliu orientyru. Todėl tai tikras navigacijos elementas, o ne dekoracija.

1. Įskaitomumas 16x16 dydžiu

Klasikinis favicon dydis yra 16x16 CSS pikselių. Standartiniame ekrane tai tiesiogine prasme 256 pikseliai; 2x raiškos (Retina) ekrane naršyklė tai pačiai vietai dažniausiai pasirenka 32x32 vaizdą. Kad ir ką sukurtumėte, dizainas turi atlaikyti tokį sumažinimą.

Venkite sudėtingumo

• Viena forma arba viena ar dvi raidės. Tinka viena stora raidė, apskritimas su simboliu ar paprastas geometrinis ženklas. Trys raidės ar žodis virs triukšmu.
• Vienas akcentas. Jei piktogramos negalite apibūdinti penkiais žodžiais, ji per sudėtinga.
• Jokių gradientų, šešėlių ar smulkių tekstūrų. Mažuose dydžiuose jie virsta neryškiomis dėmėmis.

Lygiuokite pagal pikselių tinklelį

16x16 dydžio piktogramoje linija, pasislinkusi pusę pikselio nuo tinklelio, glotninama per dvi pikselių eilutes ir atrodo pilka bei neryški. Kraštus dėkite ant sveikų pikselių ribų ir simetriškoms formoms naudokite lyginį plotį. Jei eksportuojate iš vektorinės programos, įjunkite prisegimą prie pikselių arba patikrinkite sumažintą rezultatą ir pataisykite ranka.

Venkite plonų linijų

Brūkšniai, plonesni nei 2 pikseliai 16x16 dydžiu (apie 12 procentų piktogramos pločio), linkę išnykti arba mirgėti keičiantis dydžiui. Sustorinkite brūkšnius, pašalinkite vidines detales ir sujunkite mažus tarpus. Stora, šiek tiek sunki glifo forma dažniausiai skaitosi geriau nei detalaus logotipo miniatiūra.

Pataisykite ranka

ICO ir PNG failuose nėra šriftų hintingo, todėl rankinis pikselių redagavimas yra jo atitikmuo: koreguojate atskirus pikselius, kad kreivės, įstrižainės ir vidinės ertmės (skylutės raidėse, pavyzdžiui, „a“ ar „e“) išliktų ryškios. Automatinis sumažinimas yra geras pirmas juodraštis, tačiau keli ranka sudėlioti pikseliai dažnai nulemia skirtumą tarp dėmės ir atpažįstamos raidės. MakeFav pikselių redaktorius sukurtas būtent tam: atidarykite 16x16 drobę, pataisykite problemiškus pikselius ir eksportuokite.

2. Kontrastas šviesiose ir tamsiose kortelėse

Naršyklės dabar dažnai veikia tamsiuoju režimu, o daugelio vartotojų kortelių juosta skiriasi nuo puslapio temos. Tamsiai mėlyna piktograma su skaidriu fonu gali puikiai atrodyti baltoje kortelėje ir būti vos matoma tamsiai pilkoje. Visada išbandykite abi.

Praktiniai sprendimai

• Pridėkite fono formą. Vientisas suapvalintas kvadratas ar apskritimas prekės ženklo spalva užtikrina, kad ženklas turės savo kontrastą nepriklausomai nuo kortelės.
• Naudokite ploną kontūrą arba aureolę. 1 px šviesesnis kraštas aplink tamsų glifą (arba atvirkščiai) išlaiko siluetą matomą bet kurioje temoje, tačiau 16x16 dydžiu jis turi likti ryškus, todėl jį išbandykite.
• Rinkitės vidutinio tono prekės ženklo spalvas. Tokios spalvos kaip sodri mėlyna, oranžinė, žalia ar purpurinė paprastai tinka ir ant baltų, ir ant beveik juodų paviršių. Rizikingos yra labai šviesiai geltona arba labai tamsiai mėlyna.
• Naudokite adaptyvią SVG favicon. SVG gali turėti prefers-color-scheme medijos užklausą, kad piktograma keistųsi kartu su sistemos tema.

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

Atkreipkite dėmesį, kad medijos užklausa atspindi operacinės sistemos ar naršyklės temą, kurią paprastai seka ir kortelių juosta, bet ne visada. SVG favicon palaikymas taip pat skiriasi: „Chrome“ ir „Firefox“ jas palaiko, o „Safari“ istoriškai atsilikdavo, todėl visada palikite PNG arba ICO atsargines versijas. Dizainas su vientisu fonu yra patikimiausias variantas, nes jam visai nereikia temos logikos.

3. Atpažįstamumas ir prekės ženklo nuoseklumas

Naudokite logotipo ženklą (simbolį ar monogramą), o ne visą logotipo kompoziciją su žodiniu užrašu. Tekstas 16x16 piktogramoje neįskaitomas, o plokščias horizontalus logotipas, sumažintas iki kvadrato, palieka tik mažytę juostelę viduryje.

• Jei jūsų prekės ženklas turi simbolį, supaprastinkite jį mažiems dydžiams, o ne tiesiog sumažinkite. „Favicon versija“ su mažiau detalių yra įprasta praktika.
• Jei jūsų prekės ženklas yra tik žodinis logotipas, paimkite pirmąją raidę arba išskirtinę raidžių porą ir nustatykite ją savo prekės ženklo šriftu storu svoriu.
• Išlaikykite spalvų nuoseklumą su logotipu, programėlės piktograma ir socialinių tinklų avatarais, kad vartotojas visur atpažintų tą patį prekės ženklą.

Išskirtinumas yra toks pat svarbus kaip ištikimybė originalui. Pažiūrėkite į kortelių eilę: jei dar trys svetainės naudoja mėlyną apskritimą, jūsų neišsiskirs. Kitokia forma ar spalva naudingesnė nei tobulai ištikimas sumažinimas.

4. Spalva: ribota, sodri paletė

Turint tiek mažai pikselių, kiekviena papildoma spalva prideda netvarkos. Rinkitės vieną ar dvi spalvas ir daugių daugiausia baltą ar juodą. Sodrios spalvos mažuose dydžiuose matomos geriau nei pastelinės, kurios linkusios susilieti su kortelės fonu.

Pasinaudokite prieinamumo principais. WCAG reikalauja bent 3:1 kontrasto reikšmingiems grafiniams objektams (sėkmės kriterijus 1.4.11, ne teksto kontrastas). Favicon formaliai šio reikalavimo neapima, nes tai naršyklės sąsajos dalis, o ne puslapio turinys, tačiau 3:1 tarp glifo ir jo fono bei tarp piktogramos ir kortelės yra pagrįstas tikslas. Taip pat venkite informaciją perteikti vien atspalviu: raudonos ir žalios tos pačios piktogramos versijos daugeliui spalvų aklumą turinčių vartotojų nesiskiria, todėl keiskite formą arba pridėkite simbolį.

5. Forma, tarpai ir saugiosios zonos

Užpildykite kvadratą

Naršyklės kortelės rodo favicon fiksuoto mažo dydžio, todėl papildomos paraštės tik sumažina jūsų ženklą. Standartinėms kortelių piktogramoms naudokite didžiąją drobės dalį, palikdami tik pikselį ar du laisvos erdvės, kad ženklas būtų kuo didesnis.

Suapvalinta ar kvadratinė?

Naršyklės paprastai neapkarpo kortelių favicon, todėl jūsų nupiešta forma yra ta, kurią mato vartotojai. Kvadratas su šiek tiek suapvalintais kampais atrodo tvarkingai ir suteikia nuoseklų foną; laisvos formos glifas ar apskritimas ant skaidraus fono gali atrodyti lengviau ir išskirtiniau. Tinka abu variantai. Pasirinkite vieną ir išlaikykite visą piktogramų rinkinį nuoseklų.

Apple touch piktogramos

iOS pati prideda suapvalintus kampus prie apple-touch-icon (įprastas dydis 180x180). Pateikite pilno užpildymo kvadratą be iš anksto suapvalintų kampų, kitaip kampuose gali likti matomų tamsių ar baltų ruoželių.

Maskuojamos piktogramos „Android“ ir PWA

Maskuojamas piktogramas operacinė sistema apkerpa į apskritimus, „squircle“ ar kitas formas. Visą svarbų turinį laikykite saugiojoje zonoje: piktogramos centre esančiame apskritime, kurio spindulys sudaro 40 procentų piktogramos pločio. Fono spalvą ištieskite iki pat kraštų, kad bet kuri kaukė atrodytų tinkamai. Nenaudokite glaudaus, kraštas iki krašto kortelės favicon kaip maskuojamos piktogramos, nes kaukė ją apkarpys.

6. Skaidrumas

Skaidrumas tinka kortelių favicon, ir būtent jis leidžia vien iš glifo sudarytai piktogramai švariai atrodyti bet kurios spalvos kortelėje. Tačiau tai problema Apple touch piktogramoms: iOS skaidrias sritis užpildo vientisa spalva (paprastai juoda), o tai gali sugadinti dizainą. Visada suteikite apple-touch-icon nepermatomą prekės ženklo spalvos foną. Tas pats galioja maskuojamoms piktogramoms ir daugeliui „Android“ pradžios ekrano atvejų, kur nepermatomas fonas duoda nnuspėjamą rezultatą.

7. Pastovumas: nekeiskite per dažnai

Favicon atpažįstamumą kuria kartojimas. Dažnas keitimas verčia vartotojus iš naujo mokytis, kuri kortelė jūsų, be to, sukelia techninių nesklandumų. Naršyklės agresyviai talpina favicon, o „Google“ jas gauna ir saugo atskirai nuo jūsų puslapių, todėl nauja piktograma paieškos rezultatuose gali pasirodyti po kelių dienų ar savaičių. „Google“ taip pat reikalauja pastovaus favicon URL, piktogramos, kurios dydis yra 48 pikselių kartotinis (48x48, 96x96 ir t. t.), ir failo, kurį galima nuskaityti (neužblokuoto robots.txt). Favicon keitimą vertinkite kaip sprendimą rebrandingo lygio, o ne kaip sezoninį papuošimą.

8. Pranešimų būsenos ir dinaminės favicon

Kai kurios žiniatinklio programos keičia favicon, kad parodytų neperskaitytas žinutes, įrašymo būseną ar klaidą. Gerai padaryta, tai naudinga; perlenkus lazdą, erzina.

• Naudokite mažą ženkliuką (tašką ar trumpą skaičių) kampe, o ne visišką perdarymą. Pagrindinė piktograma turi likti atpažįstama.
• Naudokite saikingai. Ženkliukus palikite įvykiams, kuriems reikia vartotojo veiksmo. Nenaudokite nuolatinės piktogramos animacijos.
• Apribokite skaičius. 16x16 dydžiu įskaitomi tik vienas ar du skaitmenys; vietoj „137“ rodykite „9+“ arba paprastą tašką.
• Greitai atstatykite, kai vartotojas įvykį sutvarko, ir grąžinkite numatytąją piktogramą.
• Nesiremkite vien spalva. Raudoną tašką turėtų papildyti puslapio pavadinimas, pavyzdžiui, „(3) Gauta“, kad informacija būtų prieinama visiems.

Dinaminės favicon paprastai piešiamos drobėje ir pakeičiamos atnaujinant piktogramos nuorodos elemento href. Apribokite atnaujinimų dažnį, nes nuolatinis favicon keitimas gali apkrauti procesorių ir blaškyti vartotojus.

9. Našumas

Favicon yra mažos, tačiau tai vis tiek užklausos, kurios gali būti įgyvendintos prastai.

• Išlaikykite failus mažus. PNG favicon paprastai užima nuo kelių šimtų baitų iki kelių kilobaitų. Paprastas SVG gali būti mažesnis nei 1 KB.
• Venkite išpūstų ICO failų. Daugiadydžio ICO su 16, 32 ir 48 pikselių vaizdais pakanka. Įterpus 256x256 vaizdą, failo dydis padaugėja, o naršyklės kortelėse jokios matomos naudos nėra.
• Nustatykite talpinimo antraštes. Pateikite piktogramas su ilgu Cache-Control galiojimo laiku, pavyzdžiui, public, max-age=31536000, immutable, o keisdami naudokite versijuotą arba maišos (hash) failo pavadinimą.
• Deklaruokite piktogramas aiškiai. Naršyklės pagal numatytuosius nustatymus užklausia /favicon.ico, todėl pateikite jį, net jei deklaruojate kitas piktogramas, kad žurnaluose nebūtų 404 triukšmo.
• Suspauskite. Praleiskite PNG per nuostolių nesukeliantį optimizatorių ir sumažinkite SVG failus (minify).

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

Jei norite sugeneruoti visus šiuos failus iš vieno šaltinio vaizdo, MakeFav favicon generatorius sukuria standartinį rinkinį, o kūrėjų puslapyje aprašytos integravimo galimybės.

10. Prieinamumas

Favicon neturi alternatyvaus teksto ir ekrano skaitytuvai jos neskaito, todėl tradicinės prieinamumo priemonės, tokios kaip alt atributai, netaikomos. Svarbu štai kas:

• Prasmę perteikia puslapio pavadinimas. Rašykite unikalius, aprašomuosius <title> elementus. Niekada nesiremkite piktograma būsenai perteikti; bet kurį ženkliuką pakartokite pavadinime.
• Matomumas silpnaregiams. Didelis kontrastas, stora forma ir didelis ženklas padeda vartotojams, kurie kortelės ieško akimis.
• Nepriklausomumas nuo spalvos. Įsitikinkite, kad būsenas skiria formos ar raidės, o ne vien atspalvis.
• Mažiau blaškymo. Venkite mirksinčių ar animuotų favicon, kurios gali kelti problemų judesiui jautriems vartotojams.

Favicon UX kontrolinis sąrašas

Testavimo kontrolinis sąrašas

Nepasitikėkite dideliu peržiūros vaizdu dizaino įrankyje. Išbandykite tikrą piktogramą tikromis sąlygomis:

1. Kelios naršyklės. Patikrinkite „Chrome“, „Firefox“, „Safari“ ir „Edge“, nes kiekviena šiek tiek kitaip pasirenka piktogramas ir dydžius.
2. Šviesusis ir tamsusis režimas. Perjunkite OS ir naršyklės temą ir kiekvieną kartą pažiūrėkite į kortelių juostą.
3. Retina ir standartiniai ekranai. Patikrinkite 1x monitoriuje ir 2x ar 3x ekrane bei priartinkite naršyklėje.
4. Žymių juosta. Pridėkite puslapį į žymes ir pažiūrėkite, ar piktograma vis dar įskaitoma šalia kitų svetainių.
5. Daug kortelių. Atidarykite 20 kortelių ir pažiūrėkite, ar savąją rasite iš pirmo žvilgsnio.
6. „Google“ SERP peržiūra. Kai piktograma bus nuskaityta iš naujo, patikrinkite mobiliosios paieškos rezultatą. Atminkite, kad atnaujinimas gali užtrukti.
7. Pradžios ekranas. Pridėkite svetainę į iOS ir „Android“ pradžios ekranus ir įsitikinkite, kad piktograma neapkarpyta, neturi juodų kampų ir nėra per maža savo kaukės viduje.
8. Techninis patikrinimas. Patikrinkite savo domeną naudodami MakeFav favicon tikrintuvą, kad įsitikintumėte, jog failai egzistuoja, grąžina 200 būseną, turi tinkamus dydžius ir yra teisingai deklaruoti jūsų HTML.

Praktinė darbo eiga

1. Pradėkite nuo savo logotipo ženklo ir supaprastinkite jį iki vienos formos ar raidės.
2. Sukurkite kvadratinę drobę su vientisu ar formos fonu, kuris veikia abiejose temose.
3. Eksportuokite 32x32 ir 16x16 dydžius ir patobulinkite mažąją versiją ranka pikselių redaktoriuje.
4. Sugeneruokite pilną rinkinį (ICO, PNG, apple-touch-icon, manifesto piktogramas) naudodami generatorių.
5. Pridėkite nuorodų žymes, nustatykite talpinimo antraštes, paskelbkite ir patikrinkite naudodami tikrintuvą.

Favicon yra vienas mažiausių jūsų svetainės elementų ir vienas dažniausiai matomų. Keli apgalvoti sprendimai dėl kontrasto, paprastumo ir nuoseklumo užtikrina, kad ji veiks kiekvienoje kortelėje, temoje ir įrenginyje.

Dažnai užduodami klausimai

Kokio dydžio turėtų būti favicon?

Kurkite 16x16 ir 32x32 dydžio naršyklės kortelėms (didelio tankio ekranuose naršyklė naudoja 32x32), pateikite 180x180 apple-touch-icon „iOS“ įrenginiams ir 192x192 bei 512x512 PNG „Android“ ir PWA. „Google“ paieškos rezultatams naudokite kvadratinę piktogramą, kurios dydis yra 48 pikselių kartotinis, pavyzdžiui, 48x48 ar 96x96. SVG šaltinis keičia mastelį iki visų šių dydžių.

Ar turėčiau naudoti visą savo logotipą kaip favicon?

Paprastai ne. Pilni logotipai su žodiniais užrašais per daug detalūs ir per platūs kvadratinei 16x16 piktogramai. Naudokite logotipo ženklą arba vienos ar dviejų raidžių monogramą ir supaprastinkite ją, kad ir mažytė liktų atpažįstama.

Kaip padaryti, kad favicon veiktų tamsiajame režime?

Saugiausias būdas yra suteikti piktogramai savo vientisą fono formą arba kontrastingą kontūrą, kad ji nepriklausytų nuo kortelės spalvos. Arba naudokite SVG favicon su prefers-color-scheme medijos užklausa spalvoms keisti ir palikite PNG ar ICO atsargines versijas naršyklėms, kurios nepalaiko SVG piktogramų. Visada testuokite tiek šviesiojoje, tiek tamsiojoje temoje.

Kodėl nerodoma mano nauja favicon?

Naršyklės favicon talpina ilgai, o „Google“ saugo savo kopiją ir atnaujina ją pagal savo tvarkaraštį, o tai dažnai užtrunka dienas ar savaites. Perkraukite puslapį priverstinai, išvalykite naršyklės talpyklą, naudokite naują versijuotą failo pavadinimą ir įsitikinkite, kad nuorodų žymės ir šakninis /favicon.ico nurodo teisingą failą. Sąranką galite patikrinti naudodami MakeFav tikrintuvą.

Ar gera idėja rodyti pranešimų ženkliukus favicon piktogramoje?

Taip, jei naudojama saikingai. Mažas taškas arba vieno ar dviejų skaitmenų skaičius padeda vartotojams pastebėti, kad reikia veiksmo, tačiau nuolatinė animacija ar dideli skaičiai kenkia įskaitomumui ir dėmesiui. Visada pakartokite būseną puslapio pavadinime, grąžinkite numatytąją piktogramą, kai įvykis sutvarkytas, ir nesiremkite vien spalva.