Ang favicon ay hindi na isang imahe. Ang mga browser, telepono, at operating system ay bawat isa ay kumukuha ng magkaibang sukat para sa magkaibang slot — ang browser tab, isang bookmark, iOS home screen, Android app switcher. Magpadala ng isang 32×32 na PNG at gagana ito sa tab pero magmumukhang malabo kapag nag-save ang isang tao ng iyong site sa telepono nila. Magpadala ng buong set at ang bawat surface ay nakakakuha ng malinaw na icon.
Narito kung aling mga sukat mismo ang kailangan mo, para saan ang bawat isa, at bakit ganito ang hitsura ng listahan.
Ang mga sukat na mahalaga
Karamihan ng site ay sakop ng anim na PNG na sukat kasama ang legacy na .ico. Narito ang sanggunian:
| Sukat | Format | Saan ginagamit |
|---|---|---|
| 16×16 | PNG (sa .ico) | Browser tab, address bar, bookmark |
| 32×32 | PNG (sa .ico) | Retina tab, Windows taskbar shortcut |
| 48×48 | PNG | Windows site icon, ilang Android surface |
| 180×180 | PNG | iOS home screen (apple-touch-icon) |
| 192×192 | PNG | Android home screen, PWA install |
| 512×512 | PNG | PWA splash screen, app store, high-DPI |
Ang favicon.ico na file ay isang container na nagbabalot ng maliliit na sukat (kadalasan 16 at 32, minsan 48). Ang mas lumang browser at Windows ay hinahanap ito ayon sa pangalan sa root ng iyong site, kaya sulit pa rin itong ipadala kahit na ang makabagong browser ay masayang gumagamit ng PNG.
Bakit napakarami? Isang mabilisang tour
Ang dahilan kung bakit mahaba ang listahan ay lumalabas ang icon sa magkakaibang pisikal na sukat.
16 at 32 ang pang-araw-araw na tab icon. Ang 16 ang klasikong sukat; ang 32 ay sumasaklaw sa high-DPI ("Retina") na screen kung saan magmumukhang malambot ang 16. Pumipili ang mga browser kung alin ang bagay sa pixel density.
48 ay isang Windows na bagay — ginagamit ito para sa site shortcut at lumalabas nang mas malinaw sa ilang lugar na hindi maayos na sakop ng 32.
180 ay ang apple-touch-icon ng Apple. Kapag pinindot ng isang tao ang "Add to Home Screen" sa iPhone o iPad, ginagamit ng iOS ito. Mali ito at kukuha ang iOS ng pinaliit na screenshot o magpapakita ng payak na tile ng letra — walang isa doon na mukhang iyong brand.
192 at 512 ay ang Progressive Web App na sukat, idineklara sa manifest.webmanifest na file. Ang 192 ang icon sa Android home-screen; ang 512 ay nagpapakain sa splash screen at pinaliliit para sa kahit anong iba pang kailangan ng OS. Kung installable ang iyong site, hindi napag-uusapan ang dalawang ito.
Kailangan mo ba ng mas malaki kaysa 512?
Hindi. Ang 512×512 ang praktikal na kisame para sa web favicon — ang webmanifest spec at bawat malaking platform ay umaabot doon. Kung ang iyong source art ay 1024 o mas malaki, ayos iyon bilang panimulang imahe (mas maraming detalyeng mapagpapaliitan), pero hindi ka magpapadala ng 1024 na favicon. Ang kahit anong lampas sa 512 ay nagdaragdag lang ng byte na walang gumagamit.
Ang isang panuntunang mahalaga pataas: magsimula sa malaki, parisukat na source. Ang 512×512 o 1024×1024 na orihinal ay malinis na pinapaliit sa bawat sukat sa ibaba nito. Magsimula sa maliit na imahe at magmumukhang maputik ang maliliit na sukat dahil hindi kailanman naging sapat ang detalyeng papanatilihin.
Idisenyo para makaligtas sa 16×16
Ang pinakamahirap na sukat ay ang pinakamaliit. Sa 16×16, ang detalyadong logo ay nagiging hindi mababasang mantsa. Ilang tip na tumatagal sa mga site:
- Pasimplehin. Hindi mababasa ang buong wordmark sa 16px. Gumamit ng isang letra, monogram, o ang pinaka-nakikilalang bahagi ng iyong marka.
- Panatilihing mataas ang contrast para manatiling nababasa ang hugis sa parehong light at dark na tab background.
- Mag-iwan ng kaunting padding — ang icon na humahawak sa lahat ng apat na gilid ay pakiramdam siksik sa tab.
- Subukan itong maliit. I-zoom out ang iyong browser, o basta tingnan ang aktwal na tab. Kung hindi mo masabi kung ano ito sa isang tingin, pasimplehin pa.
Paggawa ng buong set
Hindi mo ito binubuo sa kamay. I-drop ang isang parisukat na imahe sa Favicon Generator at gumagawa ito ng buong set nang sabay — favicon.ico, ang 16/32/48/180/192/512 na PNG, isang handa-nang-gamitin na webmanifest, at ang eksaktong HTML <head> snippet na idi-paste. Lahat ay tumatakbo sa iyong browser: ang imahe ay hindi kailanman ina-upload, at pagkatapos ng iyong unang pagbisita, gumagana ang tool offline.
Ang HTML na mauuwian mo
Para sa sanggunian, ang kumpletong favicon setup ay mukhang halos ganito sa iyong <head>:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
Isinusulat ito ng generator para sa iyo, kaya maidi-paste mo ito diretso. Saklawin ang anim na sukat kasama ang .ico at ang manifest, at bawat browser, telepono, at OS ay nakakakuha ng malinaw na icon na hinihiling nito.