Favicon ni aikoni ndogo ambayo kivinjari huonyesha kwenye kichupo, kwenye alamisho na historia, na kwenye skrini ya mwanzo ya simu wakati mtu anapohifadhi tovuti yako. Kuiweka kwenye tovuti yako kunahitaji faili nne na takriban dakika tano — na sehemu kubwa ya usumbufu unaowapata watu ni akiba (cache), ambayo sehemu ya mwisho inaishughulikia.

Seti ndogo inayofanya kazi kweli

Huhitaji PNG kumi na sita na browserconfig.xml. Vigae vya Windows na miundo ya zamani ya Internet Explorer imekufa. Vitu vinne vinalingana na kila kivinjari na kifaa kinachotumika kweli leo:

Faili	Ukubwa	Kwa nini ipo
`favicon.ico`	16 · 32 · 48 (ukubwa mbalimbali)	Vivinjari vya zamani, na Google Search, ambayo huchukua `/favicon.ico` moja kwa moja.
`icon.svg`	vekta	Vivinjari vya kisasa huipendelea — kali kwa ukubwa wowote, na inaweza kubadilika kulingana na hali ya giza (dark mode).
`apple-touch-icon.png`	180 × 180	Skrini ya mwanzo ya iOS na Safari. iOS hupuuza SVG hapa, kwa hivyo PNG inahitajika.
`android-chrome` 192 & 512	192 · 512	Skrini ya mwanzo ya Android na PWA zinazoweza kusakinishwa, zinazorejelewa kutoka kwa manifest ya programu-tovuti.

HTML ya kubandika ndani ya <head>

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Kivinjari husoma mistari yote minne na kuchagua muundo bora unaouunga mkono, kwa hivyo Chrome au Safari ya sasa hutumia SVG wakati kivinjari cha zamani hurudi kwenye .ico. sizes="48x48" kwenye mstari wa .ico hutangaza tu picha kubwa zaidi iliyomo ndani yake.

Manifest ya programu-tovuti

Manifest ndiyo inayoruhusu usakinishaji wa Android na PWA kutumia aikoni sahihi. site.webmanifest ndogo:

{
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }
  ]
}

"purpose": "any maskable" huruhusu Android kupunguza aikoni katika umbo lake linalobadilika bila kukata nembo yako — mradi uache pambizo salama kuizunguka (ona Vidokezo vya Kina).

Faili zinapowekwa

Weka kila faili katika saraka ya mzizi (root) ya tovuti yako. Vivinjari — na Googlebot — huomba /favicon.ico kutoka mzizi kiotomatiki, hata bila tagi ya <link>, kwa hivyo kuiweka hapo ndio chaguo salama zaidi.

Thibitisha kuwa imefanya kazi kweli

Fanya hard-refresh ya ukurasa: Ctrl+Shift+R (Windows) au Cmd+Shift+R (Mac).
Bado umekwama? Fungua tovuti katika dirisha la faragha/incognito — huanza na akiba (cache) tupu.
Pakia kila faili moja kwa moja, k.m. yourdomain.com/favicon.ico, na uthibitishe kuwa inarudisha picha (HTTP 200), si 404.
Kagua <head> iliyotolewa katika DevTools, si faili yako ya chanzo tu — hatua ya build au CMS inaweza kuandika upya njia.

Jambo moja linalopoteza muda mwingi zaidi: akiba (cache)

Vivinjari huhifadhi favicon kwa ukaidi zaidi ya karibu kila kitu kingine, wakati mwingine hushikilia ile ya zamani hata baada ya kupakia upya kwa kawaida. Iwapo aikoni mpya inakataa kuonekana:

Fanya hard-refresh, kisha funga kichupo kabisa na ufungue kipya — akiba ya favicon mara nyingi hufungamana na kichupo.
Wakati wa kujaribu, ongeza swali la toleo ili kivinjari kiichukulie kama faili mpya: <link rel="icon" href="/favicon.ico?v=2">.
Google Search huhifadhi nakala yake yenyewe na husasisha kwa ratiba yake — tarajia siku, wakati mwingine wiki, kabla matokeo ya utafutaji kuonyesha aikoni mpya.

Kila kitu kwenye tovuti hii hukimbia ndani ya kivinjari chako. Picha unayopakia haiondoki kamwe kwenye kifaa chako — hakuna seva ya kuipakia.

← Rudi kwenye kizalishaji