Favicon UX: kas padara favicon lielisku

Lielisks favicon ir vienkārša, augsta kontrasta zīme, parasti jūsu logotipa simbols vai viens vai divi burti, kas paliek salasāma 16x16 pikseļu izmērā gan gaišās, gan tumšās pārlūka cilnēs, atbilst jūsu zīmolam un mainās reti. Viss pārējais šajā ceļvedī (pikseļu līdzinājums, krāsa, atstarpes, caurspīdīgums, faila izmērs) kalpo šiem mērķiem: padarīt jūsu vietni uzreiz atrodamu starp desmitiem atvērtu cilņu.

Favicon ir sīks, bet tas parādās daudzās vietās: pārlūka cilnēs, grāmatzīmju joslās, vēstures sarakstos, cilņu meklēšanas izvēlnē, Google meklēšanas rezultātos mobilajās ierīcēs un datoros, kā arī tālruņu sākuma ekrānos. Lietotājiem, kuriem ir atvērtas daudzas cilnes, nosaukums bieži tiek saīsināts līdz nullei, un ikona ir vienīgā atlikusī norāde. Tas padara to par īstu navigācijas elementu, nevis dekoru.

1. Salasāmība 16x16 izmērā

Klasiskais favicon izmērs ir 16x16 CSS pikseļi. Standarta displejā tie burtiski ir 256 pikseļi; 2x retina displejā pārlūks tai pašai vietai parasti izvēlas 32x32 attēlu. Viss, ko jūs izveidojat, šādu samazinājumu ir jāiztur.

Turiet to vienkāršu

• Viena forma vai viens līdz divi burti. Der viens treknraksta burts, aplis ar simbolu vai vienkārša ģeometriska zīme. Trīs burti vai vārds pārvērtīsies troksnī.
• Viens akcenta punkts. Ja ikonu nevar aprakstīt piecos vārdos, tā ir pārāk sarežģīta.
• Nekādu gradientu, ēnu vai smalku faktūru. Mazos izmēros tie kļūst par izplūdušiem traipiem.

Līdziniet pēc pikseļu režģa

16x16 izmērā līnija, kas novietota pusi pikseļa no režģa, tiek izlīdzināta (anti-aliasing) pāri divām pikseļu rindām un izskatās pelēka un mīksta. Novietojiet malas uz veselu pikseļu robežām un simetriskām formām izmantojiet pāra platumus. Ja eksportējat no vektoru rīka, ieslēdziet piesaisti pikseļiem vai pārbaudiet samazināto rezultātu un izlabojiet to ar roku.

Izvairieties no plānām līnijām

Kontūras, kas plānākas par 2 pikseļiem 16x16 izmērā (apmēram 12 procenti no ikonas platuma), mēdz pazust vai mirgot starp izmēriem. Sabiezējiet līnijas, noņemiet iekšējās detaļas un apvienojiet mazās atstarpes. Trekns, nedaudz smags glifs parasti ir labāk salasāms nekā precīza detalizēta logotipa miniatūra.

Pieskaņojiet ar roku

ICO un PNG failiem nav fontu tipa hintinga, tāpēc manuāla pikseļu rediģēšana ir tā ekvivalents: jūs pielāgojat atsevišķus pikseļus, lai līknes, diagonāles un kontras (caurumi tādos burtos kā "a" vai "e") paliktu asas. Automātiska samazināšana ir labs pirmais melnraksts, taču daži ar roku novietoti pikseļi bieži vien nosaka atšķirību starp plankumu un atpazīstamu burtu. MakeFav pikseļu redaktors ir radīts tieši tam: atveriet 16x16 audeklu, izlabojiet problemātiskos pikseļus un eksportējiet.

2. Kontrasts gaišās un tumšās cilnēs

Pārlūki tagad bieži darbojas tumšajā režīmā, un daudziem lietotājiem cilņu josla atšķiras no lapas tēmas. Tumšzila ikona ar caurspīdīgu fonu var būt lieliska uz baltas cilnes un gandrīz neredzama uz tumši pelēkas. Vienmēr pārbaudiet abas.

Praktiski risinājumi

