Ipinaliwanag ang mga format ng favicon: ICO, PNG, SVG at ang kailangan ng mga browser

Bakit kakaibang komplikado pa rin ang mga favicon

Mukhang isang maliit na larawan lang ang favicon, pero nasa salubungan ito ng interface ng browser, bookmarks, tabs, pinned shortcuts, resulta ng paghahanap, mobile home screens at mga install ng progressive web app. Bawat konteksto ay may bahagyang magkakaibang inaasahan.

Kaya madalas magulong pakinggan ang payo tungkol sa favicon. May ilang team na naglalabas lang ng isang favicon.ico dahil sapat na iyon dati. Ang iba naman ay gumagawa ng isang dosenang file nang hindi alam kung alin talaga ang ginagamit. Mas maliit ang makatuwirang gitna: unawain kung saan mahusay ang ICO, PNG at SVG, pagkatapos ay maglabas ng compact na set na sumasaklaw sa kasalukuyang mga browser at karaniwang konteksto ng device.

Hindi lugar ang mga favicon para ipakitang-gilas ang isang image pipeline. Dito mas mainam ang maging simple, malinaw at compatible.

ICO: ang lumang format na ayaw mawala

Ang ICO ang klasikong Windows icon container. Maaari itong maglaman ng ilang bitmap image sa magkakaibang laki, karaniwang 16×16, 32×32 at 48×48 pixels. Mahalaga iyon dahil maaaring i-render ang favicon nang napakaliit sa browser tab, mas malaki sa bookmark list, at iba muli sa Windows shortcuts.

Ang mahalagang detalye ay container ang ICO, hindi simpleng isang larawan lang. Karaniwang naglalaman ang magandang favicon.ico ng maraming raster size para makapili ang browser o operating system ng pinakamalapit na tugma sa halip na mag-scale ng iisang napakaliit na bitmap.

Kapaki-pakinabang pa rin ang ICO sa tatlong dahilan:

• Maaaring awtomatikong humiling ang mga browser ng /favicon.ico, kahit hindi mo ito i-link sa iyong HTML.
• Inaasahan pa rin ito ng ilang mas lumang browser at integration.
• Isa itong ligtas na fallback kapag hindi pinansin ang mas bagong mga deklarasyon ng icon.

Hindi ibig sabihin nito na ICO lang dapat ang iyong icon. Mahirap itong i-edit, hindi gaanong palakaibigan sa mga modernong workflow, at mahina bilang source of truth para sa isang brand mark. Ituring ito bilang compatibility fallback.

Sa praktika, maglagay ng tunay na /favicon.ico sa root ng site. Huwag mag-serve ng 404 doon maliban kung gusto mo ng maingay na logs at hindi kinakailangang browser retries.

PNG: ang maaasahang workhorse

Ang PNG pa rin ang pinakapredictable na raster format para sa mga favicon at touch icon. Sinusuportahan nito ang transparency, malawak ang suporta, at pare-pareho ang kilos sa mga browser at platform.

Para sa mga favicon, kapaki-pakinabang ang PNG kapag gusto mo ng malinaw na pixel-sized icons gaya ng 32×32 o 48×48. Para sa mobile home screen icons, halos mandatory ang PNG sa ilang environment. Halimbawa, ang Apple touch icons ay nakabatay sa PNG sa normal na production use.

May ilang praktikal na panuntunang nakatutulong:

• Mag-export mula sa vector source, hindi mula sa bitmap na maliit na sa simula.
• Tiyaking nababasa ang icon sa 16×16 bago alalahanin ang mas malalaking size.
• Magdagdag ng sapat na padding para hindi magmukhang naputol ang mark sa rounded o masked contexts.
• Iwasan ang maliliit na text, maninipis na linya at detalyadong ilustrasyon.

Karaniwang hindi kailangang pagtuunan nang sobra ang PNG compression para sa mga favicon dahil napakaliit ng mga file. Gayunpaman, huwag maglabas ng 500 KB touch icon dahil diretso itong galing sa design export. Kung sinusuri mo na rin ang mas malawak na pagpili ng larawan, nalalapat din dito ang parehong disiplinadong pag-iisip mula sa mga desisyon sa image format sa modernong web: piliin ang format ayon sa trabaho, hindi dahil uso ito.

SVG: ang moderno at flexible na opsyon

Kaakit-akit ang mga SVG favicon dahil resolution-independent ang mga ito. Maaaring malinis na ma-render ang iisang maliit na file sa maraming laki, at maaari itong direktang i-edit sa code o i-export mula sa design software.

Sinusuportahan ng mga modernong bersyon ng Chromium, Firefox at Safari ang SVG favicons. Ginagawa nitong magandang primary favicon format ang SVG para sa maraming site, lalo na kapag ang icon ay simpleng logo, glyph o geometric mark.

Pero may mga caveat ang mga SVG favicon.

Una, dapat self-contained ang SVG. Huwag umasa sa external fonts, remote images o scripts. Naglalapat ang mga browser ng restrictions sa SVG na ginagamit bilang larawan, at kahit gumana ang isang bagay sa isang browser, maaari itong pumalya sa iba.

Ikalawa, panatilihin itong simple sa paningin. Hindi mahiwagang nilulutas ng SVG ang 16-pixel na problema. Ang detalyadong vector illustration ay malabo pa rin kapag isiniksik sa isang tab.

