Ano ang Favicon at Bakit Ito Mahalaga sa Iyong Website?

Ang favicon (maikli para sa "favorite icon") ay ang maliit at parisukat na larawang kumakatawan sa isang website sa mga tab ng browser, bookmark, listahan ng history, resulta ng paghahanap sa Google, home screen ng telepono at mga naka-install na web app. Mahalaga ito dahil binibigyan nito ang iyong site ng makikilalang mukha sa isang sulyap, mas madali itong mahanap sa dami ng bukas na tab, ipinapakitang propesyonal at mapagkakatiwalaan ang site, at ngayon ay ipinapakita na ito sa tabi ng pangalan ng iyong site sa mga resulta ng Google. Kung wala ito, generic na globo o blangkong pahina ang makikita ng mga bisita, at napupuno ng 404 error ang mga log ng iyong server. Maaari kang gumawa ng kumpletong set ng favicon nang libre gamit ang MakeFav favicon generator.

Ano ang favicon?

Ang favicon ay isang maliit na branded na graphic, karaniwang pinasimpleng bersyon ng logo o isang titik o simbolo, na kinukuha ng mga browser at iba pang software mula sa iyong website at ipinapakita saanman kailangan ng compact na visual identifier. Sa desktop browser, karaniwan itong iginuguhit sa 16 by 16 CSS pixels, bagaman dapat mas malaki ang mismong file para manatiling malinaw sa mga high-density na screen.

Sa teknikal na usapan, ang favicon ay isa lamang image file na tinutukoy sa iyong HTML (o matatagpuan sa default na lokasyon) na dina-download ng mga user agent nang hiwalay sa nilalaman ng pahina. Sa ngayon, bihirang iisang file lang ang "favicon". Karaniwang may ilang bersyon ng parehong icon ang makabagong site para makakuha ng angkop na format at laki ang mga browser, search engine, iOS at Android.

Maikling kasaysayan ng favicon

Nagsimula ang favicon noong Marso 1999, nang ilabas ng Microsoft ang Internet Explorer 5. Hinayaan ng browser ang mga user na i-save ang mga pahina sa listahan ng "Favorites", at naghanap din ito ng maliit na icon file na pinangalanang favicon.ico sa root ng site para ipakita sa tabi ng bawat naka-save na entry. Simple ang ideya: kung may /favicon.ico ang isang site, lalabas ang icon sa tabi ng bookmark.

Hindi nagtagal at tinanggap na rin ng ibang browser ang feature, at lalo itong naging kapaki-pakinabang dahil sa tabbed browsing. Nang maging pangunahing paraan ng pag-navigate ang mga tab, naging pangunahing gabay sa nabigasyon ang favicon mula sa dekorasyon lang ng bookmark. Sa paglipas ng mga taon, nagbago ang pamamaraan:

• Maagang 2000s: pinahintulutan ng elementong <link rel="icon"> ang mga site na ituro ang icon sa anumang URL sa halip na sa root lang, at nagsimulang tumanggap ng PNG at GIF file ang mga browser na hindi IE.
• 2010s: ipinakilala ng Apple ang apple-touch-icon para sa mga home screen ng iOS, at nagdagdag ang Android at Windows ng sarili nilang mga kumbensyon gaya ng manifest icon at tile image.
• Ngayon: dahil sa SVG favicon, web app manifest, mga icon na tugma sa dark mode at sa mga kinakailangan ng Google para sa favicon sa resulta ng paghahanap, naging maliit ngunit tunay na bahagi na ng teknikal na setup ng site ang favicon.

Kung saan lumilitaw ang mga favicon ngayon

Mas marami pang lugar ang pinagpapakitaan ng iyong favicon kaysa sa tab ng browser. Narito ang mga pangunahin:

