Favicon UX: Hvað gerir favicon frábært

Frábært favicon er einfalt merki með sterk birtuskil, yfirleitt lógómerkið þitt eða einn eða tveir stafir, sem er áfram læsilegt í 16x16 pixlum á bæði ljósum og dökkum vafraflipum, passar við vörumerkið og breytist sjaldan. Allt annað í þessum leiðarvísi (pixlajöfnun, litir, bil, gagnsæi, skráarstærð) þjónar þessum markmiðum: að gera vefinn þinn auðfinnanlegan í einni sjónhendingu innan um tugi opinna flipa.

Favicon er agnarsmátt en birtist á mörgum stöðum: í vafraflipum, bókamerkjastikum, vafrasögu, flipaleitinni, í Google-leitarniðurstöðum í síma og tölvu og á heimaskjám síma. Hjá notendum með marga flipa opna er titillinn oft styttur niður í ekki neitt og táknið er eina vísbendingin sem eftir er. Það gerir favicon að raunverulegum leiðsögunarþætti, ekki skreytingu.

1. Læsileiki í 16x16

Klassíska favicon-stærðin er 16x16 CSS-pixlar. Á venjulegum skjá eru það bókstaflega 256 pixlar; á 2x retina-skjá velur vafrinn yfirleitt 32x32 mynd fyrir sama pláss. Hvað sem þú hannar þarf að þola þessa smækkun.

Hafðu það einfalt

• Eitt form eða einn til tveir stafir. Einn feitletraður stafur, hringur með tákni eða einfalt rúmfræðilegt merki virkar vel. Þrír stafir eða heilt orð verða að óreiðu.
• Einn miðpunktur. Ef þú getur ekki lýst tákninu í fimm orðum er það of flókið.
• Engar litstigsbreytingar, skuggar eða fín áferð. Slíkt breytist í óskýra bletti í lítilli stærð.

Stilltu við pixlanetið

Í 16x16 verður lína sem er hálfum pixli utan netsins kantjöfnuð yfir tvær pixlaraðir og lítur út fyrir að vera grá og mjúk. Settu brúnir á heil pixlamörk og notaðu sléttar breiddir þar sem formið er samhverft. Ef þú flytur út úr vektorforriti skaltu kveikja á pixlafestingu (pixel snapping), eða skoða minnkaða útkomuna og laga hana í höndunum.

Forðastu þunnar línur

Strik sem eru þynnri en 2 pixlar í 16x16 (um 12 prósent af breidd táknsins) hafa tilhneigingu til að hverfa eða flökta milli stærða. Þykktu strikin, fjarlægðu innri smáatriði og sameinaðu litlar glufur. Feitt, örlítið þungt tákn les sig yfirleitt betur en trúverðug smámynd af ítarlegu merki.

Fínstilltu í höndunum

ICO- og PNG-skrár hafa enga leturfínstillingu (hinting), svo handvirk pixlaklipping er jafngildið: þú lagar einstaka pixla þannig að sveigjur, skálínur og augu (götin í stöfum eins og „a“ eða „e“) haldist skörp. Sjálfvirk smækkun er góður fyrsti uppkast, en nokkrir handstaðsettir pixlar skilja oft á milli kekkjar og auðþekkjanlegs stafs. Pixlaritill MakeFav er smíðaður fyrir þetta: opnaðu 16x16 strigann, lagaðu vandamálapixlana og fluttu út.

2. Birtuskil á ljósum og dökkum flipum

Vafrar keyra nú oft í dökkum ham og margir notendur eru með flipastiku sem er ólík þema síðunnar. Dökkblátt tákn með gagnsæjum bakgrunni getur verið fullkomið á hvítum flipa en nær ósýnilegt á dökkgráum. Prófaðu alltaf báða.

Hagnýtar lausnir

• Bættu við bakgrunnsformi. Heilt ávalt ferningslaga form eða hringur í lit vörumerkisins tryggir að merkið hafi sín eigin birtuskil, óháð flipanum.
• Notaðu þunna útlínu eða geislabaug. 1px ljósari brún utan um dökkt tákn (eða öfugt) heldur skuggamyndinni sýnilegri í báðum þemum, en í 16x16 þarf hún að haldast skörp, svo prófaðu hana.
• Veldu miðlita vörumerkjaliti. Litir eins og sterkblár, appelsínugulur, grænn eða magenta virka yfirleitt bæði á hvítum og næstum svörtum flötum. Mjög ljósgulur eða mjög dökkblár eru áhættusömu litirnir.
• Notaðu aðlagandi SVG-favicon. SVG getur innihaldið prefers-color-scheme miðlafyrirspurn þannig að táknið breytist með kerfisþemanu.

<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>

