I-convert ang PNG sa ICO (favicon)

Ano ang dapat gawin ng favicon

Ipinapakita ang favicon sa napakaliit na laki, madalas 16 pixel na parisukat. Sa ganoong laki, nawawala ang maliliit na detalye at tuluyang naglalaho ang manipis na linya. Ang magandang favicon ay makapal at simpleng hugis na mataas ang contrast: isang titik, pinasimpleng bersyon ng logo mark, o solidong hugis sa kulay ng brand. Kung may text ang buong logo mo, ang mark lang ang gamitin, o ang unang titik lang.

Ang dahilan kung bakit may ilang laki sa loob ng .ico file ay dahil malabo ang hitsura ng iisang larawang pinalaki o pinaliit habang ipinapakita. Sa pagbibigay ng mga bersyong 16, 32, 48 at 64 pixel, maipapakita ng operating system o browser ang pixel-perfect na larawan sa bawat konteksto: 16 px sa tab, 32 px sa listahan ng bookmark sa high-DPI na screen, 48 px sa shortcut sa taskbar ng Windows, at iba pa.

Paghahanda ng orihinal na PNG

• Gawin itong parisukat. Kung malapad ang logo mo, ilagay muna ito sa transparent na parisukat na canvas, o i-crop hanggang mark gamit ang crop tool.
• Magsimula sa 256 pixel o higit pa. Mas makinis ang resulta kapag pinaliit mula sa malaki at malinis na orihinal kaysa kapag pinalaki ang maliit.
• Panatilihin ang transparent na background kung solido ang hugis, para maganda itong tingnan sa maliwanag at madilim na browser theme. Kung manipis o mapusyaw ang kulay ng hugis, ilagay na lang ito sa parisukat na iisa ang kulay.
• Iwasan ang text na mas mahaba sa isa o dalawang titik; hindi ito mababasa sa 16 pixel.

Pag-install ng favicon

I-save ang na-download na file bilang favicon.ico at ilagay ito sa root folder ng website mo. Saka idagdag ito sa loob ng <head> ng bawat pahina:

<link rel="icon" href="/favicon.ico" sizes="any">

Karamihan ng platform ay may sariling setting para dito: tinatawag itong Site Icon ng WordPress sa ilalim ng Appearance, may Favicon field ang Shopify at Squarespace sa theme settings, at may isa rin ang Webflow sa Project Settings. Doon i-upload ang .ico. Para sa kumpletong gabay, basahin ang paano gumawa ng favicon.

Higit pa rito

Para sa kumpletong set ng mga icon na hinihingi ng mga modernong device, kakailanganin mo rin ng 180 pixel na PNG para sa mga shortcut sa home screen ng iOS (apple-touch-icon) at mga PNG na 192 at 512 pixel para sa Android at sa web app manifest. Karaniwang PNG file ang mga iyon, kaya gamitin ang resize tool para gawin ang mga ito mula sa parehong master. Ang .ico mula sa pahinang ito ang humahawak sa mga browser tab, bookmark at Windows, kung saan kadalasang napapansin ng mga tao ang nawawalang favicon.