UX ya Favicon: Nini Hufanya Favicon Bora

Favicon bora ni alama rahisi yenye utofautishaji mkubwa, mara nyingi alama ya nembo yako au herufi moja au mbili, ambayo husomeka katika pikseli 16x16 kwenye vichupo vya kivinjari vyenye mwanga na giza, inalingana na chapa yako, na hubadilika mara chache. Kila kitu kingine katika mwongozo huu (mpangilio wa pikseli, rangi, nafasi ya pembeni, uwazi wa mandharinyuma, ukubwa wa faili) kinatumikia malengo hayo: kufanya tovuti yako ipatikane papo hapo miongoni mwa makumi ya vichupo vilivyofunguliwa.

Favicon ni ndogo, lakini huonekana mahali pengi: vichupo vya kivinjari, pau za alamisho, orodha za historia, menyu ya kutafuta vichupo, matokeo ya utafutaji wa Google kwenye simu na kompyuta, na skrini za mwanzo za simu. Kwa watumiaji wenye vichupo vingi vilivyofunguliwa, kichwa mara nyingi hukatwa hadi kutoonekana na ikoni ndiyo kidokezo pekee kinachobaki. Hilo huifanya kuwa kipengele halisi cha urambazaji, si pambo.

1. Uwazi wa kusomeka katika 16x16

Ukubwa wa kawaida wa favicon ni pikseli 16x16 za CSS. Kwenye skrini ya kawaida hiyo ni pikseli 256 kihalisi; kwenye skrini ya retina ya 2x, kivinjari kwa kawaida huchagua picha ya 32x32 kwa nafasi hiyo hiyo. Chochote unachobuni lazima kiweze kustahimili upunguzaji huu.

Iweke rahisi

• Umbo moja au herufi moja hadi mbili. Herufi moja nzito, duara lenye alama, au alama rahisi ya kijiometri hufanya kazi. Herufi tatu au neno zima zitageuka kuwa mchanganyiko usiosomeka.
• Kitovu kimoja cha mvuto. Kama huwezi kuelezea ikoni kwa maneno matano, ni ngumu mno.
• Hakuna gradient, vivuli wala maumbo madogo madogo. Huwa mabaka yaliyofifia katika ukubwa mdogo.

Pangilia kwenye gridi ya pikseli

Katika 16x16, mstari uliowekwa nusu pikseli nje ya gridi hufifishwa (anti-aliasing) kwenye safu mbili za pikseli na huonekana kijivu na laini. Weka kingo kwenye mipaka kamili ya pikseli na utumie upana wa namba shufwa pale umbo linapolingana pande zote. Ukisafirisha kutoka kwenye zana ya vekta, washa pixel snapping, au angalia matokeo yaliyopunguzwa ukubwa na uyarekebishe kwa mkono.

Epuka mistari myembamba

Mistari nyembamba kuliko pikseli 2 katika 16x16 (takriban asilimia 12 ya upana wa ikoni) huwa inatoweka au kumemeta kati ya ukubwa mbalimbali. Nene mistari, ondoa maelezo ya ndani, na unganisha mapengo madogo. Herufi nzito kidogo mara nyingi husomeka vizuri kuliko nakala ndogo mwaminifu ya nembo yenye maelezo mengi.

Rekebisha kwa mkono

Faili za ICO na PNG hazina hinting ya mtindo wa fonti, kwa hiyo kuhariri pikseli kwa mkono ndiyo njia mbadala: unarekebisha pikseli moja moja ili mikunjo, mistari ya mshazari na mashimo ya ndani (kama yale ya herufi "a" au "e") yabaki makali na wazi. Upunguzaji wa ukubwa wa kiotomatiki ni rasimu nzuri ya kwanza, lakini pikseli chache zilizowekwa kwa mkono mara nyingi hutofautisha kati ya kibaka kisichoeleweka na herufi inayotambulika. Kihariri cha pikseli cha MakeFav kimetengenezwa kwa kazi hii: fungua turubai ya 16x16, sahihisha pikseli zenye tatizo, kisha usafirishe.

2. Utofautishaji kwenye vichupo vyenye mwanga na giza