Athugaðu að miðlafyrirspurnin endurspeglar þema stýrikerfisins eða vafrans, sem flipastikan fylgir yfirleitt, en ekki alltaf. Stuðningur við SVG-favicon er einnig misjafn: Chrome og Firefox ráða við þau, en Safari hefur sögulega dregist aftur úr, svo hafðu alltaf PNG- eða ICO-varaskrár. Hönnun með heilum bakgrunni er öflugasti kosturinn því hún þarf enga þemarökfræði.

3. Auðþekkjanleiki og samræmi vörumerkis

Notaðu lógómerkið (táknið eða einlitninginn), ekki heildarmerkið með orðmerkinu. Texti inni í 16x16 tákni er ólæsilegur og breitt láréttt merki sem er þjappað í ferning skilur eftir sig örmjóa ræmu í miðjunni.

• Ef vörumerkið þitt hefur tákn skaltu einfalda það fyrir litlar stærðir frekar en að minnka það bara. „Favicon-útgáfa“ með færri smáatriðum er staðlað verklag.
• Ef vörumerkið þitt er aðeins orðmerki skaltu taka fyrsta stafinn eða sérstakt stafapar og setja í leturgerð vörumerkisins í þungri þykkt.
• Hafðu litina í samræmi við merkið þitt, appatáknið og samfélagsmiðlamyndir, svo notandi þekki sama vörumerkið alls staðar.

Sérstaða skiptir jafn miklu máli og trúmennska við upprunalega merkið. Líttu á röð af flipum: ef þrjár aðrar vefsíður nota líka bláan hring mun þín ekki skera sig úr. Annað form eða annar litur nýtist betur en fullkomlega trú smækkun.

4. Litir: takmarkað, mettað litaval

Með svona fáa pixla bætir hver aukalitur við ringulreið. Stefndu á einn eða tvo liti auk í mesta lagi hvíts eða svarts. Mettaðir litir bera betur í lítilli stærð en pastellitir, sem renna gjarnan saman við bakgrunn flipans.

Fáðu smá lánað úr hugsun um aðgengi. WCAG gerir kröfu um að minnsta kosti 3:1 birtuskil fyrir mikilvæga grafíska hluti (viðmið 1.4.11, Non-text Contrast). Favicon fellur ekki formlega undir þetta, þar sem það er hluti af viðmóti vafrans en ekki efni síðunnar, en 3:1 milli tákns og bakgrunns þess, og milli táknsins og flipans, er skynsamlegt markmið. Forðastu líka að koma einhverju á framfæri með lit einum saman: rauð og græn afbrigði af sama tákni eru óaðgreinanleg fyrir marga litblinda notendur, svo breyttu forminu eða bættu við tákni.

5. Form, bil og öryggissvæði

Fylltu ferninginn

Vafraflipar sýna favicon í fastri, lítilli stærð, þannig að aukaspássía gerir merkið þitt aðeins minna. Fyrir hefðbundin flipatákn skaltu nota mestan hluta striga, með aðeins einum eða tveimur pixlum af andrými, svo merkið sé eins stórt og það getur orðið.

Ávalt eða ferkantað?

Vafrar klippa yfirleitt ekki flipatákn, svo formið sem þú teiknar er formið sem notendur sjá. Ferningur með örlítið ávölum hornum lítur snyrtilega út og gefur samræmdan bakgrunn; frjálst form eða hringur á gagnsæjum bakgrunni getur litið léttar og sérstæðar út. Hvort tveggja er í lagi. Veldu eitt og hafðu allt táknasafnið í samræmi.

Apple touch-tákn

iOS bætir eigin ávölum hornum við apple-touch-icon (180x180 er venjuleg stærð). Skilaðu ferningi sem fyllir út í brúnir án forávalra horna, annars gætirðu endað með sýnilegum dökkum eða hvítum röndum í hornunum.

Maskable-tákn fyrir Android og PWA

Maskable-tákn eru klippt af stýrikerfinu í hringi, ávala ferninga eða önnur form. Hafðu allt mikilvægt efni innan öryggissvæðisins: hrings í miðju táknsins með radíus sem er 40 prósent af breidd þess. Teygðu bakgrunnslitinn alla leið út að brúnum svo hver sem gríman er líti rétt út. Ekki endurnýta þröngt flipatákn sem nær út í brúnir sem maskable-tákn, því gríman mun skera það.

6. Gagnsæi

Gagnsæi er í lagi fyrir flipatákn og það er einmitt það sem lætur tákn án bakgrunns sitja hreint á hvaða flipalit sem er. Það er vandamál fyrir Apple touch-tákn: iOS fyllir gagnsæ svæði með heilum lit (yfirleitt svörtum), sem getur eyðilagt hönnunina. Gefðu apple-touch-icon alltaf ógagnsæjan bakgrunn í lit vörumerkisins. Hið sama á við um maskable-tákn og flest tilvik á heimaskjá Android, þar sem ógagnsær bakgrunnur gefur fyrirsjáanlega útkomu.

