Aling mga laki ng favicon ang kailangan mo sa 2026? Ang perpektong set

Sa 2026, ang perpektong set ng favicon ay: isang favicon.ico na naglalaman ng mga larawang 16, 32 at 48 px, isang 96x96 PNG (para sa Google Search), isang opsyonal na SVG favicon, isang 180x180 apple-touch-icon.png, at mga 192x192 at 512x512 PNG (kasama ang isang maskable 512) na idineklara sa isang web app manifest. Kailangan lamang ang Windows tiles at ang mga lumang laki ng Apple kung kailangan mong suportahan ang mga napakaluma nang device. Ipinaliliwanag sa ibaba kung bakit, kasama ang talahanayan ng mga laki, handa nang gamiting HTML at mga karaniwang pagkakamaling dapat iwasan.

Dati ay magulo ang larangan ng favicon: bawat browser at operating system ay humihingi ng sarili nitong laki, kaya nagkaroon ng kilalang 20-linyang <head> na mga block. Ngayon, karamihan niyan ay luma na. Nag-i-scale na ang mga modernong browser ng isang magandang icon, isang laki lang ang gusto ng iOS, at binabasa ng Android ang manifest. Pinaghihiwalay ng artikulong ito ang talagang kailangan sa mga nakabubuti lang kung mayroon.

Ang maikling sagot: ang perpektong set ng mga file ng favicon

• favicon.ico (16, 32, 48 px sa iisang file) sa root ng site. Awtomatiko pa ring hinihingi ng mga browser, feed reader at maraming tool ang /favicon.ico.
• favicon.svg (opsyonal pero inirerekomenda) para sa malinaw na pagpapakita sa anumang laki at suporta sa dark mode.
• PNG 16x16, 32x32 at 96x96 bilang tahasang fallback. Nakatutulong ang 96 px na bersyon sa Google Search, na nangangailangan ng multiple ng 48 px.
• apple-touch-icon.png na 180x180, opaque, walang transparency.
• 192x192 at 512x512 PNG sa manifest.json, kasama ang isang maskable 512x512 na icon para sa Android.
• theme-color meta tag para sa pagkulay ng browser UI sa mobile.
• Windows tiles (70, 150, 310 px) na may browserconfig.xml para lang sa lumang Windows at mga pinned na site sa IE11.

Talahanayan ng mga laki ng favicon: gamit, pangalan ng file at priyoridad

Gamitin ang talahanayang ito bilang checklist. Ang "Kinakailangan" ay nangangahulugang magmumukhang sira o hindi tapos ang isang karaniwang site kung wala ito; ang "Inirerekomenda" ay nangangahulugang malinaw na pagbuti ng kalidad; ang "Opsyonal" ay nangangahulugang espesyal o lumang gamit.

favicon.ico: 16, 32 at 48 px sa iisang file

