Ni ukubwa gani wa favicon unaohitaji mwaka 2026? Seti bora kabisa

Mwaka 2026 seti bora ya favicon ni: favicon.ico yenye picha za px 16, 32 na 48, PNG ya 96x96 (kwa Google Search), favicon ya SVG ya hiari, apple-touch-icon.png ya 180x180, na PNG za 192x192 na 512x512 (pamoja na maskable ya 512) zilizotangazwa kwenye web app manifest. Tile za Windows na ukubwa wa zamani wa Apple zinahitajika tu ikiwa ni lazima uunge mkono vifaa vya zamani sana. Kila kitu hapa chini kinaeleza sababu, kikiwa na jedwali la ukubwa, HTML tayari kutumika na makosa ya kawaida ya kuepuka.

Hali ya favicon zamani ilikuwa na mkanganyiko: kila kivinjari na mfumo wa uendeshaji uliomba ukubwa wake, jambo lililozaa vizuizi maarufu vya mistari 20 ndani ya <head>. Leo mengi ya hayo yamepitwa na wakati. Vivinjari vya kisasa hupunguza au kukuza aikoni moja nzuri, iOS inataka ukubwa mmoja, na Android husoma manifest. Makala hii inatenganisha kinachohitajika kweli na kile ambacho ni cha ziada tu.

Jibu fupi: seti bora ya faili za favicon

• favicon.ico (px 16, 32, 48 katika faili moja) kwenye saraka kuu ya tovuti. Vivinjari, visomaji vya feed na zana nyingi bado huomba /favicon.ico kiotomatiki.
• favicon.svg (ya hiari lakini inapendekezwa) kwa mwonekano safi katika ukubwa wowote na usaidizi wa hali ya giza.
• PNG 16x16, 32x32 na 96x96 kama mbadala wa wazi. Toleo la px 96 husaidia Google Search, inayohitaji kizidisho cha px 48.
• apple-touch-icon.png ya 180x180, isiyo wazi, bila uwazi (transparency).
• PNG za 192x192 na 512x512 ndani ya manifest.json, pamoja na aikoni ya maskable 512x512 kwa Android.
• Meta tag ya theme-color kwa kupaka rangi kiolesura cha kivinjari kwenye simu.
• Tile za Windows (px 70, 150, 310) pamoja na browserconfig.xml kwa Windows ya zamani na tovuti zilizobandikwa kwenye IE11 pekee.

Jedwali la ukubwa wa favicon: matumizi, majina ya faili na kipaumbele

Tumia jedwali hili kama orodha ya ukaguzi. "Inahitajika" inamaanisha tovuti ya kawaida itaonekana kuharibika au haijakamilika bila hiyo; "Inapendekezwa" inamaanisha ongezeko dhahiri la ubora; "Hiari" inamaanisha matumizi maalum au ya zamani.

favicon.ico: px 16, 32 na 48 katika faili moja