7. Stöðugleiki: ekki breyta því of oft

Favicon byggir upp viðurkenningu með endurtekningu. Tíðar breytingar neyða notendur til að læra upp á nýtt hvaða flipi er þinn og valda líka tæknilegum höfuðverk. Vafrar geyma favicon ákaft í skyndiminni og Google sækir þau og vistar aðskilið frá síðunum þínum, svo nýtt tákn getur tekið daga eða vikur að birtast í leitarniðurstöðum. Google biður einnig um stöðuga favicon-slóð, tákn þar sem stærðin er margfeldi af 48 pixlum (48x48, 96x96 og svo framvegis) og skrá sem hægt er að skríða á (ekki lokað af robots.txt). Líttu á favicon-breytingu sem ákvörðun á borð við endurmörkun vörumerkis, ekki árstíðabundna skreytingu.

8. Tilkynningastöður og kvikt favicon

Sum vefforrit breyta favicon til að sýna ólesin skilaboð, upptökustöðu eða villu. Vel gert er það gagnlegt; ofgert er það pirrandi.

• Notaðu lítið tilkynningamerki (punkt eða stutta tölu) í horni, ekki algjöra endurhönnun. Grunntáknið ætti áfram að vera auðþekkjanlegt.
• Notaðu það sparlega. Taktu tilkynningamerki frá fyrir atburði sem krefjast aðgerða notanda. Ekki láta táknið hreyfast stöðugt.
• Takmarkaðu tölur. Í 16x16 eru aðeins einn eða tveir tölustafir læsilegir; sýndu „9+“ eða einfaldan punkt í stað „137“.
• Núllstilltu fljótt þegar notandinn hefur afgreitt málið og endurheimtu sjálfgefna táknið.
• Treystu ekki á lit einan. Rauður punktur ætti líka að fá stuðning frá titli síðunnar, til dæmis „(3) Innhólf“, svo upplýsingarnar séu aðgengilegar öllum.

Kvik favicon eru yfirleitt teiknuð á striga (canvas) og skipt inn með því að uppfæra href á táknhlekkjaþættinum. Hægðu á uppfærslum, því stöðugar breytingar á favicon geta eytt örgjörvaafli og truflað notendur.

9. Afköst

Favicon eru lítil, en þau eru samt beiðnir sem hægt er að framkvæma illa.

• Hafðu skrárnar litlar. PNG-favicon er venjulega nokkur hundruð bæti upp í nokkur kílóbæti. Einfalt SVG getur verið undir 1 KB.
• Forðastu uppblásnar ICO-skrár. ICO með mörgum stærðum, 16, 32 og 48 pixla myndum, er nóg. Að fella inn 256x256 mynd margfaldar skráarstærðina án sýnilegs ávinnings í vafraflipum.
• Stilltu skyndiminnishausa. Berðu tákn fram með löngum Cache-Control líftíma, til dæmis public, max-age=31536000, immutable, og notaðu útgáfumerkt eða kjötkássað skráarheiti þegar þú breytir þeim.
• Tilgreindu tákn berum orðum. Vafrar biðja sjálfgefið um /favicon.ico, svo hafðu eitt til staðar, jafnvel þótt þú tilgreinir önnur tákn, til að forðast 404-hávaða í annálum þínum.
• Þjappaðu. Keyrðu PNG-skrár í gegnum taplausan fínstilli og smækkaðu SVG-skrár (minify).

<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'>

Ef þú vilt búa til allar þessar skrár úr einni upprunamynd býr favicon-rafall MakeFav til staðlað safn, og síða fyrir forritara fjallar um samþættingarmöguleika.

10. Aðgengi

Favicon hefur engan alt-texta og skjálesarar tilkynna það ekki, svo hefðbundin aðgengistól eins og alt-eigindi eiga ekki við. Það sem skiptir máli:

• Titill síðunnar ber merkinguna. Skrifaðu einstök, lýsandi <title>-element. Treystu aldrei á táknið til að miðla stöðu; endurspeglaðu öll tilkynningamerki í titlinum.
• Sýnileiki fyrir sjónskerta. Sterk birtuskil, feitt form og stórt merki hjálpa notendum sem skanna flipa með augunum.
• Óháð lit. Gakktu úr skugga um að form eða stafir greini á milli staða, ekki bara litbrigði.
• Minni truflun. Forðastu blikkandi eða hreyfimynda-favicon, sem geta valdið vanda hjá notendum sem eru viðkvæmir fyrir hreyfingu.

Gátlisti fyrir favicon UX

Prófunarlisti

Treystu ekki stóru forskoðuninni í hönnunarforritinu þínu. Prófaðu raunverulega táknið við raunverulegar aðstæður:

