Favicon inayobadilika kulingana na hali ya giza
SVG pekee ndiyo inayoweza kuitikia mandhari ya kivinjari. Pachika <style> yenye swali la prefers-color-scheme ndani ya SVG yenyewe — kivinjari huitumia wakati wa kutoa aikoni. Hii huweka nembo ya giza ikionekana kwenye mwambaa wa vichupo wa giza:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
path { fill: #111; }
@media (prefers-color-scheme: dark) { path { fill: #fff; } }
</style>
<path d="…your icon path…"/>
</svg>
Irejelee kama <link rel="icon" href="/icon.svg" type="image/svg+xml">. Weka favicon.ico ya kawaida kando yake kwa ajili ya vivinjari na Google Search, ambavyo havitaendesha swali la media.
Aikoni ya kichupo kilichobandikwa cha Safari
Mtu anapobandika kichupo chako katika Safari ya kompyuta, hutumia SVG tofauti tambarare ya rangi moja ("mask icon") — umbo tu, hakuna michanganyiko ya rangi:
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#F0562E">
Sifa ya color huweka rangi ya pini. Hamisha toleo la rangi moja (monochrome) la alama yako kwa ajili hii; chochote chenye undani mzuri au rangi nyingi kitatolewa kama donge thabiti.
Aikoni za maskable na eneo salama
Aikoni zinazobadilika za Android hupunguza picha yako kuwa duara, squircle au mraba wenye pembe za mviringo kutegemea kizinduzi. Aikoni ya kawaida hukatwa pembe zake. Weka alama aikoni za manifest kama maskable na uhifadhi maudhui muhimu ndani ya "eneo salama" la katikati — takribani asilimia 80 ya katikati, yaani pambizo la ~asilimia 10 kila upande:
{ "src": "/android-chrome-512x512.png", "sizes": "512x512",
"type": "image/png", "purpose": "any maskable" }
Buni ukiwa na rangi ya mandharinyuma inayojaa kabisa na nembo ikiwa vizuri ndani ya pambizo hilo, ili hakuna umbo linalokata ndani yake.
theme-color: mwambaa unaozunguka aikoni
Si favicon yenyewe, lakini hukaa karibu nayo kwenye simu — theme-color hupaka rangi UI/mwambaa wa anwani wa kivinjari. Inaweza pia kuitikia mandhari:
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)"> <meta name="theme-color" content="#111316" media="(prefers-color-scheme: dark)">
Kile ambacho .ico halisi ina hasa
.ico sahihi ni kihifadhi kinachoshikilia bitmap kadhaa kwa mara moja — kwa kawaida pikseli 16, 32 na 48. Kivinjari huchagua ukubwa unaohitaji kwa uso husika (kichupo dhidi ya mwambaa wa alamisho dhidi ya njia ya mkato ya Windows), kwa hivyo halazimiki kamwe kupanua picha ya pikseli 16 au kupunguza picha ya pikseli 512. "favicon.ico" ambayo kwa kweli ni PNG moja iliyopewa jina jipya hupoteza hilo na huonekana laini kwa baadhi ya ukubwa. Kizalishaji hiki huandika ICO halisi ya ukubwa mbalimbali.
Kanuni za favicon za Google Search
Ili aikoni yako ionekane kando ya matokeo yako, Google inahitaji yote yafuatayo: favicon iishi kwenye URL thabiti; iwe mraba na mzidisho wa 48×48 (48, 96, 144…); iwe kwenye mpangishi uleule kama tovuti; ukurasa unaoipangisha uweze kuorodheshwa; na aikoni iwe wazi kimwonekano. Google huichukua na kuihifadhi kwa kitambazaji chake, kando na ukurasa — kwa hivyo baada ya badiliko, ruhusu siku hadi wiki na uthibitishe kuwa /favicon.ico inarudisha 200 kwa Googlebot.
Weka faili kuwa ndogo
- SVG: ondoa metadata na maoni ya kihariri; SVG safi ya aikoni mara nyingi iko chini ya 1 KB.
- ICO: 16/32/48 pekee — epuka kuongeza 64/128/256, ambazo huvimbisha faili bila faida.
- PNG: aikoni ya 512 ndiyo nzito zaidi; ipitishe kwenye kiboreshaji kisichopoteza ubora (lossless).
Ijaribie mahali inapoonekana kweli
Usitegemee kivinjari kimoja. Angalia: kichupo cha kawaida (mwanga na giza), alamisho, "Add to Home Screen" ya iOS, usakinishaji wa Android, na matokeo ya Google mara tu inapotambaza upya. Njia ya haraka ya kulazimisha usomaji safi wakati wa kujaribu ni dirisha la faragha pamoja na swali la ?v= kwenye URL za aikoni.