• Pievienojiet fona formu. Pilnkrāsas noapaļots kvadrāts vai aplis zīmola krāsā garantē, ka zīmei ir savs kontrasts neatkarīgi no cilnes.
• Izmantojiet plānu kontūru vai oreolu. 1 px gaišāka mala ap tumšu glifu (vai otrādi) saglabā siluetu redzamu abās tēmās, taču 16x16 izmērā tai jāpaliek asai, tāpēc to pārbaudiet.
• Izvēlieties vidēja toņa zīmola krāsas. Tādas krāsas kā spilgti zila, oranža, zaļa vai fuksīna parasti darbojas gan uz baltām, gan uz gandrīz melnām virsmām. Riskantas ir ļoti gaiši dzeltena vai ļoti tumši zila.
• Izmantojiet adaptīvu SVG favicon. SVG var iekļaut prefers-color-scheme media vaicājumu, lai ikona mainītos līdz ar sistēmas tēmu.

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

Ņemiet vērā, ka media vaicājums atspoguļo operētājsistēmas vai pārlūka tēmu, kurai cilņu josla parasti seko, bet ne vienmēr. Arī SVG favicon atbalsts atšķiras: Chrome un Firefox tos atbalsta, savukārt Safari vēsturiski ir atpalicis, tāpēc vienmēr saglabājiet PNG vai ICO rezerves variantus. Dizains ar pilnkrāsas fonu ir visrobustākais risinājums, jo tam nav vajadzīga nekāda tēmas loģika.

3. Atpazīstamība un zīmola konsekvence

Izmantojiet logotipa zīmi (simbolu vai monogrammu), nevis pilnu logotipa kombināciju ar uzrakstu. Teksts 16x16 ikonā nav salasāms, un plašs horizontāls logotips, saspiests kvadrātā, atstāj tikai sīku joslu vidū.

• Ja jūsu zīmolam ir simbols, vienkāršojiet to mazajiem izmēriem, nevis tikai samaziniet. "Favicon versija" ar mazāk detaļām ir ierasta prakse.
• Ja jūsu zīmols ir tikai uzraksts, izmantojiet pirmo burtu vai raksturīgu burtu pāri un iestatiet to zīmola fontā ar treknu svaru.
• Saglabājiet krāsas saskaņā ar savu logotipu, lietotnes ikonu un sociālo tīklu avatariem, lai lietotājs visur atpazītu to pašu zīmolu.

Atšķirīgums ir tikpat svarīgs kā precizitāte. Paskatieties uz cilņu rindu: ja trīs citas vietnes arī izmanto zilu apli, jūsu vietne neizcelsies. Cita forma vai krāsa ir noderīgāka nekā perfekti precīza samazinājuma versija.

4. Krāsa: ierobežota, piesātināta palete

Ar tik maz pikseļiem katra papildu krāsa rada jucekli. Mērķējiet uz vienu vai divām krāsām plus, ne vairāk kā, baltu vai melnu. Piesātinātas krāsas mazos izmēros ir labāk redzamas nekā pasteļtoņi, kas mēdz saplūst ar cilnes fonu.

Aizgūstiet nedaudz no pieejamības domāšanas. WCAG prasa vismaz 3:1 kontrastu nozīmīgiem grafiskiem objektiem (panākumu kritērijs 1.4.11, Non-text Contrast). Favicon formāli netiek aptverts, jo tas ir pārlūka saskarnes daļa, nevis lapas saturs, taču 3:1 starp glifu un tā fonu, kā arī starp ikonu un cilni ir saprātīgs mērķis. Izvairieties arī kaut ko paziņot tikai ar nokrāsu: sarkani un zaļi vienas ikonas varianti daudziem krāsu akliem lietotājiem ir nesaskatāmi, tāpēc mainiet formu vai pievienojiet simbolu.

5. Forma, atstarpes un drošās zonas

Aizpildiet kvadrātu

Pārlūka cilnes rāda favicon fiksētā mazā izmērā, tāpēc papildu mala tikai padara jūsu zīmi mazāku. Standarta cilņu ikonām izmantojiet lielāko daļu audekla, atstājot tikai pikseli vai divus brīvas vietas, lai zīme būtu pēc iespējas lielāka.

