Favicon UX: Ano ang Gumagawa ng Mahusay na Favicon

Ang mahusay na favicon ay isang simple at mataas ang contrast na marka, kadalasan ang iyong logomark o isa hanggang dalawang letra, na nananatiling malinaw na nababasa sa 16x16 pixels sa parehong maliwanag at madilim na tab ng browser, tugma sa iyong brand, at bihirang baguhin. Lahat ng iba pa sa gabay na ito (pixel alignment, kulay, padding, transparency, laki ng file) ay naglilingkod sa mga layuning iyon: gawing madaling makita agad ang iyong site sa gitna ng dose-dosenang bukas na tab.

Maliit ang favicon, ngunit lumalabas ito sa maraming lugar: mga tab ng browser, bookmarks bar, listahan ng history, tab-search menu, resulta ng paghahanap sa Google sa mobile at desktop, at home screen ng telepono. Para sa mga user na maraming bukas na tab, madalas na pinuputol ang pamagat hanggang wala nang makita at ang icon na lang ang natitirang palatandaan. Dahil dito, ito ay tunay na elemento ng nabigasyon, hindi palamuti.

1. Linaw sa 16x16

Ang klasikong laki ng favicon ay 16x16 CSS pixels. Sa karaniwang display, literal itong 256 pixels; sa 2x retina display, karaniwang pumipili ang browser ng 32x32 na larawan para sa parehong espasyo. Anuman ang idisenyo mo ay dapat makayanan ang pagliit na ito.

Panatilihing simple

• Isang hugis o isa hanggang dalawang letra. Gumagana ang isang makapal na letra, bilog na may simbolo, o simpleng geometric na marka. Ang tatlong letra o isang salita ay magiging ingay lang.
• Isang focal point. Kung hindi mo mailalarawan ang icon sa limang salita, masyado itong kumplikado.
• Walang gradient, anino o pinong texture. Nagiging malalabong mantsa ang mga ito sa maliliit na laki.

I-align sa pixel grid

Sa 16x16, ang linyang nakapuwesto nang kalahating pixel mula sa grid ay na-anti-alias sa dalawang hanay ng pixel at mukhang kulay-abo at malabo. Ilagay ang mga gilid sa buong hangganan ng pixel at gumamit ng pantay na lapad kung simetriko ang hugis. Kung nag-e-export ka mula sa vector tool, i-enable ang pixel snapping, o suriin ang resulta pagkatapos paliitin at ayusin ito nang mano-mano.

Iwasan ang manipis na linya

Ang mga stroke na mas manipis sa 2 pixels sa 16x16 (humigit-kumulang 12 porsyento ng lapad ng icon) ay madalas mawala o kumurap-kurap sa pagitan ng mga laki. Palakihin ang kapal ng stroke, alisin ang mga detalye sa loob, at pagsamahin ang maliliit na puwang. Kadalasan, mas malinaw basahin ang makapal at bahagyang mabigat na glyph kaysa sa tapat na miniature ng detalyadong logo.

Mano-manong hinting

Walang font-style hinting ang mga ICO at PNG file, kaya ang katumbas nito ay mano-manong pag-edit ng pixel: inaayos mo ang bawat pixel upang manatiling matalas ang mga kurba, dayagonal at counter (ang mga butas sa mga letrang tulad ng "a" o "e"). Magandang unang draft ang awtomatikong pagpapaliit, ngunit ang ilang pixel na mano-manong inilagay ay madalas na nagiging pagkakaiba ng isang blob at ng nakikilalang letra. Ang pixel editor ng MakeFav ay ginawa para dito: buksan ang 16x16 na canvas, ayusin ang mga problemang pixel, at i-export.

2. Contrast sa maliwanag at madilim na tab

Karaniwan nang tumatakbo ang mga browser sa dark mode, at maraming user ang may tab strip na iba sa tema ng pahina. Ang madilim na navy na icon na may transparent na background ay maaaring perpekto sa puting tab at halos hindi makita sa madilim na kulay-abo. Palaging subukan ang pareho.

Mga praktikal na solusyon

