Paano gumawa ng favicon
Ang mga laki, format at code na kailangan mo para sa favicon na lumalabas kahit saan.
Ang favicon ay ang maliit na icon sa browser tab, sa mga bookmark at sa tabi ng site mo sa mobile search results ng Google. Kapag walang favicon, mukhang hindi tapos ang site, at mas pangit pa kapag malabo ito. Ilang minuto lang ang kailangan para makagawa ng maganda.
Magsimula sa tamang artwork
Ipinapakita ang favicon nang kasinliit ng 16 by 16 pixel, kaya hindi mababasa ang buong logo na may wordmark. Gumamit ng simpleng marka: ang simbolo mula sa logo mo, isang inisyal, o isang matapang na hugis sa kulay ng brand mo. Subukan ito sa pamamagitan ng pagpapaliit nito sa sangkapat ng laki sa screen: kung makikilala mo pa rin kung ano ito, gagana ito.
Magsimula sa isang square na larawan na hindi bababa sa 512 by 512 pixel, mas mainam kung PNG na may transparent na background. Kung hindi square ang logo mo, i-crop ito nang square na naka-lock ang ratio sa 1:1.
Ang mga file na kailangan mo
| File | Laki | Ginagamit ng |
|---|---|---|
| favicon.ico | May laman na 16, 32 at 48 pixel na bersyon | Mga browser, lumang system, ang default na request para sa /favicon.ico |
| Isang PNG icon | 32 by 32 at 192 by 192 | Mga modernong browser, home screen ng Android |
| apple-touch-icon.png | 180 by 180 | Mga bookmark sa home screen ng iPhone at iPad |
Ginagamit din ng Google Search ang favicon mo sa mga resulta. Kailangan itong square na hindi bababa sa 48 by 48 pixel at dapat itong ma-crawl sa site mo.
Paggawa ng ICO file
I-drop ang square na PNG mo sa PNG to ICO converter. Gumagawa ito ng totoong .ico file na naglalaman ng maliliit na laking hinihingi ng mga browser. Para sa mga PNG na bersyon, i-resize ang parehong square na larawan sa 180, 192 at 32 pixel.
Pagdaragdag nito sa site mo
I-upload ang favicon.ico sa root ng site mo para maabot ito sa iyongsite.com/favicon.ico, at idagdag ang mga linyang ito sa loob ng head ng mga page mo:
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" type="image/png" href="/tl/icon-192.png" sizes="192x192"> <link rel="apple-touch-icon" href="/tl/apple-touch-icon.png">
Sa WordPress, pumunta sa Appearance, Customize, Site Identity at mag-upload ng square na larawan bilang Site Icon; ang WordPress na ang gagawa ng mga laki para sa iyo. Ang Shopify, Wix at Squarespace ay may kanya-kanyang favicon setting sa settings ng site o theme.
Kapag hindi lumalabas ang bagong favicon
Matigas ang ulo ng mga browser sa pag-cache ng favicon. Buksan ang site sa isang private window, o bisitahin nang direkta ang iyongsite.com/favicon.ico at mag-refresh. Puwedeng abutin ng ilang araw o linggo bago ma-update ng Google ang icon sa search results, pagkatapos nitong i-crawl ulit ang homepage mo.
Mga karaniwang pagkakamali
- Paggamit ng buong logo na may maliit na teksto, na nagiging mantsa na lang sa 16 pixel.
- Puting icon sa transparent na background, na nawawala sa mga mapusyaw na browser tab.
- Pagbibigay lang ng maliit na 16 pixel na file, na mukhang malabo sa mga high-resolution na screen.
- Pagkalimot sa file sa /favicon.ico, na hinihingi ng ilang browser at crawler anuman ang sinasabi ng page.