Ang ICO file ay isang container na may hawak na ilang bitmap. Ang isang magandang favicon.ico ay may kasamang mga larawang 16x16, 32x32 at 48x48 para mapili ng browser o OS ang pinakamalapit na tugma. Ilagay ito sa root ng iyong domain (https://example.com/favicon.ico). Kahit sa ibang lugar nakaturo ang iyong HTML, maraming crawler, RSS reader at lumang browser ang humihingi pa rin ng eksaktong URL na iyon, kaya kapag mayroon ka nito, iwas ka sa mga 404 sa iyong mga log.

Huwag basta palitan ang extension ng isang PNG para maging .ico. Tinatanggap iyon ng karamihan ng browser, pero tinatanggihan ito ng ilang tool at mawawala ang benepisyo ng multi-resolution. Mag-export ng tunay na ICO.

Mga PNG favicon: 16, 32 at 96 px

Ang mga PNG link na may tahasang sizes ay hinahayaan ang browser na piliin ang pinakamahusay na bitmap nang hindi binabasa ang ICO. Sa praktika, sakop ng 32x32 ang mga high-DPI na tab, at halos hindi na kailangan ang 16x16 ngayon. Sulit idagdag ang 96x96 dahil ipinapakita ng Google Search ang mga favicon sa tabi ng mga resulta at nangangailangan ito ng parisukat na icon na ang laki ay multiple ng 48 px (48x48, 96x96, 144x144 at iba pa). Mas malinaw na pinagmulan ang 96 px na file para sa Google kaysa sa 48 px kapag binabawasan nito ang laki para sa mga resulta sa mobile.

Tip sa disenyo: sa 16 px, nawawala ang maliliit na detalye. Gumamit ng matapang at simpleng hugis, mataas na contrast at kaunti o walang teksto. Maaari mong ayusin at i-preview ang iyong icon sa MakeFav editor bago mag-export.

SVG favicon at dark mode

Ang SVG favicon ay iisang maliit na file na nananatiling malinaw sa anumang density ng screen. Sinusuportahan ito ng mga browser na nakabatay sa Chromium at ng Firefox. Limitado sa kasaysayan ang suporta ng Safari, kaya huwag umasa sa SVG lamang: panatilihin ang mga fallback na ICO at PNG.

Ang pinakamalaking bentahe ay ang pag-theme. Dahil maaaring maglaman ang SVG ng CSS, maaari mong iangkop ang icon sa color scheme ng user gamit ang 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>

Tandaan na ang media query ay sumasalamin sa theme ng browser o OS, na siyang ginagamit ng tab bar. Hindi nito sinusundan ang theme toggle sa sarili mong website.

Isang kilalang kakaibang gawi: kapag nakalista ang parehong ICO at SVG, maaaring piliin ng Chrome ang ICO. Kapag idineklara ang ICO na may sizes="32x32" at inilista ang SVG pagkatapos, mas pipiliin ng Chrome ang SVG, gaya ng ipinapakita sa code sa ibaba.

Apple touch icon: 180x180 at ang mga lumang laki

Kapag idinagdag ng user ang iyong site sa home screen ng iOS o iPadOS, ginagamit ng Safari ang apple-touch-icon. Ngayon, sapat na ang iisang 180x180 px na PNG: binabawasan ito ng iOS para sa mas lumang device at mga iPad. Pangalanan itong apple-touch-icon.png at ilagay sa root; hinahanap pa nga ng iOS ang file na iyon bilang default kung walang link tag.

Mga patakaran para sa Apple icon:

• Walang transparency. Pinupunan ng iOS ng itim ang mga transparent na pixel, kaya madalas na nagiging itim na bukol ang transparent na logo. Magdagdag ng solidong kulay ng background.
• Walang bilugang sulok. Naglalapat ang iOS ng sarili nitong bilugang mask. Magbigay ng buong parisukat.
• Ilayo ang mahahalagang nilalaman sa mismong mga gilid, dahil pinuputol ang mga sulok.

Kailan mo kailangan ang mga lumang laki (57, 72, 76, 114, 120, 144, 152, 167)? Kung sinusuportahan mo lang ang iOS 6 o mas luma, o gusto mo ng eksaktong kontrol sa pixel bawat device para sa iPad Pro (167 px) at iPad (152 px). Para sa halos lahat ng site sa 2026, sapat na ang 180x180 na file lang. Ang setup para sa pinakamataas na compatibility sa ibaba ay may ilan para sa kumpleto.

Mga icon para sa Android at PWA: 192, 512 at maskable

Binabasa ng Chrome sa Android at iba pang browser na may kakayahang PWA ang mga icon mula sa web app manifest, hindi mula sa <link rel="icon">. Para ma-install, kailangan mo ng hindi bababa sa isang 192x192 at isang 512x512 na PNG. Ginagamit ang 192 px na icon sa home screen at app launcher; lumalabas ang 512 px na icon sa mga splash screen at install dialog.

Mga maskable icon at ang safe zone

Ang mga adaptive icon ng Android ay maaaring i-crop sa bilog, squircle o iba pang hugis depende sa device. Ang maskable na icon ay dinisenyo para ligtas na ma-crop: ang mahalagang nilalaman ay dapat nasa loob ng safe zone, isang nakasentrong bilog na may diameter na 80% ng larawan (ang radius ay katumbas ng 40% ng gilid). Para sa 512x512 na file, nangangahulugan iyon na panatilihin ang iyong logo sa loob ng bilog na humigit-kumulang 410 px ang diameter, at palawakin ang kulay ng background hanggang sa apat na gilid para walang puwang na lumitaw pagkatapos ng masking.

Ideklara ang maskable icon bilang sarili nitong entry na may "purpose": "maskable". Iwasan ang "any maskable" sa iisang file: masyadong maliit tingnan ang padding na kailangan sa masking kapag ipinapakita ang icon nang walang mask.

Halimbawang 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"
    }
  ]
}

I-serve ang file bilang application/manifest+json (o application/json) at i-link ito sa bawat pahina gamit ang <link rel="manifest" href="/manifest.json">. Pinapangalanan ito ng ilang proyekto bilang site.webmanifest; hindi mahalaga ang pangalan, ang link ang mahalaga.