Ikatlo, mag-ingat sa dynamic styling. May ilang team na gumagamit ng prefers-color-scheme sa loob ng SVG favicon para umangkop ang icon sa dark at light browser themes. Maaari itong gumana, pero maaaring hindi pantay ang browser behavior at caching. Kung mahalaga ang brand recognition, madalas mas panalo ang iisang matatag na icon kaysa sa tusong adaptive na icon.

Magandang source at magandang modernong delivery format ang SVG. Hindi ito dahilan para laktawan ang fallback files.

Ano talaga ang hinahanap ng mga browser

Natutuklasan ng mga browser ang mga favicon sa dalawang pangunahing paraan: explicit HTML links at implicit root requests.

Ang implicit behavior ang luma: kung gusto ng browser ng icon at wala pa itong nahanap, maaari nitong hilingin ang /favicon.ico. Kaya nananatiling kapaki-pakinabang ang root ICO file kahit sa mga modernong site.

Gumagamit ang explicit behavior ng mga <link> element sa document head. Ganito ang isang compact na modernong setup:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<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">

Pagkatapos, maaaring tumuro ang manifest sa mas malalaking PNG icon na ginagamit para sa installable web apps:

{
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Hindi lang ito ang valid na setup, pero magandang baseline ito. Binibigyan nito ang mga modernong browser ng SVG, nagbibigay ng conventional ICO fallback, sinasaklaw ang iOS home screen saves, at sinusuportahan ang mga konteksto ng app installation.

Ang favicon set na dapat ihatid ng karamihan sa mga site

Para sa karaniwang marketing site, documentation site, SaaS app o publication, sapat na ang set na ito:

• /favicon.ico na naglalaman ng 16×16 at 32×32, opsyonal ang 48×48.
• /icon.svg bilang modernong scalable favicon.
• /apple-touch-icon.png sa 180×180.
• /icon-192.png at /icon-512.png kung mayroon kang web app manifest.

Maaari kang magdagdag ng iba pang size kung may partikular na requirement ang isang platform, pero huwag gumawa ng sampung file dahil lang nakasanayan. Bawat dagdag na file ay isa pang bagay na kailangang i-cache, makalimutan, maling pangalanan o maiwang luma pagkatapos ng rebrand.

Kung hindi installable ang iyong site at wala itong manifest, maaaring hindi mo kailangan ang 192 at 512 pixel icons. Kung parang app ang kilos ng iyong site, malamang kailangan mo ang mga iyon.

Karaniwang failure modes

Ang pinakakaraniwang favicon bugs ay hindi tungkol sa sining. Mga problema ito sa delivery.

Isa rito ang agresibong caching. Mahigpit kumapit ang mga browser sa mga favicon. Habang nagte-test, maaaring hindi lumitaw ang binagong icon hanggang mag-hard refresh ka, mag-clear ng site data, gumamit ng bagong file name, o mag-test sa bagong profile. Para sa production rebrands, maaaring makatulong ang pagpapalit sa /icon.svg?v=2 sa HTML, pero mas mahirap ang root /favicon.ico dahil direkta itong hinihiling ng mga browser. Kadalasang bahagi ng trabaho ang pagpapalit ng file at paghihintay na matapos ang caches.

Isa pang karaniwang problema ang maling MIME type. Dapat i-serve ang SVG bilang image/svg+xml, ang PNG bilang image/png, at ang ICO karaniwang bilang image/x-icon o image/vnd.microsoft.icon. Mapagpatawad ang maraming browser, pero hindi lahat ng konteksto. Kung pumapalya lang ang isang bagay sa isang browser, siyasatin ang network response bago muling iguhit ang icon. Nalalapat din dito ang parehong gawi kapag nagde-debug ng redirects at HTTP headers sa production: tingnan ang aktuwal na response, hindi kung ano ang sinasabi ng CMS na sine-serve nito.

Ikatlong isyu ang design density. Ang mga logo na napakaganda sa website header ay madalas pumalya bilang favicon. Malupit na pagsubok ang tab icon. Alisin ang mga salita, pasimplehin ang mga hugis, dagdagan ang contrast, at mag-test sa totoong sizes. Kung ang icon ay mahalagang content sa loob ng page, mahalaga ang accessibility concerns gaya ng alt text; para sa favicon mismo, dekorasyon ito ng browser interface, hindi page content. Para sa pagkakaibang iyon, tingnan ang aming pragmatic guide sa image alt text.

<!-- tool-cta:start -->

💡 Subukan ito: Bumuo ng mga variant na ICO, PNG at SVG na inaasahan ng mga modernong browser sa isang pasada gamit ang Ultimate Favicon Generator.

<!-- tool-cta:end -->

Isang simpleng implementation checklist

Gamitin ang checklist na ito bago mag-release:

1. Magsimula sa malinis na vector master.
2. I-test ang mark sa 16×16 at 32×32.
3. Mag-export ng self-contained SVG favicon.
4. Gumawa ng multi-size ICO fallback.
5. Mag-export ng 180×180 Apple touch icon.
6. Magdagdag ng 192×192 at 512×512 PNG kung gumagamit ng manifest.
7. Ilagay ang /favicon.ico sa root ng site.
8. I-verify ang status codes, MIME types at caching headers.
9. Mag-test sa kahit isang Chromium browser, Firefox at Safari kung kasama sa audience mo ang Apple devices.

Maliit ang mga favicon, pero napakakita rin ng mga ito. Ang sira nitong bersyon ay nagpapamukhang hindi tapos ang isang site. Ang mahusay na gawa ay nawawala sa interface, at iyon mismo ang punto.