• Mga tab ng browser: ang pinakakitang lugar, kung saan madalas na ang icon na lang ang nakikita kapag maraming bukas na tab.
• Mga bookmark at favorite: nasa tabi ng pamagat ng pahina ang icon sa mga bookmark bar at menu.
• History at mga pinakamadalas bisitahing pahina: ipinapakita ng mga browser ang mga favicon sa mga listahan ng history at sa mga pahina ng bagong tab.
• Mga resulta ng paghahanap sa Google: sa mobile at desktop, ipinapakita ng Google ang favicon ng site sa tabi ng pangalan at URL ng site.
• Mga home screen: kapag idinagdag ng bisita ang iyong site sa home screen sa iOS o Android, ang touch icon o manifest icon ang nagiging shortcut na parang app.
• Mga naka-install na PWA: ginagamit ng progressive web app ang mga icon sa web app manifest nito para sa launcher icon, splash screen at task switcher.
• Mga Windows tile at naka-pin na site: gumamit ang mas lumang bersyon ng Windows at Edge ng mga tile image na itinakda para sa mga naka-pin na site; ang mga makabago ay karaniwang gumagamit na lang ng iyong mga karaniwang icon.
• Mga link preview sa ilang app: ipinapakita ng ilang chat at productivity tool (kilalang halimbawa ang Slack) ang favicon ng site sa tabi ng na-unfurl na link. Karamihan sa mga preview ay pangunahing umaasa sa mga Open Graph image, ngunit madalas na ang favicon ang nagbibigay ng maliit na brand mark.

Bakit mahalaga ang favicon sa iyong website

Pagkilala sa brand

Mas mabilis makilala ng mga tao ang mga kulay at hugis kaysa magbasa ng teksto. Ang pare-parehong icon na paulit-ulit na lumilitaw sa mga tab, bookmark at resulta ng paghahanap ay nagbubuo ng pagiging pamilyar sa bawat pagkakita, na libreng exposure ng brand sa bawat pagbisita.

Tiwala at kredibilidad

Nagmumukhang hindi tapos ang site kapag walang favicon. Ang malinis at tamang pagkaka-render na icon ay maliit na senyales na may nagmamalasakit sa mga detalye, na sumusuporta sa pananaw na lehitimo ang site. Hindi ito security feature, at maaaring kopyahin ng mga phishing site ang mga icon, ngunit bihirang makatulong ang blangkong default icon para magmukhang matatag ang isang negosyo.

Click-through rate sa mga resulta ng paghahanap

Dahil ipinapakita ng Google ang favicon sa tabi ng iyong listing, bahagi na ito ng itsura ng iyong resulta kumpara sa mga kakumpitensya. Walang inilalathalang epekto sa ranking ang Google para sa mga favicon, at hindi ka dapat umasa sa pagtaas ng ranking. Ang benepisyo ay tungkol sa visual na pagkilala: mas malamang na mapansin at piliin ng mga user na kilala ang iyong icon ang iyong resulta, lalo na sa mobile kung saan siksik ang mga resulta.

Kaginhawahan kapag maraming bukas na tab

Kapag dalawampung tab ang bukas sa browser, nawawala na ang mga pamagat at ang favicon na lang ang natitira. Dahil sa kakaibang icon, agad mahahanap ng mga tao ang iyong tab at babalikan ito sa halip na magbukas ng duplicate o makalimutan ito.

Propesyonal na impresyon

Ipinapakita ng maayos na disenyo ng favicon ang parehong atensyon sa detalye gaya ng nalalabi mong site. Para sa mga pahina ng produkto, dokumentasyon, blog at web app, isa ito sa pinakamurang pampaganda na maaari mong idagdag.

Accessibility sa paghahanap ng tab

Nakakatulong ang mga icon sa mga user na nag-i-scan nang biswal sa halip na magbasa, kasama ang mga taong may dyslexia o pagkakaiba sa pag-iisip, at sinumang mabilis na lumilipat-lipat ng gawain. Mas madaling makita ang icon na may mataas na contrast at simpleng hugis. Tandaan lamang na pandagdag lang ang favicon: hindi nito pinapalitan ang malinaw na pamagat ng pahina, na umaasa ang mga screen reader at assistive tech.

Ano ang mangyayari kung wala kang favicon

Awtomatikong humihiling ang mga browser ng /favicon.ico mula sa root ng iyong domain, kahit hindi ito binanggit ng iyong HTML. Kapag wala ang file, may ilang mangyayari:

• Generic na icon: default na globo, dokumento o blangkong icon ang nakikita ng mga bisita sa tab at mga bookmark, na mukhang anonymous.
• Mga 404 error sa iyong mga log: bawat browser na humihingi ng file ay nagdudulot ng bigong request. Sa mga abalang site, nagdaragdag ito ng ingay sa access log, error monitoring at analytics, at maaaring matakpan ang mga tunay na problema.
• Walang icon sa mga resulta ng Google: kung walang valid at crawlable na favicon, ipinapakita ng Google ang default na placeholder nito sa tabi ng iyong listing.
• Nasasayang na mga request: maaaring subukang muli ng mga browser, na nagdaragdag ng maliit ngunit walang saysay na karga sa iyong server.

Mas mabuti na ang napakasimpleng icon kaysa wala, dahil inaalis nito ang mga 404 at binibigyan ang mga user ng bagay na makikilala.

Ipinaliwanag ang mga format ng favicon

Walang iisang format na sumasaklaw sa lahat ng platform, kaya karamihan ng mga site ay gumagamit ng maliit na set ng mga file.

Kinailangan ang mga lumang Windows tile image (na kino-configure sa pamamagitan ng browserconfig.xml) para sa Internet Explorer 11 at sa lumang Edge. Bihira na silang kailanganin ngayon maliban kung kailangan mong suportahan ang mga environment na iyon.

Mga alituntunin ng Google sa favicon para sa mga resulta ng paghahanap

Kung gusto mong lumabas ang iyong icon sa Google Search, sundin ang mga inilathalang kinakailangan ng Google:

• Laki: dapat parisukat (1:1) ang larawan at multiple ng 48 pixels, gaya ng 48x48, 96x96 o 144x144. Pagkatapos ay ibinababa ito ng Google sa 16x16 para sa pagpapakita. Ang pinakamaliit na sinusuportahang laki ay 8x8, ngunit inirerekomenda ang 48x48 o mas malaki.
• Mga format: gumagana ang anumang format na sinusuportahan ng mga browser, kabilang ang ICO, PNG at SVG.
• Matatag na URL: huwag madalas baguhin ang URL ng favicon. Nakakatulong ang matatag na address para manatiling napapanahon ng Google ang iyong icon.
• Crawlable: dapat maa-access ng Googlebot ang favicon file at ang iyong home page. Huwag silang i-block sa robots.txt o sa likod ng login.
• Isang deklarasyon kada site: nakakabit ang icon sa home page ng site, kaya ilagay ang <link> tag sa head ng iyong home page.
• Kinatawan at angkop: dapat sumasalamin ang icon sa iyong brand, at maaaring palitan ng Google ng default nito ang icon na nakakasakit o nanlilinlang.

Pagkatapos mong mag-publish o magbago ng favicon, maaaring abutin ng ilang araw hanggang linggo bago ito ma-recrawl at ma-update ng Google, kaya huwag umasa ng agarang pagbabago.

Paano mabilis na gumawa ng favicon gamit ang MakeFav

Hindi mo kailangan ng design software o command line. Ginagawang mga file na inilarawan sa itaas ng MakeFav generator ang isang source image.

1. Ihanda ang iyong artwork. Gumamit ng parisukat na logo o simbolo na 512 x 512 px o mas malaki. Pinakamainam ang mga simpleng hugis dahil makikita ang icon sa 16 px.
2. I-upload ito sa home page ng MakeFav, o buksan ang editor para ayusin ang larawan, background at padding bago mag-export.
3. I-preview ang resulta sa maliliit na laki at sa maliwanag at madilim na background para matiyak na nananatili itong nababasa.
4. I-download ang package. Naglalaman ito ng ICO, mga laki ng PNG, Apple touch icon, mga manifest icon at ang HTML snippet na ipe-paste.
5. I-upload ang mga file sa root ng iyong website para maabot ang mga ito sa mga path gaya ng /favicon.ico.
6. Idagdag ang HTML sa <head> ng bawat pahina, o sa iyong shared layout o template.
7. I-verify gamit ang favicon checker, pagkatapos ay i-clear ang cache ng browser at mag-reload para makita ang bagong icon.