Mga Windows tile at browserconfig.xml

Hinahayaan ng Windows 8.1 at 10 ang mga user na i-pin ang isang site sa Start menu, at binabasa ng IE11 at lumang Edge ang mga larawan ng tile mula sa browserconfig.xml. Ang mga karaniwang laki ay 70x70 (maliit), 150x150 (katamtaman), 310x150 (malapad) at 310x310 (malaki). Ang Edge na nakabatay sa Chromium ay gumagamit ng manifest at mga karaniwang favicon, kaya legacy na feature na ito. Isama lamang ito kung kabilang pa sa iyong audience ang mga lumang setup ng Windows, halimbawa sa mga corporate na kapaligiran.

<?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: pagkulay sa browser UI

Sinasabi ng theme-color meta tag sa mga mobile browser (at ilang desktop) kung anong kulay ang gagamitin para sa address bar o title bar. Hindi ito favicon, pero bahagi ito ng parehong set ng branding. Maaari kang magbigay ng magkahiwalay na halaga para sa light at dark mode:

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

Minimal na modernong setup vs. pinakamataas na compatibility

Minimal na modernong setup (inirerekomenda para sa karamihan ng site)

Limang file ang sumasakop sa mahigit 99% ng totoong gamit: favicon.ico, favicon.svg, apple-touch-icon.png (180x180), at ang dalawang icon ng manifest (192 at 512). Idagdag ang 96x96 PNG kung mahalaga ang visibility sa Google Search, at isang maskable icon kung maglalabas ka ng 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">

Setup para sa pinakamataas na compatibility

Piliin ito kapag malawak o enterprise ang iyong audience, o kapag gusto mong sakop ang bawat posibleng client. Nagdaragdag ito ng tahasang mga laki ng PNG, mga lumang laki ng Apple, mga Windows tile at mga kulay ng theme.

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

Pansinin ang mga root-relative na path na nagsisimula sa /. Gumagana ang mga ito sa anumang lalim ng pahina, na naghahatid sa atin sa mga pinakakaraniwang pagkakamali.

Mga karaniwang pagkakamali sa favicon at paano ayusin ang mga ito

1. Maling mga path

Ang link na gaya ng href="favicon.ico" ay nagre-resolve nang relatibo sa kasalukuyang URL, kaya gumagana ito sa / pero pumapalya sa /blog/post/. Gumamit ng root-relative (/favicon.ico) o absolute na URL. Tiyakin din na talagang umiiral ang mga file: buksan ang bawat URL nang direkta sa browser at siguraduhing nagbabalik ito ng HTTP 200, hindi redirect sa 404 na pahina o login wall.

2. Nawawala o maling sizes attribute

Kung walang sizes, kailangang i-download ng mga browser ang mga icon para suriin ang mga ito, at maaaring mapili nila ang mali. Palaging ideklara ang sizes sa mga PNG link at tiyaking tugma ito sa totoong sukat ng pixel. Ang file na may label na 32x32 pero 64x64 talaga ay nagdudulot ng hindi pare-parehong resulta.

3. Agresibong caching

Matagal na ikinakaching ng mga browser ang mga favicon, madalas na hiwalay sa cache ng pahina. Pagkatapos ng rebrand, maaaring manatili ang lumang icon nang ilang araw. Palitan ang pangalan ng file o magdagdag ng version query string (/favicon.ico?v=2) at i-update ang mga link tag. Madalas na hindi nare-refresh ng hard reload ang icon ng tab; kadalasang gumagana ang direktang pagbukas sa URL ng icon at pag-reload nito.

4. Mga hindi parisukat na larawan

Dapat parisukat ang mga favicon. Ang parihabang logo ay mauunat, made-crop o lalagyan ng letterbox nang hindi mahuhulaan. Magdisenyo ng nakalaang parisukat na marka, gaya ng inisyal o simbolo, sa halip na paliitin ang malapad na wordmark.

5. Mga transparent na Apple touch icon na nagiging itim

Pinupunan ng iOS ng itim ang transparency. Bigyan ng opaque na background ang 180x180 na icon at huwag nang paikutin ang mga sulok.

6. Mga maskable icon na walang safe zone

Kung dumidikit ang logo sa mga gilid ng maskable icon, puputulin ito ng Android. Panatilihin ito sa loob ng gitnang 80% na bilog at punuin ng kulay ng background ang buong canvas.