Vivinjari sasa mara nyingi huendeshwa katika hali ya giza, na watumiaji wengi wana pau za vichupo zinazotofautiana na mandhari ya ukurasa. Ikoni ya bluu iliyokolea sana yenye mandharinyuma wazi inaweza kuwa kamilifu kwenye kichupo cheupe lakini karibu isionekane kwenye kichupo cha kijivu iliyokolea. Jaribu zote mbili kila mara.

Suluhisho za vitendo

• Ongeza umbo la mandharinyuma. Mraba wenye pembe zilizopinda au duara thabiti lenye rangi ya chapa huhakikisha alama ina utofautishaji wake yenyewe, bila kujali kichupo.
• Tumia mstari mwembamba wa kuzunguka au halo. Ukingo mwepesi wa 1px kuzunguka herufi nyeusi (au kinyume chake) huweka muhtasari ukionekana kwenye mandhari yoyote, lakini katika 16x16 lazima ubaki mkali, kwa hiyo ujaribu.
• Chagua rangi za chapa za kati. Rangi kama bluu kali, chungwa, kijani au magenta kwa kawaida hufanya kazi kwenye nyuso nyeupe na zilizo karibu na nyeusi. Njano nyepesi sana au bluu iliyokolea sana ndizo zenye hatari.
• Tumia favicon ya SVG inayojirekebisha. SVG inaweza kujumuisha media query ya prefers-color-scheme ili ikoni ibadilike kulingana na mandhari ya mfumo.

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

Kumbuka kwamba media query huakisi mandhari ya mfumo wa uendeshaji au kivinjari, ambayo kwa kawaida ndiyo pau ya vichupo hufuata, lakini si kila mara. Usaidizi wa favicon za SVG pia hutofautiana: Chrome na Firefox huzishughulikia, huku Safari kihistoria ikiwa nyuma, kwa hiyo weka kila mara PNG au ICO mbadala. Muundo wenye mandharinyuma thabiti ndio chaguo imara zaidi kwa sababu hauhitaji mantiki yoyote ya mandhari.

3. Kutambulika na uthabiti wa chapa

Tumia alama ya nembo (ishara au monogramu), si nembo kamili pamoja na maandishi ya jina. Maandishi ndani ya ikoni ya 16x16 hayasomeki, na nembo ndefu ya mlalo iliyobanwa kwenye mraba huacha kipande kidogo tu katikati.

• Kama chapa yako ina ishara, irahisishe kwa ukubwa mdogo badala ya kuipunguza tu. "Toleo la favicon" lenye maelezo machache ni mazoea ya kawaida.
• Kama chapa yako ni maandishi ya jina tu, chukua herufi ya kwanza au jozi ya herufi bainifu na uziweke kwa fonti ya chapa yako katika unene mzito.
• Weka rangi zilingane na nembo yako, ikoni ya programu na avatari za mitandao ya kijamii, ili mtumiaji atambue chapa ile ile kila mahali.

Upekee ni muhimu kama uaminifu kwa nembo asili. Tazama safu ya vichupo: kama tovuti nyingine tatu pia zinatumia duara la bluu, yako haitajitokeza. Umbo au rangi tofauti ni muhimu zaidi kuliko upunguzaji mwaminifu kikamilifu.

4. Rangi: paleti ndogo yenye rangi zilizojaa

Kwa pikseli chache hivyo, kila rangi ya ziada huongeza mrundikano. Lenga rangi moja au mbili pamoja na, kwa kiwango cha juu, nyeupe au nyeusi. Rangi zilizojaa hubeba vizuri zaidi katika ukubwa mdogo kuliko rangi hafifu (pastel), ambazo huwa zinachanganyika na mandharinyuma ya kichupo.

Chukua kidogo kutoka kwenye fikra za ufikivu. WCAG inataka utofautishaji wa angalau 3:1 kwa vitu vya picha vyenye maana (kigezo cha mafanikio 1.4.11, Non-text Contrast). Favicon haijumuishwi rasmi, kwa kuwa ni sehemu ya kivinjari na si maudhui ya ukurasa, lakini 3:1 kati ya herufi na mandharinyuma yake, na kati ya ikoni na kichupo, ni lengo zuri. Pia epuka kuwasilisha chochote kwa rangi pekee: matoleo mekundu na ya kijani ya ikoni ile ile hayatofautishwi na watumiaji wengi wasioona rangi vizuri, kwa hiyo badilisha umbo au ongeza ishara.