Faili ya ICO ni chombo kinachobeba picha kadhaa za bitmap. favicon.ico nzuri ina picha za 16x16, 32x32 na 48x48 ili kivinjari au mfumo wa uendeshaji uchague inayokaribiana zaidi. Iweke kwenye saraka kuu ya domeni yako (https://example.com/favicon.ico). Hata kama HTML yako inaelekeza kwingine, crawler nyingi, visomaji vya RSS na vivinjari vya zamani bado huomba URL hiyo hasa, hivyo kuwa nayo huepusha kelele za 404 kwenye kumbukumbu zako.

Usibadilishe tu jina la PNG kuwa .ico. Vivinjari vingi huvumilia, lakini baadhi ya zana hukataa na unapoteza faida ya azimio nyingi. Hamisha ICO halisi.

Favicon za PNG: px 16, 32 na 96

Viungo vya PNG vyenye sizes wazi humruhusu kivinjari kuchagua bitmap bora bila kuchambua ICO. Kwa vitendo, 32x32 inashughulikia vichupo vya high-DPI, na 16x16 karibu haihitajiki tena leo. Ukubwa wa 96x96 unafaa kuongezwa kwa sababu Google Search huonyesha favicon kando ya matokeo na inahitaji aikoni ya mraba ambayo ukubwa wake ni kizidisho cha px 48 (48x48, 96x96, 144x144 na kuendelea). Faili ya px 96 humpa Google chanzo kikali zaidi kuliko ya px 48 inaposhusha ubora kwa matokeo ya simu.

Kidokezo cha usanifu: kwenye px 16, maelezo madogo hupotea. Tumia umbo nene na rahisi, utofautishaji mkubwa na maandishi kidogo au bila kabisa. Unaweza kurekebisha na kuhakiki aikoni yako kwenye kihariri cha MakeFav kabla ya kuhamisha.

Favicon ya SVG na hali ya giza

Favicon ya SVG ni faili moja ndogo inayobaki kali kwenye msongamano wowote wa skrini. Vivinjari vinavyotumia Chromium na Firefox vinaiunga mkono. Usaidizi wa Safari kihistoria umekuwa na mipaka, kwa hivyo usitegemee SVG peke yake: weka mbadala za ICO na PNG.

Faida kubwa zaidi ni uwekaji wa mandhari. Kwa kuwa SVG inaweza kuwa na CSS, unaweza kurekebisha aikoni kulingana na mpangilio wa rangi wa mtumiaji kwa kutumia prefers-color-scheme:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .bg { fill: #0f172a; }
    .fg { fill: #ffffff; }
    @media (prefers-color-scheme: dark) {
      .bg { fill: #ffffff; }
      .fg { fill: #0f172a; }
    }
  </style>
  <rect class="bg" width="32" height="32" rx="6"/>
  <circle class="fg" cx="16" cy="16" r="8"/>
</svg>

Kumbuka kwamba media query huakisi mandhari ya kivinjari au mfumo wa uendeshaji, ambayo ndiyo upau wa vichupo hutumia. Haifuati kitufe cha kubadilisha mandhari kwenye tovuti yako mwenyewe.

Hitilafu moja inayojulikana: ICO na SVG zikiorodheshwa pamoja, Chrome inaweza kuchagua ICO. Kutangaza ICO kwa sizes="32x32" na kuorodhesha SVG baadaye hufanya Chrome ipendelee SVG, kama inavyoonyeshwa kwenye msimbo hapa chini.

Apple touch icon: 180x180 na ukubwa wa zamani

Mtumiaji anapoongeza tovuti yako kwenye skrini ya mwanzo ya iOS au iPadOS, Safari hutumia apple-touch-icon. Leo PNG moja ya px 180x180 inatosha: iOS huipunguza kwa vifaa vya zamani na iPad. Iite apple-touch-icon.png na iweke kwenye saraka kuu; iOS hata hutafuta faili hiyo kwa chaguomsingi ikiwa hakuna link tag.

Sheria za aikoni ya Apple:

• Bila uwazi. iOS hujaza pikseli zenye uwazi rangi nyeusi, hivyo nembo yenye uwazi mara nyingi hugeuka doa jeusi. Ongeza rangi ya mandharinyuma isiyobadilika.
• Bila pembe zilizozungushwa. iOS hutumia barakoa yake ya pembe zilizozungushwa. Toa mraba kamili.
• Weka maudhui muhimu mbali na kingo kabisa, kwa kuwa pembe hukatwa.

Ni lini unahitaji ukubwa wa zamani (57, 72, 76, 114, 120, 144, 152, 167)? Ikiwa tu unaunga mkono iOS 6 au ya awali, au unataka udhibiti kamili wa pikseli kwa kila kifaa kwa iPad Pro (px 167) na iPad (px 152). Kwa karibu kila tovuti mwaka 2026, faili ya 180x180 pekee inatosha. Usanidi wa utangamano wa juu kabisa hapa chini unajumuisha chache kwa ukamilifu.

Aikoni za Android na PWA: 192, 512 na maskable

Chrome kwenye Android na vivinjari vingine vinavyounga mkono PWA husoma aikoni kutoka kwenye web app manifest, si kutoka <link rel="icon">. Ili iweze kusakinishwa unahitaji angalau PNG ya 192x192 na ya 512x512. Aikoni ya px 192 hutumika kwenye skrini ya mwanzo na kizindua programu; aikoni ya px 512 huonekana kwenye skrini za splash na madirisha ya usakinishaji.

Aikoni za maskable na eneo salama

Aikoni zinazobadilika za Android zinaweza kukatwa kuwa duara, squircle au umbo jingine kulingana na kifaa. Aikoni ya maskable imeundwa ili ikatwe kwa usalama: maudhui muhimu lazima yakae ndani ya eneo salama, yaani duara lililo katikati lenye kipenyo cha 80% ya picha (kipenyo nusu ni 40% ya upande). Kwa faili ya 512x512, hiyo inamaanisha kuweka nembo yako ndani ya duara lenye kipenyo cha takriban px 410, na kupanua rangi ya mandharinyuma hadi kingo zote nne ili pasiwe na mapengo baada ya kuwekwa barakoa.

Tangaza aikoni ya maskable kama kipengee chake chenyewe kwa "purpose": "maskable". Epuka "any maskable" kwenye faili moja: nafasi ya pembeni inayohitajika kwa barakoa huonekana ndogo mno aikoni inapoonyeshwa bila barakoa.

Mfano wa manifest.json

{
  "name": "Example App",
  "short_name": "Example",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0f172a",
  "icons": [
    {
      "src": "/web-app-manifest-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/web-app-manifest-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/maskable-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

Toa faili kama application/manifest+json (au application/json) na iunganishe kutoka kila ukurasa kwa <link rel="manifest" href="/manifest.json">. Miradi mingine huiita site.webmanifest; jina halijalishi, kiungo ndicho muhimu.

Tile za Windows na browserconfig.xml

Windows 8.1 na 10 huruhusu watumiaji kubandika tovuti kwenye menyu ya Start, na IE11 pamoja na Edge ya zamani husoma picha za tile kutoka browserconfig.xml. Ukubwa wa kawaida ni 70x70 (ndogo), 150x150 (wastani), 310x150 (pana) na 310x310 (kubwa). Edge inayotumia Chromium hutumia manifest na favicon za kawaida badala yake, kwa hivyo hii ni huduma ya zamani. Iweke tu ikiwa hadhira yako bado inajumuisha mifumo ya zamani ya Windows, kwa mfano katika mazingira ya mashirika.

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/mstile-70x70.png"/>
      <square150x150logo src="/mstile-150x150.png"/>
      <wide310x150logo src="/mstile-310x150.png"/>
      <square310x310logo src="/mstile-310x310.png"/>
      <TileColor>#0f172a</TileColor>
    </tile>
  </msapplication>
</browserconfig>

theme-color: kupaka rangi kiolesura cha kivinjari

Meta tag ya theme-color huvielekeza vivinjari vya simu (na baadhi ya vya desktop) rangi ya kutumia kwa upau wa anwani au upau wa kichwa. Si favicon, lakini ni sehemu ya seti ileile ya chapa. Unaweza kutoa thamani tofauti kwa hali ya mwanga na giza:

<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

Usanidi wa kisasa wa msingi dhidi ya utangamano wa juu kabisa

Usanidi wa kisasa wa msingi (unapendekezwa kwa tovuti nyingi)

Faili tano hushughulikia zaidi ya 99% ya matumizi halisi: favicon.ico, favicon.svg, apple-touch-icon.png (180x180), na aikoni mbili za manifest (192 na 512). Ongeza PNG ya 96x96 ikiwa kuonekana kwenye Google Search ni muhimu, na aikoni ya maskable ikiwa unatoa PWA.

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">

Usanidi wa utangamano wa juu kabisa

Chagua huu unapohudumia hadhira pana au ya mashirika, au unapotaka kila mteja anayewezekana ashughulikiwe. Unaongeza ukubwa wa PNG wa wazi, ukubwa wa zamani wa Apple, tile za Windows na rangi za mandhari.

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Classic and modern browser icons -->
  <link rel="icon" href="/favicon.ico" sizes="32x32">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">

  <!-- Apple -->
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">

  <!-- Android / PWA -->
  <link rel="manifest" href="/manifest.json">
  <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
  <meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

  <!-- Windows (legacy) -->
  <meta name="msapplication-config" content="/browserconfig.xml">
  <meta name="msapplication-TileColor" content="#0f172a">

  <title>Example</title>
</head>

Zingatia njia za root-relative zinazoanza kwa /. Zinafanya kazi kwenye kina chochote cha ukurasa, jambo linalotuleta kwenye makosa ya kawaida zaidi.

Makosa ya kawaida ya favicon na jinsi ya kuyarekebisha

1. Njia zisizo sahihi

Kiungo kama href="favicon.ico" hutafsiriwa kulingana na URL ya sasa, hivyo hufanya kazi kwenye / lakini huvunjika kwenye /blog/post/. Tumia root-relative (/favicon.ico) au URL kamili. Pia hakikisha faili zipo kweli: fungua kila URL moja kwa moja kwenye kivinjari na uhakikishe inarudisha HTTP 200, si uelekezaji kwenye ukurasa wa 404 au ukuta wa kuingia.

2. Sifa ya sizes inayokosekana au isiyo sahihi

Bila sizes, vivinjari lazima vipakue aikoni ili kuzikagua, na vinaweza kuchagua isiyo sahihi. Tangaza sizes kila mara kwenye viungo vya PNG na hakikisha inalingana na vipimo halisi vya pikseli. Faili iliyoandikwa 32x32 ambayo kwa kweli ni 64x64 husababisha matokeo yasiyolingana.

3. Uhifadhi wa akiba wa muda mrefu

Vivinjari huhifadhi favicon kwenye akiba kwa muda mrefu, mara nyingi bila kutegemea akiba ya ukurasa. Baada ya kubadilisha chapa, aikoni ya zamani inaweza kudumu kwa siku kadhaa. Badilisha jina la faili au ongeza query string ya toleo (/favicon.ico?v=2) na usasishe link tag. Kupakia upya kwa nguvu mara nyingi hakusasishi aikoni ya kichupo; kufungua URL ya aikoni moja kwa moja na kuipakia upya kwa kawaida hufanya kazi.

4. Picha zisizo za mraba

Favicon lazima ziwe za mraba. Nembo ya mstatili hunyooshwa, hukatwa au hupewa kingo tupu kwa namna isiyotabirika. Sanifu alama maalum ya mraba, kama herufi ya mwanzo au ishara, badala ya kupunguza wordmark pana.

5. Apple touch icon zenye uwazi zinazogeuka nyeusi

iOS hujaza uwazi rangi nyeusi. Ipe aikoni ya 180x180 mandharinyuma isiyo wazi na usizungushe pembe mapema.

6. Aikoni za maskable bila eneo salama

Nembo ikigusa kingo za aikoni ya maskable, Android itaikata. Iweke ndani ya duara la kati la 80% na ujaze turubai nzima kwa rangi ya mandharinyuma.

7. Kuzuia aikoni kwa crawler

Ikiwa robots.txt inakataza njia ya favicon yako, Google haiwezi kuipata na itaonyesha aikoni ya kawaida ya dunia kwenye matokeo ya utafutaji. Kumbuka pia kwamba Google inahitaji favicon kwenye host ileile na ukurasa na huisasisha mara chache tu, hivyo mabadiliko yanaweza kuchukua siku au wiki kuonekana.

8. Kusahau kiungo cha manifest au purposes

Manifest isiyounganishwa, au isiyo na aikoni za px 192 na 512, huzuia ombi la usakinishaji kwenye Chrome. Ihakiki kwenye zana za msanidi za kivinjari chako chini ya kichupo cha Application.

Tengeneza seti nzima kwa kubofya mara moja

Kuunda faili kumi na mbili kwa mkono kwenye kihariri cha picha, kisha kubadilisha kuwa ICO na kuandika manifest, ni kazi ya kuchosha na yenye uwezekano wa makosa. MakeFav hutengeneza faili zote zilizo hapo juu kutoka kwenye picha moja, maandishi au emoji: favicon.ico yenye ukubwa mbalimbali, PNG, SVG, Apple touch icon, PNG za 192/512, aikoni ya maskable, tile za Windows, manifest.json na browserconfig.xml, pamoja na kijisehemu cha HTML tayari kubandikwa, vyote katika upakuaji mmoja wa ZIP. Unaweza kurekebisha mandharinyuma, nafasi ya pembeni na umbo kwenye kihariri, kuthibitisha tovuti iliyopo kwa kikagua favicon, na kuendesha utengenezaji kiotomatiki kupitia rasilimali za wasanidi.

Orodha ya ukaguzi wa uwekaji

1. Pakia faili zote kwenye saraka kuu ya tovuti yako.
2. Bandika kijisehemu cha HTML ndani ya <head> ya kila ukurasa (au layout yako ya pamoja).
3. Hakikisha njia ni root-relative na zinarudisha HTTP 200.
4. Angalia hali ya mwanga na giza, usakinishaji kwenye skrini ya mwanzo ya iOS na usakinishaji wa Android.
5. Endesha kikagua ili kunasa ukubwa unaokosekana au usiolingana.
6. Vunja akiba kwa kutumia string ya toleo ikiwa umebadilisha aikoni ya zamani.

Maswali yanayoulizwa mara kwa mara

Je, bado nahitaji favicon.ico mwaka 2026?

Ndiyo. Ingawa vivinjari vya kisasa vinakubali PNG na SVG, crawler nyingi, visomaji vya feed, programu za barua pepe na vivinjari vya zamani bado huomba /favicon.ico moja kwa moja. ICO yenye ukubwa mbalimbali yenye picha za px 16, 32 na 48 ni faili ndogo inayozuia aikoni zinazokosekana na makosa ya 404.

Favicon ya Google Search inapaswa kuwa na ukubwa gani?

Google inahitaji favicon ya mraba ambayo ukubwa wake ni kizidisho cha px 48, angalau 48x48. PNG ya 96x96 ni chaguo salama, na SVG pia inaungwa mkono. Google pia inahitaji faili iweze kupitiwa na crawler, kwa hivyo usiizuie kwenye robots.txt. Masasisho yanaweza kuchukua siku au wiki kuonekana.

Je, 180x180 inatosha kwa Apple touch icon?

Kwa karibu tovuti zote, ndiyo. iOS na iPadOS hupunguza PNG ya 180x180 kwa kila kifaa cha sasa. Ukubwa wa zamani (px 57 hadi 152) unahusu tu matoleo ya zamani sana ya iOS. Kumbuka kutumia mandharinyuma isiyo wazi ili aikoni isigeuke nyeusi.

Aikoni ya maskable ni nini na je, ninaihitaji?

Aikoni ya maskable ni PNG ya 512x512 iliyoundwa kwa maumbo ya aikoni zinazobadilika za Android. Maudhui yake muhimu yanakaa ndani ya duara lenye kipenyo cha 80% katikati, na mandharinyuma hujaza mraba mzima. Unaihitaji tu ikiwa unatoa PWA inayoweza kusakinishwa, lakini inafanya aikoni ionekane ya asili badala ya kukaa ndani ya duara jeupe.

Kwa nini favicon yangu ya zamani bado inaonekana baada ya kuibadilisha?

Vivinjari huhifadhi favicon kwenye akiba kando na kwa muda mrefu. Badilisha jina la faili au ongeza query string ya toleo kama ?v=2, sasisha link tag, kisha fungua URL ya aikoni moja kwa moja na uipakie upya. Injini za utafutaji zinaweza kuchukua muda mrefu zaidi kusasisha nakala yao.