7. Pagharang sa mga icon mula sa mga crawler

Kung ipinagbabawal ng robots.txt ang path ng iyong favicon, hindi ito makukuha ng Google at magpapakita ito ng generic na icon ng globo sa mga resulta ng paghahanap. Tandaan din na kailangan ng Google ang favicon sa parehong host ng pahina at paminsan-minsan lang nito ito nire-refresh, kaya maaaring abutin ng ilang araw o linggo bago lumabas ang mga pagbabago.

8. Pagkalimot sa link ng manifest o sa mga purpose

Ang manifest na hindi naka-link, o walang mga 192 at 512 px na icon, ay pumipigil sa install prompt sa Chrome. I-validate ito sa developer tools ng iyong browser sa ilalim ng Application tab.

I-generate ang buong set sa isang click

Nakakapagod at madaling magkamali ang paggawa ng isang dosenang file nang mano-mano sa image editor, pagkatapos ay pag-convert sa ICO at pagsulat ng manifest. Ang MakeFav ay bumubuo ng lahat ng file sa itaas mula sa isang larawan, teksto o emoji: multi-size na favicon.ico, mga PNG, SVG, Apple touch icon, mga 192/512 PNG, isang maskable icon, mga Windows tile, manifest.json at browserconfig.xml, kasama ang handang i-paste na HTML snippet, lahat sa iisang ZIP download. Maaari mong ayusin ang background, padding at hugis sa editor, suriin ang umiiral na site gamit ang favicon checker, at i-automate ang pag-generate sa pamamagitan ng mga resource para sa developer.

Checklist sa deployment

1. I-upload ang lahat ng file sa root ng iyong site.
2. I-paste ang HTML snippet sa <head> ng bawat pahina (o ng iyong shared layout).
3. Tiyaking root-relative ang mga path at nagbabalik ng HTTP 200.
4. Suriin ang light at dark mode, isang pag-install sa home screen ng iOS at isang pag-install sa Android.
5. Patakbuhin ang checker para mahuli ang mga nawawala o hindi tugmang laki.
6. I-bust ang mga cache gamit ang version string kung pinalitan mo ang lumang icon.

Mga madalas itanong

Kailangan ko pa ba ng favicon.ico sa 2026?

Oo. Bagaman tumatanggap ng PNG at SVG ang mga modernong browser, maraming crawler, feed reader, email client at lumang browser ang direktang humihingi pa rin ng /favicon.ico. Ang multi-size na ICO na may mga larawang 16, 32 at 48 px ay maliit na file na pumipigil sa mga nawawalang icon at 404 na error.

Anong laki ang dapat ng favicon para sa Google Search?

Nangangailangan ang Google ng parisukat na favicon na ang laki ay multiple ng 48 px, hindi bababa sa 48x48. Ligtas na pagpipilian ang 96x96 na PNG, at sinusuportahan din ang SVG. Kailangan ding ma-crawl ang file, kaya huwag itong harangin sa robots.txt. Maaaring abutin ng ilang araw o linggo bago lumabas ang mga update.

Sapat na ba ang 180x180 para sa Apple touch icon?

Para sa halos lahat ng site, oo. Binabawasan ng iOS at iPadOS ang laki ng 180x180 na PNG para sa bawat kasalukuyang device. Mahalaga lang ang mga mas lumang laki (57 hanggang 152 px) para sa napakalumang bersyon ng iOS. Tandaang gumamit ng opaque na background para hindi maging itim ang icon.

Ano ang maskable icon at kailangan ko ba nito?

Ang maskable icon ay isang 512x512 na PNG na dinisenyo para sa mga hugis ng adaptive icon ng Android. Ang mahalagang nilalaman nito ay nasa loob ng bilog na may 80% diameter sa gitna, at pinupunan ng background ang buong parisukat. Kailangan mo lang ito kung nag-aalok ka ng mai-install na PWA, pero ginagawa nitong mukhang native ang icon sa halip na nakalagay sa puting bilog.

Bakit lumalabas pa rin ang luma kong favicon matapos kong palitan?

Hiwalay at matagal na ikinakaching ng mga browser ang mga favicon. Palitan ang pangalan ng file o magdagdag ng version query string gaya ng ?v=2, i-update ang mga link tag, at pagkatapos ay direktang buksan ang URL ng icon at i-reload ito. Maaaring mas matagal bago ma-refresh ng mga search engine ang sarili nilang kopya.