Halimbawang HTML snippet

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-96x96.png" type="image/png" sizes="96x96">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Tinutulungan ng attribute na sizes="48x48" sa ICO link ang mga browser na piliin ang SVG kapag sinusuportahan nila ito habang nananatiling fallback ang ICO. Natutugunan ng 96 px na PNG ang patakarang multiple-of-48 ng Google.

Halimbawang web app manifest

{
  "name": "Example Site",
  "short_name": "Example",
  "icons": [
    { "src": "/web-app-manifest-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" },
    { "src": "/web-app-manifest-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Kung gumagamit ka ng mga build pipeline o gusto mong i-automate ang paggawa ng icon, tingnan ang mga resource para sa developer.

Mga tip sa disenyo para sa favicon na epektibo

• Gawing simple. Mas mainam ang isang hugis, isang titik o matapang na monogram kaysa sa detalyadong logo na nagiging malabo sa 16 px.
• Gumamit ng malakas na contrast. Tiyaking kita ang icon sa maliwanag at madilim na tema ng browser. Nakakatulong ang may kulay na background tile.
• Iwasan ang teksto. Ayos lang ang isang inisyal; hindi nababasa ang mga salita sa laking ito.
• Mag-iwan ng kaunting padding para sa mga maskable at bilugang-sulok na icon para walang importanteng maputol.
• Manatiling pare-pareho sa iyong logo at mga kulay ng brand para mapatibay ng favicon ang pagkilala.
• Subukan sa mga totoong device at tingnan kung ano ang itsura nito sa tab, bookmark at resulta ng Google.

Mga karaniwang problema sa favicon

Kung hindi lumilitaw ang iyong icon, karaniwang sanhi ang caching, maling path at naka-block na mga file. Agresibong nagka-cache ng mga favicon ang mga browser, kaya madalas sapat na ang hard refresh o bagong private window para makita ang mga update. Tiyaking nagbabalik ng 200 status at tamang content type ang URL ng file, at nasa <head> ang <link> tag. Para sa paghahanap, tiyaking hindi bina-block ng robots.txt ang icon o ang home page. Matutulungan ka ng MakeFav checker na mabilis na matukoy ang mga isyung ito.

Mga madalas itanong

Ano ang ibig sabihin ng favicon?

Ang favicon ay maikli para sa "favorite icon". Galing ang pangalan sa Internet Explorer 5, na noong 1999 ay unang gumamit ng maliit na icon file para palamutian ang mga entry sa listahan ng Favorites ng browser. Nanatili ang termino kahit lumilitaw na ang icon sa maraming ibang lugar.

Nakakatulong ba ang favicon sa SEO?

Hindi direktang ranking factor ang favicon. Gayunpaman, lumilitaw ito sa tabi ng pangalan ng iyong site sa mga resulta ng Google sa mobile at desktop, kaya maaari nitong mapabuti ang pagkilala sa brand at ang visual appeal ng iyong listing, na maaaring hindi direktang sumuporta sa mga click. Ang pagsunod sa mga alituntunin ng Google ang nagiging dahilan para maging karapat-dapat na ipakita ang icon.

Anong laki dapat ang favicon?

Para sa Google Search, gumamit ng parisukat na larawang multiple ng 48 pixels, gaya ng 48x48 o 96x96. Para sa mas malawak na saklaw, magbigay din ng ICO file, 180x180 na Apple touch icon at 192x192 at 512x512 na manifest icon. Magandang idagdag ang SVG para sa scalability.

Kailangan ko pa ba ng favicon.ico kung gumagamit ako ng PNG o SVG?

Magandang ideya pa rin ito. Humihiling ang mga browser at ilang tool ng /favicon.ico bilang default, at umaasa dito ang mas lumang software. Ang pagpapanatili ng ICO file sa root ng site ay pumipigil sa mga 404 error at nagbibigay ng ligtas na fallback kapag hindi sinusuportahan ang SVG o PNG.

Bakit hindi nag-a-update ang aking favicon?

Matagal na nagka-cache ng mga favicon ang mga browser at search engine. Subukan ang hard refresh, private window o pag-clear ng cache. Tiyaking tama ang path ng file at naihahatid ang bagong file. Sa Google Search, maaaring abutin ng ilang araw o linggo bago ma-recrawl at ma-update ang binagong icon.