5. Umbo, nafasi ya pembeni na maeneo salama

Jaza mraba

Vichupo vya kivinjari huonyesha favicon kwa ukubwa mdogo usiobadilika, kwa hiyo pembe za ziada hufanya alama yako kuwa ndogo tu. Kwa ikoni za kawaida za vichupo, tumia sehemu kubwa ya turubai, ukiacha nafasi ya pikseli moja au mbili tu, ili alama iwe kubwa kadri inavyowezekana.

Iliyopinda au mraba?

Vivinjari kwa ujumla havikati favicon za vichupo, kwa hiyo umbo unalochora ndilo watumiaji wanaloliona. Mraba wenye pembe zilizopinda kidogo huonekana nadhifu na hutoa mandharinyuma thabiti; herufi huru au duara lenye uwazi linaweza kuonekana jepesi na bainifu zaidi. Yoyote ni sawa. Chagua moja na uweke seti yako yote ya ikoni iwe thabiti.

Apple touch icons

iOS huongeza pembe zake zilizopinda kwenye apple-touch-icon (180x180 ndio ukubwa wa kawaida). Toa mraba kamili usio na pembe zilizopindwa tayari, vinginevyo unaweza kuishia na vipande vya giza au vyeupe vinavyoonekana kwenye pembe.

Ikoni za maskable kwa Android na PWA

Ikoni za maskable hukatwa na mfumo wa uendeshaji kuwa duara, squircle au maumbo mengine. Weka maudhui yote muhimu ndani ya eneo salama: duara lililo katikati ya ikoni lenye kipenyo-nusu cha asilimia 40 ya upana wa ikoni. Panua rangi ya mandharinyuma hadi kwenye kingo zote ili kinyago (mask) chochote kionekane sawa. Usitumie tena favicon ya kichupo iliyobana hadi kingoni kama ikoni ya maskable, kwa sababu kinyago kitaikata.

6. Uwazi wa mandharinyuma

Uwazi unafaa kwa favicon za vichupo, na ndio unaoruhusu ikoni ya herufi tu kukaa vizuri kwenye rangi yoyote ya kichupo. Ni tatizo kwa Apple touch icons: iOS hujaza maeneo yenye uwazi kwa rangi thabiti (kwa kawaida nyeusi), jambo linaloweza kuharibu muundo. Mpe apple-touch-icon mandharinyuma isiyo wazi kila mara kwa rangi ya chapa yako. Hivyo hivyo kwa ikoni za maskable na matumizi mengi ya skrini ya mwanzo ya Android, ambapo mandharinyuma isiyo wazi hutoa matokeo yanayotabirika.

7. Uthabiti: usibadilishe mara nyingi mno

Favicon hujenga utambuzi kupitia marudio. Kuibadilisha mara kwa mara huwalazimu watumiaji kujifunza upya kichupo kipi ni chako, na pia husababisha maumivu ya kichwa ya kiufundi. Vivinjari huhifadhi favicon kwenye akiba kwa nguvu, na Google huzichukua na kuzihifadhi kando na kurasa zako, kwa hiyo ikoni mpya inaweza kuchukua siku au wiki kuonekana kwenye matokeo ya utafutaji. Google pia inataka URL ya favicon iliyo thabiti, ikoni ambayo ukubwa wake ni kigawe cha pikseli 48 (48x48, 96x96, na kadhalika), na faili inayoweza kutambaliwa (isizuiliwe na robots.txt). Chukulia mabadiliko ya favicon kama uamuzi wa kiwango cha kubadilisha chapa, si pambo la msimu.

8. Hali za arifa na favicon zinazobadilika

Baadhi ya programu za wavuti hubadilisha favicon kuashiria ujumbe ambao haujasomwa, hali ya kurekodi au hitilafu. Ikifanywa vizuri ni ya msaada; ikizidishwa inakera.

• Tumia beji ndogo (nukta au hesabu fupi) pembeni, si usanifu upya kamili. Ikoni ya msingi inapaswa kubaki inatambulika.
• Itumie kwa uchache. Hifadhi beji kwa matukio yanayohitaji hatua ya mtumiaji. Usiihuishe ikoni mfululizo.
• Weka kikomo kwa namba. Katika 16x16 tarakimu moja au mbili tu ndizo zinazosomeka; onyesha "9+" au nukta tupu badala ya "137".
• Irudishe haraka mtumiaji anapomaliza kushughulikia jambo hilo, na urejeshe ikoni chaguomsingi.
• Usitegemee rangi pekee. Nukta nyekundu inapaswa pia kuungwa mkono na kichwa cha ukurasa, kama "(3) Inbox", ili taarifa ipatikane kwa kila mtu.

