Maelezo kuhusu favicon

Mwongozo · dakika 3 kusoma

Kwa nini favicon yako haisasishwi — na jinsi ya kuilazimisha

Ulibadilisha favicon, ukaipeleka (deploy), ukapakia upya — na ile ya zamani bado ipo. Hili ndilo lalamiko la kawaida zaidi la favicon, na karibu kamwe si tatizo la msimbo. Vivinjari huhifadhi favicon kwa ukali zaidi ya kurasa au picha, na akiba ya favicon mara nyingi hunusurika baada ya kupakia upya kwa kawaida.

Pitia kwa mpangilio huu:

• Hard refresh. Ctrl+Shift+R (Windows) au Cmd+Shift+R (Mac) hupakia upya bila kupitia akiba ya ukurasa.
• Fungua kichupo tena. Akiba ya favicon mara kwa mara hufungamana na kichupo kilichofunguliwa. Kifunge kabisa na ufungue kipya.
• Ivunje kwa swali. Elekeza link kwenye URL "mpya" wakati wa kujaribu: <link rel="icon" href="/favicon.ico?v=2">. Ongeza namba kwa kila badiliko.
• Thibitisha kuwa faili ipo kweli. Pakia yourdomain.com/favicon.ico moja kwa moja — ikitoa 404, kivinjari kinaonyesha aikoni iliyohifadhiwa kwa faili ambayo haipo tena.

Google Search ni jambo lake pekee. Huhifadhi favicon yako kando na kurasa zako na husasisha kwa ratiba ya Google, kwa hivyo aikoni mpya katika matokeo ya utafutaji inaweza kuchelewa kwa siku au wiki hata baada ya tovuti yako kuwa sahihi. Hakuna kitufe cha kuharakisha hilo — hakikisha /favicon.ico inarudisha 200 kwa Googlebot na usubiri.

Maoni · dakika 4 kusoma

Acha kuzalisha faili 20 za favicon — seti ndogo ya 2026

Zana nyingi za favicon bado zinakupa ZIP yenye PNG kumi na sita, browserconfig.xml na picha za vigae vya Microsoft. Karibu vyote ni mzigo usio na maana. Vigae vya Windows viliondolewa pamoja na kiolesura cha Live Tiles; rundo la ukubwa wa PNG wa katikati lilisuluhisha tatizo la kivinjari ambalo halipo tena.

Hapa kuna seti inayolingana na kila kitu kinachotumika leo:

• favicon.ico — ukubwa mbalimbali (16/32/48), kwa vivinjari vya zamani na Google Search.
• icon.svg — faili moja inayoweza kupanuliwa ambayo vivinjari vya kisasa huipendelea, yenye uwezo wa hali ya giza.
• apple-touch-icon.png — 180×180 kwa skrini za mwanzo za iOS.
• PNG za android-chrome-192 na -512 — zinazorejelewa kutoka kwa manifest ya programu-tovuti yako kwa Android na PWA.

Faili tano, marejeleo manne ya <link>/manifest, imekamilika. Faili chache humaanisha kidogo cha kuweka sawa, upelekaji mwepesi, na hakuna browserconfig.xml iliyopitwa na wakati inayoelekeza kwenye picha ulizofuta. Iwapo zana inasisitiza unahitaji ishirini, inaboreshwa kwa kuonekana kamili, si kwa kile ambacho vivinjari huomba.

Mbinu · dakika 3 kusoma

Favicon za SVG na hali ya giza: aikoni moja inayobadilika

Nembo ya giza huonekana kali kwenye mwambaa wa vichupo wa mwanga na hukaribia kutoweka kwenye ule wa giza. Kutuma faili mbili na kuzibadilisha ni jambo la usumbufu. Kwa favicon ya SVG unaweza kuruhusu faili moja iitikie mandhari ya kivinjari, kwa sababu kivinjari hutumia CSS ndani ya SVG kinapotoa aikoni.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .glyph { fill: #111; }
    @media (prefers-color-scheme: dark) { .glyph { fill: #fff; } }
  </style>
  <path class="glyph" d="…"/>
</svg>

Irejelee kwa <link rel="icon" href="/icon.svg" type="image/svg+xml"> na uweke favicon.ico ya kawaida kama mbadala — vivinjari vya zamani na Google Search havitatathmini swali la media, kwa hivyo vinahitaji aikoni tuli pia. Matokeo: kwenye mfumo wa mwanga glyph ni ya giza, kwenye mfumo wa giza hubadilika kuwa ya mwanga, kutoka faili moja ndogo.