• Magdagdag ng hugis na background. Ang solidong rounded square o bilog sa kulay ng brand ay nagbibigay sa marka ng sarili nitong contrast, anuman ang tab.
• Gumamit ng manipis na outline o halo. Ang 1px na mas maliwanag na gilid sa paligid ng madilim na glyph (o kabaligtaran) ay nagpapanatiling nakikita ang silweta sa alinmang tema, ngunit sa 16x16 kailangan itong manatiling matalas, kaya subukan ito.
• Pumili ng mid-tone na kulay ng brand. Ang mga kulay tulad ng matingkad na asul, kahel, berde o magenta ay karaniwang gumagana sa parehong puti at halos itim na ibabaw. Ang napakaliwanag na dilaw o napakadilim na navy ang mapanganib.
• Gumamit ng adaptive na SVG favicon. Maaaring maglaman ang SVG ng prefers-color-scheme media query para magbago ang icon kasabay ng tema ng system.

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'>
  <style>
    .mark { fill: #1b2a49; }
    @media (prefers-color-scheme: dark) {
      .mark { fill: #f5f7fa; }
    }
  </style>
  <path class='mark' d='M6 26V6h6l4 10 4-10h6v20h-4V13l-4 10h-4l-4-10v13z'/>
</svg>

Tandaan na sumasalamin ang media query sa tema ng operating system o browser, na karaniwang sinusunod ng tab strip, ngunit hindi palagi. Nag-iiba-iba rin ang suporta sa SVG favicon: kayang hawakan ito ng Chrome at Firefox, habang ang Safari ay matagal nang nahuhuli, kaya palaging magtabi ng PNG o ICO na fallback. Ang disenyong may solidong background ang pinakamatibay na opsyon dahil hindi na nito kailangan ng anumang theme logic.

3. Pagkakakilanlan at konsistensi ng brand

Gamitin ang logomark (ang simbolo o monogram), hindi ang buong logo lockup na may wordmark. Hindi nababasa ang teksto sa loob ng 16x16 na icon, at ang malapad na pahalang na logo na pinaliit sa parisukat ay mag-iiwan lang sa iyo ng maliit na guhit sa gitna.

• Kung may simbolo ang iyong brand, pasimplehin ito para sa maliliit na laki sa halip na basta paliitin. Karaniwang gawain ang "favicon version" na mas kaunti ang detalye.
• Kung wordmark lang ang iyong brand, kunin ang unang letra o isang natatanging pares ng letra at ilagay ito sa typeface ng brand mo sa mabigat na timbang.
• Panatilihing pare-pareho ang mga kulay sa iyong logo, app icon at social avatar, upang makilala ng user ang parehong brand saanman.

Kasinghalaga ng katapatan sa orihinal ang pagiging kakaiba. Tingnan ang hanay ng mga tab: kung tatlong ibang site ang gumagamit din ng asul na bilog, hindi mag-iiba ang sa iyo. Mas kapaki-pakinabang ang ibang hugis o kulay kaysa sa perpektong tapat na pagpapaliit.

4. Kulay: limitado at saturated na palette

Sa dami ng kakaunting pixel, bawat dagdag na kulay ay nagdadagdag ng kalat. Layunin ang isa o dalawang kulay at, sa pinakamarami, puti o itim. Mas malinaw sa maliliit na laki ang mga saturated na kulay kaysa sa mga pastel, na madalas humalo sa background ng tab.

Manghiram nang kaunti sa pag-iisip tungkol sa accessibility. Hinihingi ng WCAG ang hindi bababa sa 3:1 na contrast para sa mahahalagang graphical na bagay (success criterion 1.4.11, Non-text Contrast). Hindi ito pormal na sakop ng favicon, dahil browser chrome ito at hindi nilalaman ng pahina, ngunit ang 3:1 sa pagitan ng glyph at background nito, at sa pagitan ng icon at tab, ay matinong target. Iwasan ding ipahayag ang anumang bagay sa pamamagitan lang ng hue: ang pula laban sa berdeng bersyon ng parehong icon ay hindi mapagkakaiba ng maraming colour-blind na user, kaya baguhin ang hugis o magdagdag ng simbolo.

5. Hugis, padding at safe zone

Punuin ang parisukat

Ipinapakita ng mga tab ng browser ang favicon sa nakapirming maliit na laki, kaya ang dagdag na margin ay nagpapaliit lang sa iyong marka. Para sa karaniwang icon ng tab, gamitin ang karamihan ng canvas, na may isa o dalawang pixel lang na espasyo, para pinakamalaki ang marka hangga't maaari.

Bilugan o parisukat?

Karaniwang hindi pinuputol ng mga browser ang mga favicon ng tab, kaya ang hugis na iginuhit mo ang hugis na nakikita ng mga user. Ang parisukat na bahagyang bilugan ang sulok ay mukhang maayos at nagbibigay ng pare-parehong background; ang freeform na glyph o bilog sa transparency ay maaaring magmukhang mas magaan at mas kakaiba. Parehong ayos. Pumili ng isa at panatilihing pare-pareho ang buong icon set mo.

Apple touch icon

Nagdaragdag ang iOS ng sarili nitong bilugang sulok sa apple-touch-icon (180x180 ang karaniwang laki). Magbigay ng full-bleed na parisukat na walang pre-rounded na sulok, kung hindi ay maaaring magkaroon ng nakikitang madilim o puting sliver sa mga sulok.

Maskable icon para sa Android at PWA

Ang mga maskable icon ay pinuputol ng operating system sa mga bilog, squircle o iba pang hugis. Ilagay ang lahat ng mahalagang nilalaman sa loob ng safe zone: isang bilog na nasa gitna ng icon na may radius na 40 porsyento ng lapad ng icon. Palawigin ang kulay ng background hanggang sa mga gilid upang maganda ang hitsura ng anumang mask. Huwag gamitin muli ang siksik at edge-to-edge na favicon ng tab bilang maskable icon, dahil puputulin ito ng mask.

6. Transparency

Ayos ang transparency para sa mga favicon ng tab, at ito ang nagpapahintulot sa icon na glyph lang na maupo nang malinis sa anumang kulay ng tab. Problema ito para sa Apple touch icon: pinupunan ng iOS ang mga transparent na bahagi ng solidong kulay (karaniwang itim), na maaaring sumira sa disenyo. Palaging bigyan ang apple-touch-icon ng opaque na background sa kulay ng iyong brand. Ganoon din para sa mga maskable icon at karamihan ng gamit sa home screen ng Android, kung saan ang opaque na background ay nagbibigay ng mahuhulaang resulta.

7. Katatagan: huwag itong palitan nang madalas

Nagkakaroon ng pagkilala ang favicon sa pamamagitan ng pag-uulit. Ang madalas na pagpapalit nito ay pumipilit sa mga user na muling alamin kung aling tab ang sa iyo, at nagdudulot din ito ng mga teknikal na sakit ng ulo. Agresibong kina-cache ng mga browser ang mga favicon, at hiwalay itong kinukuha at iniimbak ng Google mula sa iyong mga pahina, kaya ang bagong icon ay maaaring abutin ng mga araw o linggo bago lumabas sa mga resulta ng paghahanap. Humihingi rin ang Google ng matatag na URL ng favicon, icon na ang laki ay multiple ng 48 pixels (48x48, 96x96, at iba pa), at file na maaari nitong i-crawl (hindi hinaharang ng robots.txt). Ituring ang pagpapalit ng favicon bilang desisyon sa antas ng rebrand, hindi pampanahong dekorasyon.

8. Mga estado ng notification at dynamic na favicon

Binabago ng ilang web app ang favicon para ipahiwatig ang mga hindi pa nababasang mensahe, status ng pagre-record o error. Kung maayos ang pagkakagawa, nakakatulong ito; kung sobra, nakakairita.

• Gumamit ng maliit na badge (tuldok o maikling bilang) sa isang sulok, hindi buong redesign. Dapat manatiling nakikilala ang base icon.
• Gawing madalang. Ireserba ang mga badge para sa mga pangyayaring nangangailangan ng aksyon ng user. Huwag i-animate nang tuloy-tuloy ang icon.
• Limitahan ang mga numero. Sa 16x16, isa o dalawang digit lang ang nababasa; ipakita ang "9+" o simpleng tuldok sa halip na "137".
• I-reset agad kapag naasikaso na ng user ang item, at ibalik ang default na icon.
• Huwag umasa sa kulay lang. Dapat ding suportahan ang pulang tuldok ng pamagat ng pahina, tulad ng "(3) Inbox", upang ang impormasyon ay available sa lahat.

Karaniwang iginuguhit ang mga dynamic na favicon sa canvas at pinapalitan sa pamamagitan ng pag-update ng href ng icon link element. I-throttle ang mga update, dahil ang patuloy na pagbabago ng favicon ay maaaring gumamit ng CPU at makagambala sa mga user.

9. Performance

Maliit ang mga favicon, ngunit mga request pa rin ang mga ito na maaaring magawa nang masama.

• Panatilihing maliit ang mga file. Ang PNG favicon ay karaniwang ilang daang byte hanggang ilang kilobyte. Ang simpleng SVG ay maaaring wala pang 1 KB.
• Iwasan ang bloated na ICO file. Sapat na ang multi-size na ICO na may 16, 32 at 48 pixel na larawan. Ang pag-embed ng 256x256 na larawan ay nagpaparami ng laki ng file nang walang nakikitang benepisyo sa mga tab ng browser.
• Itakda ang caching headers. Ihain ang mga icon na may mahabang Cache-Control lifetime, halimbawa public, max-age=31536000, immutable, at gumamit ng versioned o hashed na pangalan ng file kapag binago mo ang mga ito.
• Ideklara nang tahasan ang mga icon. Nire-request ng mga browser ang /favicon.ico bilang default, kaya magbigay ng isa kahit may idineklara kang ibang icon, upang maiwasan ang ingay ng 404 sa iyong mga log.
• I-compress. Patakbuhin ang mga PNG sa lossless optimiser, at i-minify ang mga SVG.

<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='/manifest.webmanifest'>

Kung gusto mong gawin ang lahat ng mga file na ito mula sa isang source image, ang favicon generator ng MakeFav ay gumagawa ng karaniwang set, at ang pahina para sa mga developer ay sumasaklaw sa mga opsyon sa integrasyon.

10. Accessibility

Walang alt text ang favicon at hindi ito inaanunsyo ng mga screen reader, kaya hindi nalalapat ang mga tradisyonal na kasangkapan sa accessibility tulad ng mga alt attribute. Ang mahalaga:

• Ang pamagat ng pahina ang may dalang kahulugan. Sumulat ng natatangi at naglalarawang mga <title> element. Huwag kailanman umasa sa icon para ipahayag ang estado; ulitin sa pamagat ang anumang badge.
• Visibility para sa mga user na mahina ang paningin. Ang mataas na contrast, makapal na hugis at malaking marka ay tumutulong sa mga user na biswal na nag-i-scan ng mga tab.
• Kalayaan mula sa kulay. Tiyaking ang mga hugis o letra ang nagpapakilala sa mga estado, hindi lang ang hue.
• Nabawasang distraksyon. Iwasan ang kumikislap o naka-animate na favicon, na maaaring maging problema sa mga user na sensitibo sa galaw.

Checklist ng Favicon UX

Checklist sa pagsusuri

Huwag pagkatiwalaan ang malaking preview sa iyong design tool. Subukan ang tunay na icon sa totoong kondisyon:

1. Maraming browser. Suriin ang Chrome, Firefox, Safari at Edge, dahil bawat isa ay bahagyang iba ang pagpili ng mga icon at laki.
2. Light at dark mode. Palitan ang tema ng OS at browser at tingnan ang tab strip sa bawat pagkakataon.
3. Retina at karaniwang display. Suriin sa 1x na monitor at 2x o 3x na screen, at mag-zoom sa browser.
4. Bookmarks bar. I-bookmark ang pahina at tingnan kung nababasa pa rin ang icon sa tabi ng ibang site.
5. Maraming tab. Magbukas ng 20 tab at tingnan kung makikita mo ang sa iyo sa isang sulyap.
6. Preview sa Google SERP. Suriin ang resulta ng paghahanap sa mobile kapag na-recrawl na ang icon. Tandaang maaaring abutin ng panahon ang pag-update.
7. Home screen. Idagdag ang site sa mga home screen ng iOS at Android at tiyaking hindi naputol ang icon, walang itim na sulok, at hindi masyadong maliit sa loob ng mask nito.
8. Teknikal na pagsusuri. Patakbuhin ang iyong domain sa favicon checker ng MakeFav upang kumpirmahing umiiral ang mga file, nagbabalik ng 200 status, tama ang mga laki at wastong nakadeklara sa iyong HTML.

Isang praktikal na workflow

1. Magsimula sa iyong logomark at pasimplehin ito sa isang hugis o letra.
2. Gumawa ng parisukat na canvas na may solido o hugis na background na gumagana sa parehong tema.
3. I-export ang mga laking 32x32 at 16x16 at pinuhin ang maliit na bersyon nang mano-mano sa pixel editor.
4. Buuin ang buong set (ICO, PNG, apple-touch-icon, manifest icon) gamit ang generator.
5. Idagdag ang mga link tag, itakda ang cache headers, i-deploy, at i-verify gamit ang checker.

Ang favicon ay isa sa pinakamaliit na asset sa iyong site at isa sa pinakamadalas makita. Ang ilang maingat na desisyon tungkol sa contrast, pagiging simple at konsistensi ay nagpapagana rito sa bawat tab, tema at device.

Mga madalas itanong

Anong laki dapat ang favicon?

Magdisenyo para sa 16x16 at 32x32 para sa mga tab ng browser (gumagamit ang browser ng 32x32 sa mga high-density na display), magbigay ng 180x180 na apple-touch-icon para sa iOS, at 192x192 at 512x512 na PNG para sa Android at PWA. Para sa mga resulta ng paghahanap sa Google, gumamit ng parisukat na icon na ang laki ay multiple ng 48 pixels, tulad ng 48x48 o 96x96. Kayang mag-scale ng SVG source sa lahat ng ito.

Dapat ko bang gamitin ang buo kong logo bilang favicon?

Karaniwang hindi. Masyadong detalyado at masyadong malapad ang mga buong logo na may wordmark para sa parisukat na 16x16 na icon. Gamitin ang logomark o monogram ng isa o dalawang letra, at pasimplehin ito upang manatiling nakikilala kahit maliit.

Paano ko mapapagana ang favicon sa dark mode?

Ang pinakaligtas na paraan ay bigyan ang icon ng sarili nitong solidong hugis na background o contrasting na outline, upang hindi ito umasa sa kulay ng tab. Bilang alternatibo, gumamit ng SVG favicon na may prefers-color-scheme media query para magpalit ng kulay, at magtabi ng PNG o ICO na fallback para sa mga browser na hindi sumusuporta sa SVG icon. Palaging subukan sa parehong light at dark na tema.

Bakit hindi lumalabas ang bago kong favicon?

Matagal kung mag-cache ng favicon ang mga browser, at nag-iimbak ang Google ng sarili nitong kopya, na nire-refresh nito ayon sa sarili nitong iskedyul, na madalas umaabot ng mga araw o linggo. Mag-hard refresh ng pahina, i-clear ang cache ng browser, gumamit ng bagong versioned na pangalan ng file, at tiyaking tumuturo sa tamang file ang mga link tag at ang root na /favicon.ico. Maaari mong i-verify ang setup gamit ang checker ng MakeFav.

Magandang ideya ba ang magpakita ng mga notification badge sa favicon?

Oo, kung madalang gamitin. Ang maliit na tuldok o isa o dalawang digit na bilang ay tumutulong sa mga user na mapansin ang bagay na nangangailangan ng aksyon, ngunit ang patuloy na animation o malalaking numero ay nakakasama sa linaw at atensyon. Palaging ulitin ang estado sa pamagat ng pahina, ibalik ang default na icon kapag naasikaso na ang item, at huwag umasa sa kulay lang.