Noapaļota vai kvadrātiska?

Pārlūki parasti neapgriež cilņu favicon, tāpēc formu, ko jūs uzzīmējat, lietotāji arī redz. Kvadrāts ar nedaudz noapaļotiem stūriem izskatās kārtīgi un nodrošina vienotu fonu; brīvas formas glifs vai aplis uz caurspīdīga fona var izskatīties vieglāk un atšķirīgāk. Der abi varianti. Izvēlieties vienu un saglabājiet visu savu ikonu komplektu konsekventu.

Apple touch ikonas

iOS apple-touch-icon pievieno savus noapaļotos stūrus (parastais izmērs ir 180x180). Nodrošiniet pilnībā aizpildītu kvadrātu bez iepriekš noapaļotiem stūriem, citādi stūros var parādīties redzamas tumšas vai baltas strēmeles.

Maskable ikonas Android un PWA

Maskable ikonas operētājsistēma apgriež apļos, kvadrātapļos vai citās formās. Saglabājiet visu svarīgo saturu drošajā zonā: aplī ikonas centrā ar rādiusu, kas vienāds ar 40 procentiem no ikonas platuma. Paplašiniet fona krāsu līdz pašām malām, lai jebkura maska izskatītos pareizi. Neizmantojiet cieši pieguļošu cilnes favicon, kas aizpilda visu laukumu, kā maskable ikonu, jo maska to apgriezīs.

6. Caurspīdīgums

Caurspīdīgums ir pieņemams cilņu favicon, un tieši tas ļauj ikonai, kas sastāv tikai no glifa, tīri izskatīties uz jebkuras cilnes krāsas. Tā ir problēma Apple touch ikonām: iOS aizpilda caurspīdīgos laukumus ar vienkrāsainu krāsu (parasti melnu), kas var sabojāt dizainu. Vienmēr piešķiriet apple-touch-icon necaurspīdīgu fonu zīmola krāsā. Tas pats attiecas uz maskable ikonām un lielāko daļu Android sākuma ekrāna gadījumu, kur necaurspīdīgs fons dod paredzamus rezultātus.

7. Stabilitāte: nemainiet to pārāk bieži

Favicon veido atpazīstamību ar atkārtošanos. Bieža maiņa liek lietotājiem no jauna apgūt, kura cilne ir jūsu, kā arī rada tehniskas galvassāpes. Pārlūki favicon kešo agresīvi, un Google tos ielādē un glabā atsevišķi no jūsu lapām, tāpēc jaunai ikonai var būt vajadzīgas dienas vai nedēļas, lai parādītos meklēšanas rezultātos. Google arī prasa stabilu favicon URL, ikonu, kuras izmērs ir 48 pikseļu daudzkārtnis (48x48, 96x96 un tā tālāk), un failu, ko var pārmeklēt (ko nebloķē robots.txt). Uztveriet favicon maiņu kā pārzīmološanas līmeņa lēmumu, nevis sezonālu dekorāciju.

8. Paziņojumu stāvokļi un dinamiski favicon

Dažas tīmekļa lietotnes maina favicon, lai norādītu uz necilātām ziņām, ierakstīšanas statusu vai kļūdu. Labi izdarīts, tas ir noderīgi; pārspīlēts, tas kaitina.

• Izmantojiet nelielu nozīmīti (punktu vai īsu skaitli) stūrī, nevis pilnīgu pārveidi. Pamatikonai jāpaliek atpazīstamai.
• Lietojiet to taupīgi. Rezervējiet nozīmītes notikumiem, kuriem nepieciešama lietotāja rīcība. Neanimējiet ikonu nepārtraukti.
• Ierobežojiet skaitļus. 16x16 izmērā ir salasāms tikai viens vai divi cipari; rādiet "9+" vai vienkāršu punktu, nevis "137".
• Atiestatiet nekavējoties, kad lietotājs ir apstrādājis vienumu, un atjaunojiet noklusējuma ikonu.
• Nepaļaujieties tikai uz krāsu. Sarkanam punktam jābūt papildinātam ar lapas nosaukumu, piemēram, "(3) Iesūtne", lai informācija būtu pieejama ikvienam.