1. Margir vafrar. Athugaðu Chrome, Firefox, Safari og Edge, því hver þeirra velur tákn og stærðir örlítið ólíkt.
2. Ljós og dökkur hamur. Skiptu um þema stýrikerfis og vafra og skoðaðu flipastikuna í hvert skipti.
3. Retina- og venjulegir skjáir. Athugaðu á 1x skjá og 2x eða 3x skjá, og súmmaðu í vafranum.
4. Bókamerkjastika. Settu síðuna í bókamerki og athugaðu hvort táknið er enn læsilegt við hlið annarra vefsíðna.
5. Margir flipar. Opnaðu 20 flipa og athugaðu hvort þú finnur þinn í fljótu bragði.
6. Forskoðun í Google-leitarniðurstöðum. Athugaðu leitarniðurstöðu í síma þegar táknið hefur verið skriðið aftur. Mundu að það getur tekið tíma að uppfærast.
7. Heimaskjár. Bættu vefnum á heimaskjá iOS og Android og staðfestu að táknið sé ekki klippt, hafi engin svört horn og sé ekki of lítið innan grímunnar.
8. Tæknileg athugun. Keyrðu lénið þitt í gegnum favicon-athugun MakeFav til að staðfesta að skrárnar séu til, skili 200-stöðu, hafi réttar stærðir og séu rétt tilgreindar í HTML-kóðanum þínum.

Hagnýtt vinnuferli

1. Byrjaðu á lógómerkinu þínu og einfaldaðu það í eitt form eða einn staf.
2. Búðu til ferkantaðan striga með heilum eða mótuðum bakgrunni sem virkar í báðum þemum.
3. Fluttu út 32x32 og 16x16 stærðirnar og fínpússaðu litlu útgáfuna í höndunum í pixlaritlinum.
4. Búðu til allt safnið (ICO, PNG, apple-touch-icon, manifest-tákn) með rafallinum.
5. Bættu við link-tögunum, stilltu skyndiminnishausa, settu í loftið og staðfestu með athuguninni.

Favicon er ein minnsta eignin á vefnum þínum og ein sú sem sést oftast. Nokkrar vandaðar ákvarðanir um birtuskil, einfaldleika og samræmi gera það að verkum að það virkar í hverjum flipa, þema og tæki.

Algengar spurningar

Hvaða stærð ætti favicon að vera?

Hannaðu fyrir 16x16 og 32x32 fyrir vafraflipa (vafrinn notar 32x32 á skjám með háum pixlaþéttleika), búðu til 180x180 apple-touch-icon fyrir iOS og 192x192 og 512x512 PNG fyrir Android og PWA. Fyrir Google-leitarniðurstöður skaltu nota ferkantað tákn þar sem stærðin er margfeldi af 48 pixlum, til dæmis 48x48 eða 96x96. SVG-uppspretta skalast í þær allar.

Ætti ég að nota allt merkið mitt sem favicon?

Yfirleitt ekki. Heildarmerki með orðmerki eru of ítarleg og of breið fyrir ferkantað 16x16 tákn. Notaðu lógómerkið eða einlitning með einum eða tveimur stöfum og einfaldaðu það svo það haldist auðþekkjanlegt þegar það er agnarlítið.

Hvernig læt ég favicon virka í dökkum ham?

Öruggasta leiðin er að gefa tákninu sitt eigið heila bakgrunnsform eða andstæða útlínu, svo það sé ekki háð lit flipans. Annars geturðu notað SVG-favicon með prefers-color-scheme miðlafyrirspurn til að skipta um liti, og haldið PNG- eða ICO-varaskrám fyrir vafra sem styðja ekki SVG-tákn. Prófaðu alltaf bæði í ljósu og dökku þema.

Af hverju birtist nýja favicon-ið mitt ekki?

Vafrar geyma favicon í skyndiminni í langan tíma og Google geymir sitt eigið afrit, sem það endurnýjar eftir eigin áætlun og tekur oft daga eða vikur. Endurhladdu síðuna með hörðu endurhleðslunni, hreinsaðu skyndiminni vafrans, notaðu nýtt útgáfumerkt skráarheiti og gakktu úr skugga um að link-tögin og /favicon.ico í rót vísi á réttu skrána. Þú getur staðfest uppsetninguna með athugun MakeFav.

Er góð hugmynd að sýna tilkynningamerki á favicon?

Já, ef það er notað sparlega. Lítill punktur eða eins eða tveggja stafa tala hjálpar notendum að taka eftir einhverju sem krefst aðgerða, en stöðug hreyfing eða stórar tölur skaða læsileika og athygli. Endurspeglaðu alltaf stöðuna í titli síðunnar, endurheimtu sjálfgefna táknið þegar málið hefur verið afgreitt og treystu ekki á lit einan.