Favicon zinazobadilika kwa kawaida huchorwa kwenye canvas na kubadilishwa kwa kusasisha href ya kipengele cha kiungo cha ikoni. Punguza kasi ya masasisho, kwa sababu kubadilisha favicon mfululizo kunaweza kutumia CPU na kuwakengeusha watumiaji.

9. Utendaji

Favicon ni ndogo, lakini bado ni maombi (requests) ambayo yanaweza kufanywa vibaya.

• Weka faili ndogo. Favicon ya PNG kwa kawaida ni baiti mia chache hadi kilobaiti chache. SVG rahisi inaweza kuwa chini ya KB 1.
• Epuka faili za ICO zilizovimba. ICO ya ukubwa mbalimbali yenye picha za pikseli 16, 32 na 48 inatosha. Kuweka picha ya 256x256 huongeza ukubwa wa faili mara nyingi bila faida yoyote inayoonekana kwenye vichupo vya kivinjari.
• Weka vichwa vya akiba (caching headers). Toa ikoni kwa muda mrefu wa Cache-Control, kwa mfano public, max-age=31536000, immutable, na utumie jina la faili lenye toleo au hash unapozibadilisha.
• Tangaza ikoni waziwazi. Vivinjari huomba /favicon.ico kwa chaguomsingi, kwa hiyo weka moja hata kama unatangaza ikoni nyingine, ili kuepuka kelele za 404 kwenye kumbukumbu zako.
• Bana. Pitisha PNG kwenye kiboresha kisichopoteza ubora (lossless), na punguza SVG (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'>

Ukitaka kutengeneza faili hizi zote kutoka kwenye picha moja ya chanzo, kitengeneza favicon cha MakeFav hutoa seti ya kawaida, na ukurasa wa wasanidi unaeleza chaguo za uunganishaji.

10. Ufikivu

Favicon haina maandishi mbadala (alt) na visomaji vya skrini haviitangazi, kwa hiyo zana za kawaida za ufikivu kama sifa za alt hazitumiki. Kinachojalisha ni:

• Kichwa cha ukurasa hubeba maana. Andika vipengele vya <title> vya kipekee na vinavyoeleza. Usitegemee ikoni kuwasilisha hali; rudia beji yoyote kwenye kichwa.
• Uonekanaji kwa watumiaji wenye uoni hafifu. Utofautishaji mkubwa, umbo zito na alama kubwa huwasaidia watumiaji wanaotazama vichupo kwa macho.
• Kutotegemea rangi. Hakikisha maumbo au herufi ndizo zinazotofautisha hali, si rangi pekee.
• Kupunguza usumbufu. Epuka favicon zinazomweka au kuhuishwa, ambazo zinaweza kuwa tatizo kwa watumiaji wanaoathiriwa na mwendo.

Orodha ya ukaguzi wa UX ya favicon

Orodha ya ukaguzi wa upimaji

Usiamini hakikisho kubwa kwenye zana yako ya usanifu. Jaribu ikoni halisi katika mazingira halisi:

1. Vivinjari kadhaa. Angalia Chrome, Firefox, Safari na Edge, kwa kuwa kila kimoja huchagua ikoni na ukubwa kwa namna tofauti kidogo.
2. Hali ya mwanga na giza. Badilisha mandhari ya OS na kivinjari na utazame pau ya vichupo kila mara.
3. Skrini za retina na za kawaida. Angalia kwenye kifuatiliaji cha 1x na skrini ya 2x au 3x, na kuza (zoom) kwenye kivinjari.
4. Pau ya alamisho. Weka alamisho kwenye ukurasa na uone kama ikoni bado inasomeka pembeni mwa tovuti nyingine.
5. Vichupo vingi. Fungua vichupo 20 na uone kama unaweza kupata chako kwa mtazamo mmoja.
6. Hakikisho la Google SERP. Angalia matokeo ya utafutaji kwenye simu baada ya ikoni kutambaliwa upya. Kumbuka inaweza kuchukua muda kusasishwa.
7. Skrini ya mwanzo. Ongeza tovuti kwenye skrini za mwanzo za iOS na Android na uthibitishe kuwa ikoni haijakatwa, haina pembe nyeusi, na si ndogo mno ndani ya kinyago chake.
8. Ukaguzi wa kiufundi. Pitisha kikoa chako kwenye kikagua favicon cha MakeFav kuthibitisha kuwa faili zipo, zinarudisha hali ya 200, zina ukubwa sahihi na zimetangazwa ipasavyo kwenye HTML yako.

Mtiririko wa kazi wa vitendo

1. Anza na alama ya nembo yako na uirahisishe hadi umbo moja au herufi moja.
2. Tengeneza turubai ya mraba yenye mandharinyuma thabiti au yenye umbo inayofanya kazi katika mandhari zote mbili.
3. Safirisha ukubwa wa 32x32 na 16x16 na uboreshe toleo dogo kwa mkono kwenye kihariri cha pikseli.
4. Tengeneza seti kamili (ICO, PNG, apple-touch-icon, ikoni za manifest) kwa kutumia kitengeneza.
5. Ongeza lebo za link, weka vichwa vya akiba, chapisha, kisha thibitisha kwa kikagua.

Favicon ni mojawapo ya rasilimali ndogo zaidi kwenye tovuti yako na mojawapo ya zinazoonekana mara nyingi zaidi. Maamuzi machache makini kuhusu utofautishaji, urahisi na uthabiti huifanya ifanye kazi katika kila kichupo, mandhari na kifaa.

Maswali yanayoulizwa mara kwa mara

Favicon inapaswa kuwa na ukubwa gani?

Buni kwa 16x16 na 32x32 kwa vichupo vya kivinjari (kivinjari hutumia 32x32 kwenye skrini zenye msongamano mkubwa), toa apple-touch-icon ya 180x180 kwa iOS, na PNG za 192x192 na 512x512 kwa Android na PWA. Kwa matokeo ya utafutaji ya Google, tumia ikoni ya mraba ambayo ukubwa wake ni kigawe cha pikseli 48, kama 48x48 au 96x96. Chanzo cha SVG hupanuka hadi ukubwa wote huo.

Je, nitumie nembo yangu kamili kama favicon?

Kwa kawaida hapana. Nembo kamili zenye maandishi ya jina zina maelezo mengi mno na ni ndefu mno kwa ikoni ya mraba ya 16x16. Tumia alama ya nembo au monogramu ya herufi moja au mbili, na uirahisishe ili ibaki inatambulika inapokuwa ndogo.

Ninawezaje kufanya favicon ifanye kazi katika hali ya giza?

Njia salama zaidi ni kuipa ikoni umbo lake la mandharinyuma thabiti au mstari wa kuzunguka wenye utofautishaji, ili isitegemee rangi ya kichupo. Vinginevyo, tumia favicon ya SVG yenye media query ya prefers-color-scheme kubadilisha rangi, na weka PNG au ICO mbadala kwa vivinjari visivyosaidia ikoni za SVG. Jaribu kila mara katika mandhari ya mwanga na giza.

Kwa nini favicon yangu mpya haionekani?

Vivinjari huhifadhi favicon kwenye akiba kwa muda mrefu, na Google huhifadhi nakala yake yenyewe, ambayo huisasisha kwa ratiba yake, mara nyingi ikichukua siku au wiki. Onyesha upya ukurasa kwa nguvu (hard refresh), futa akiba ya kivinjari, tumia jina jipya la faili lenye toleo, na hakikisha lebo za link na /favicon.ico ya mzizi zinaelekeza kwenye faili sahihi. Unaweza kuthibitisha usanidi kwa kikagua cha MakeFav.

Je, ni wazo zuri kuonyesha beji za arifa kwenye favicon?

Ndiyo, ikitumika kwa uchache. Nukta ndogo au hesabu ya tarakimu moja au mbili huwasaidia watumiaji kuona jambo linalohitaji hatua, lakini uhuishaji wa mara kwa mara au namba kubwa hudhuru usomekaji na umakini. Rudia hali kwenye kichwa cha ukurasa kila mara, rejesha ikoni chaguomsingi jambo likishashughulikiwa, na usitegemee rangi pekee.