Dinamiskie favicon parasti tiek zīmēti uz canvas un nomainīti, atjauninot ikonas saites elementa href. Ierobežojiet atjauninājumu biežumu, jo pastāvīga favicon maiņa var noslogot CPU un novērst lietotāju uzmanību.

9. Veiktspēja

Favicon ir mazi, taču tie joprojām ir pieprasījumi, kurus var izpildīt slikti.

• Turiet failus mazus. PNG favicon parasti ir daži simti baitu līdz daži kilobaiti. Vienkāršs SVG var būt zem 1 KB.
• Izvairieties no uzpūstiem ICO failiem. Daudzizmēru ICO ar 16, 32 un 48 pikseļu attēliem ir pietiekams. 256x256 attēla iegulšana reizina faila izmēru bez redzama ieguvuma pārlūka cilnēs.
• Iestatiet kešošanas galvenes. Pasniedziet ikonas ar garu Cache-Control darbības laiku, piemēram, public, max-age=31536000, immutable, un izmantojiet versiju vai jaucējkodu saturošu faila nosaukumu, kad tās mainīsiet.
• Deklarējiet ikonas skaidri. Pārlūki pēc noklusējuma pieprasa /favicon.ico, tāpēc nodrošiniet to arī tad, ja deklarējat citas ikonas, lai izvairītos no 404 trokšņa žurnālos.
• Saspiediet. Palaidiet PNG caur zudumu nesošu optimizētāju un minificējiet SVG.

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

Ja vēlaties ģenerēt visus šos failus no viena avota attēla, MakeFav favicon ģenerators izveido standarta komplektu, un izstrādātāju lapā aprakstītas integrācijas iespējas.

10. Pieejamība

Favicon nav alternatīvā teksta, un ekrāna lasītāji to neizrunā, tāpēc tradicionālie pieejamības rīki, piemēram, alt atribūti, nav piemērojami. Svarīgi ir šādi aspekti:

• Lapas nosaukums nes nozīmi. Rakstiet unikālus, aprakstošus <title> elementus. Nekad nepaļaujieties uz ikonu, lai paziņotu stāvokli; dublējiet jebkuru nozīmīti nosaukumā.
• Redzamība lietotājiem ar vāju redzi. Augsts kontrasts, trekna forma un liela zīme palīdz lietotājiem, kas pārlūko cilnes vizuāli.
• Neatkarība no krāsas. Pārliecinieties, ka stāvokļus atšķir formas vai burti, ne tikai nokrāsa.
• Mazāka uzmanības novēršana. Izvairieties no mirgojošiem vai animētiem favicon, kas var radīt problēmas lietotājiem, kuri ir jutīgi pret kustību.

Favicon UX kontrolsaraksts

Testēšanas kontrolsaraksts

Nepaļaujieties uz lielo priekšskatījumu sava dizaina rīkā. Pārbaudiet īsto ikonu reālos apstākļos:

1. Vairāki pārlūki. Pārbaudiet Chrome, Firefox, Safari un Edge, jo katrs ikonas un izmērus izvēlas nedaudz atšķirīgi.
2. Gaišais un tumšais režīms. Pārslēdziet OS un pārlūka tēmu un katru reizi apskatiet cilņu joslu.
3. Retina un standarta displeji. Pārbaudiet 1x monitorā un 2x vai 3x ekrānā, kā arī palieliniet mērogu pārlūkā.
4. Grāmatzīmju josla. Pievienojiet lapu grāmatzīmēm un paskatieties, vai ikona joprojām ir salasāma blakus citām vietnēm.
5. Daudz cilņu. Atveriet 20 cilnes un paskatieties, vai varat savu atrast no pirmā acu uzmetiena.
6. Google SERP priekšskatījums. Pārbaudiet mobilo meklēšanas rezultātu pēc tam, kad ikona ir pārmeklēta no jauna. Atcerieties, ka atjaunināšanās var aizņemt laiku.
7. Sākuma ekrāns. Pievienojiet vietni iOS un Android sākuma ekrāniem un pārliecinieties, ka ikona nav apgriezta, tai nav melnu stūru un tā nav pārāk maza savā maskā.
8. Tehniskā pārbaude. Palaidiet savu domēnu caur MakeFav favicon pārbaudītāju, lai pārliecinātos, ka faili eksistē, atgriež 200 statusu, ir pareizos izmēros un ir pareizi deklarēti jūsu HTML.

Praktiska darbplūsma

1. Sāciet ar savu logotipa zīmi un vienkāršojiet to līdz vienai formai vai burtam.
2. Izveidojiet kvadrātisku audeklu ar pilnkrāsas vai formas fonu, kas darbojas abās tēmās.
3. Eksportējiet 32x32 un 16x16 izmērus un precizējiet mazo versiju ar roku pikseļu redaktorā.
4. Ģenerējiet pilnu komplektu (ICO, PNG, apple-touch-icon, manifesta ikonas) ar ģeneratoru.
5. Pievienojiet link tagus, iestatiet kešošanas galvenes, izvietojiet un pārbaudiet ar pārbaudītāju.

Favicon ir viens no mazākajiem jūsu vietnes resursiem un viens no visbiežāk redzamajiem. Daži rūpīgi lēmumi par kontrastu, vienkāršību un konsekvenci liek tam darboties katrā cilnē, tēmā un ierīcē.

Biežāk uzdotie jautājumi

Kāds izmērs jābūt favicon?

Veidojiet 16x16 un 32x32 pārlūka cilnēm (pārlūks augsta blīvuma displejos izmanto 32x32), nodrošiniet 180x180 apple-touch-icon iOS un 192x192 un 512x512 PNG Android un PWA. Google meklēšanas rezultātiem izmantojiet kvadrātisku ikonu, kuras izmērs ir 48 pikseļu daudzkārtnis, piemēram, 48x48 vai 96x96. SVG avots mērogojas uz visiem šiem izmēriem.

Vai kā favicon izmantot savu pilno logotipu?

Parasti nē. Pilni logotipi ar uzrakstiem ir pārāk detalizēti un pārāk plati kvadrātiskai 16x16 ikonai. Izmantojiet logotipa zīmi vai viena vai divu burtu monogrammu un vienkāršojiet to, lai tā paliktu atpazīstama arī sīkā izmērā.

Kā panākt, lai favicon darbotos tumšajā režīmā?

Drošākais veids ir piešķirt ikonai savu pilnkrāsas fona formu vai kontrastējošu kontūru, lai tā nebūtu atkarīga no cilnes krāsas. Alternatīvi izmantojiet SVG favicon ar prefers-color-scheme media vaicājumu krāsu nomaiņai un saglabājiet PNG vai ICO rezerves variantus pārlūkiem, kas neatbalsta SVG ikonas. Vienmēr pārbaudiet gan gaišajā, gan tumšajā tēmā.

Kāpēc mans jaunais favicon neparādās?

Pārlūki favicon kešo ilgu laiku, un Google glabā savu kopiju, ko atjaunina pēc sava grafika, bieži tas aizņem dienas vai nedēļas. Veiciet lapas piespiedu atsvaidzināšanu, notīriet pārlūka kešatmiņu, izmantojiet jaunu versiju faila nosaukumu un pārliecinieties, ka link tagi un saknes /favicon.ico norāda uz pareizo failu. Iestatījumus varat pārbaudīt ar MakeFav pārbaudītāju.

Vai ir laba ideja rādīt paziņojumu nozīmītes uz favicon?

Jā, ja tās izmanto taupīgi. Neliels punkts vai viena vai divu ciparu skaitlis palīdz lietotājiem pamanīt kaut ko, kam nepieciešama rīcība, taču pastāvīga animācija vai lieli skaitļi kaitē salasāmībai un uzmanībai. Vienmēr dublējiet stāvokli lapas nosaukumā, atjaunojiet noklusējuma ikonu, kad vienums ir apstrādāts, un nepaļaujieties tikai uz krāsu.