Favicon-UX: Hva kjennetegner et godt favicon

Et godt favicon er et enkelt merke med høy kontrast, vanligvis logosymbolet ditt eller en–to bokstaver, som er lesbart i 16x16 piksler på både lyse og mørke nettleserfaner, passer til merkevaren din og sjelden endres. Alt annet i denne guiden (pikseljustering, farger, marger, gjennomsiktighet, filstørrelse) tjener disse målene: å gjøre nettstedet ditt umiddelbart lett å finne blant dusinvis av åpne faner.

Et favicon er lite, men dukker opp mange steder: i nettleserfaner, bokmerkelinjer, historikklister, fanesøket, Google-søkeresultater på mobil og skrivebord, og på startskjermen til telefonen. For brukere med mange åpne faner blir tittelen ofte avkortet til ingenting, og ikonet er det eneste som er igjen. Det gjør det til et reelt navigasjonselement, ikke pynt.

1. Lesbarhet i 16x16

Den klassiske favicon-størrelsen er 16x16 CSS-piksler. På en vanlig skjerm er det bokstavelig talt 256 piksler; på en retina-skjerm med 2x velger nettleseren vanligvis et 32x32-bilde for samme plass. Uansett hva du designer, må det tåle denne forminskelsen.

Hold det enkelt

• Én form eller én til to bokstaver. En enkelt fet bokstav, en sirkel med et symbol eller et enkelt geometrisk merke fungerer. Tre bokstaver eller et ord blir bare støy.
• Ett fokuspunkt. Hvis du ikke kan beskrive ikonet med fem ord, er det for komplisert.
• Ingen gradienter, skygger eller fine teksturer. De blir uskarpe flekker i små størrelser.

Juster etter pikselrutenettet

I 16x16 blir en linje som ligger en halv piksel utenfor rutenettet kantutjevnet over to pikselrader og ser grå og myk ut. Plasser kantene på hele pikselgrenser, og bruk partall som bredde der formen er symmetrisk. Hvis du eksporterer fra et vektorverktøy, slå på pikselsnapping, eller sjekk det nedskalerte resultatet og rett det opp for hånd.

Unngå tynne linjer

Streker tynnere enn 2 piksler i 16x16 (omtrent 12 prosent av ikonbredden) har en tendens til å forsvinne eller flimre mellom størrelsene. Gjør strekene tykkere, fjern indre detaljer og slå sammen små mellomrom. Et fet, litt tung glyf er ofte lettere å lese enn en tro miniatyr av en detaljert logo.

Finjuster for hånd

ICO- og PNG-filer har ingen hinting i fontstil, så manuell pikselredigering er det tilsvarende: du justerer enkeltpiksler slik at kurver, diagonaler og motformer (hullene i bokstaver som «a» eller «e») forblir skarpe. Automatisk nedskalering er et godt førsteutkast, men noen få håndplasserte piksler utgjør ofte forskjellen mellom en klatt og en gjenkjennelig bokstav. MakeFavs pikseleditor er laget for dette: åpne 16x16-lerretet, rett opp problempikslene og eksporter.

2. Kontrast på lyse og mørke faner

Nettlesere kjøres nå ofte i mørk modus, og mange brukere har fanelinjer som avviker fra sidens tema. Et mørkt marineblått ikon med gjennomsiktig bakgrunn kan være perfekt på en hvit fane og nesten usynlig på en mørkegrå. Test alltid begge.

Praktiske løsninger

• Legg til en bakgrunnsform. Et heldekkende avrundet kvadrat eller en sirkel i en merkevarefarge sikrer at merket har sin egen kontrast, uavhengig av fanen.
• Bruk en tynn kontur eller glorie. En lysere kant på 1 px rundt en mørk glyf (eller omvendt) holder silhuetten synlig i begge temaene, men i 16x16 må den forbli skarp, så test den.
• Velg merkevarefarger i mellomtone. Farger som sterk blå, oransje, grønn eller magenta fungerer vanligvis både på hvite og nesten svarte flater. Svært lys gul eller svært mørk marineblå er de risikable.
• Bruk et adaptivt SVG-favicon. En SVG kan inneholde en prefers-color-scheme-mediespørring slik at ikonet endres med systemtemaet.

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

Merk at mediespørringen gjenspeiler operativsystemets eller nettleserens tema, som fanelinjen vanligvis følger, men ikke alltid. Støtten for SVG-favicon varierer også: Chrome og Firefox håndterer dem, mens Safari historisk har ligget etter, så ha alltid PNG- eller ICO-reserveløsninger. Et design med heldekkende bakgrunn er det mest robuste alternativet, fordi det ikke trenger noen temalogikk i det hele tatt.

3. Gjenkjennelighet og merkevarekonsistens

Bruk logosymbolet (symbolet eller monogrammet), ikke hele logoversjonen med ordmerket. Tekst i et 16x16-ikon er uleselig, og en bred, horisontal logo som presses inn i et kvadrat gir bare en liten stripe i midten.

• Hvis merkevaren din har et symbol, forenkle det for små størrelser i stedet for bare å skalere det ned. En «favicon-versjon» med færre detaljer er vanlig praksis.
• Hvis merkevaren din bare er et ordmerke, bruk første bokstav eller et særpreget bokstavpar i merkevarens skrifttype med tung vekt.
• Hold fargene i samsvar med logoen, app-ikonet og avatarene i sosiale medier, slik at brukeren gjenkjenner den samme merkevaren overalt.

Særpreg er like viktig som troskap. Se på en rad med faner: hvis tre andre nettsteder også bruker en blå sirkel, vil ikke ditt skille seg ut. En annen form eller farge er mer nyttig enn en perfekt tro forminskelse.

4. Farger: en begrenset, mettet palett

Med så få piksler legger hver ekstra farge til rot. Sikt mot én eller to farger pluss høyst hvit eller svart. Mettede farger bærer bedre i små størrelser enn pasteller, som har en tendens til å flyte sammen med fanebakgrunnen.

Hent litt inspirasjon fra universell utforming. WCAG krever minst 3:1 kontrast for meningsbærende grafiske objekter (suksesskriterium 1.4.11, Kontrast for ikke-tekst). Et favicon er ikke formelt dekket, siden det er nettleserens grensesnitt og ikke sideinnhold, men 3:1 mellom glyfen og bakgrunnen, og mellom ikonet og fanen, er et godt mål. Unngå også å formidle noe gjennom fargetone alene: røde og grønne varianter av samme ikon kan ikke skilles fra hverandre for mange fargeblinde brukere, så varier formen eller legg til et symbol.

5. Form, marger og sikre soner

Fyll kvadratet

Nettleserfaner viser favicon i en fast, liten størrelse, så ekstra marg gjør bare merket ditt mindre. For vanlige faneikoner bør du bruke mesteparten av lerretet, med bare en piksel eller to med luft, slik at merket blir så stort som mulig.

Avrundet eller kvadratisk?

Nettlesere beskjærer vanligvis ikke favicon i faner, så formen du tegner er formen brukerne ser. Et kvadrat med lett avrundede hjørner ser ryddig ut og gir en jevn bakgrunn; en frittstående glyf eller sirkel på gjennomsiktig bunn kan se lettere og mer særpreget ut. Begge deler er greit. Velg ett og hold hele ikonsettet konsistent.

Apple touch-ikoner

iOS legger til egne avrundede hjørner på apple-touch-icon (180x180 er vanlig størrelse). Lever et kvadrat som går helt ut til kantene, uten forhåndsavrundede hjørner, ellers kan du ende opp med synlige mørke eller hvite flekker i hjørnene.

Maskbare ikoner for Android og PWA-er

Maskbare ikoner beskjæres av operativsystemet til sirkler, «squircles» eller andre former. Hold alt viktig innhold innenfor den sikre sonen: en sirkel sentrert i ikonet med en radius på 40 prosent av ikonbredden. Utvid bakgrunnsfargen helt ut til kantene slik at enhver maske ser riktig ut. Ikke gjenbruk et stramt favicon som går helt ut til kantene som maskbart ikon, for masken vil kutte det.

6. Gjennomsiktighet

Gjennomsiktighet er greit for faneikoner, og det er det som lar et ikon med bare en glyf sitte pent på enhver fanefarge. Det er et problem for Apple touch-ikoner: iOS fyller gjennomsiktige områder med en heldekkende farge (vanligvis svart), noe som kan ødelegge designet. Gi alltid apple-touch-icon en ugjennomsiktig bakgrunn i merkevarefargen din. Det samme gjelder maskbare ikoner og de fleste bruksområder på Androids startskjerm, der en ugjennomsiktig bakgrunn gir forutsigbare resultater.

7. Stabilitet: ikke endre det for ofte

Et favicon bygger gjenkjennelse gjennom gjentakelse. Hvis du endrer det ofte, må brukerne lære på nytt hvilken fane som er din, og det gir også tekniske utfordringer. Nettlesere bufrer favicon aggressivt, og Google henter og lagrer dem separat fra sidene dine, så et nytt ikon kan bruke dager eller uker på å vises i søkeresultatene. Google ber også om en stabil favicon-URL, et ikon med en størrelse som er et multiplum av 48 piksler (48x48, 96x96 og så videre), og en fil som kan crawles (ikke blokkert av robots.txt). Behandle en favicon-endring som en beslutning på nivå med en merkevareendring, ikke som sesongpynt.

8. Varslingstilstander og dynamiske favicon

Noen nettapper endrer favicon for å vise uleste meldinger, opptaksstatus eller en feil. Gjort riktig er det nyttig; overdrevet er det irriterende.

• Bruk et lite merke (en prikk eller et kort tall) i et hjørne, ikke en total redesign. Grunnikonet bør fortsatt være gjenkjennelig.
• Bruk det sparsomt. Reserver merker for hendelser som krever handling fra brukeren. Ikke animer ikonet kontinuerlig.
• Sett tak på tall. I 16x16 er bare ett eller to sifre lesbare; vis «9+» eller en enkel prikk i stedet for «137».
• Nullstill raskt når brukeren har tatt hånd om saken, og gjenopprett standardikonet.
• Ikke stol på farge alene. En rød prikk bør også støttes av sidetittelen, for eksempel «(3) Innboks», slik at informasjonen er tilgjengelig for alle.

Dynamiske favicon tegnes vanligvis på et canvas og byttes inn ved å oppdatere href på ikonets link-element. Begrens oppdateringsfrekvensen, for stadige endringer av favicon kan bruke CPU og distrahere brukerne.

9. Ytelse

Favicon er små, men de er likevel forespørsler som kan gjøres dårlig.

• Hold filene små. Et PNG-favicon er vanligvis noen hundre byte til noen få kilobyte. En enkel SVG kan være under 1 KB.
• Unngå oppblåste ICO-filer. En ICO med flere størrelser og bilder på 16, 32 og 48 piksler er nok. Å bygge inn et 256x256-bilde multipliserer filstørrelsen uten synlig nytte i nettleserfaner.
• Sett cache-headere. Server ikoner med lang Cache-Control-levetid, for eksempel public, max-age=31536000, immutable, og bruk et versjonert eller hashet filnavn når du endrer dem.
• Deklarer ikoner eksplisitt. Nettlesere ber om /favicon.ico som standard, så oppgi en selv om du deklarerer andre ikoner, for å unngå 404-støy i loggene dine.
• Komprimer. Kjør PNG-er gjennom en tapsfri optimalisator, og minifiser SVG-er.

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

Hvis du vil generere alle disse filene fra ett kildebilde, lager MakeFavs favicon-generator standardsettet, og utviklersiden dekker integrasjonsmuligheter.

10. Tilgjengelighet

Et favicon har ingen alternativ tekst, og skjermlesere leser det ikke opp, så de tradisjonelle tilgjengelighetsverktøyene som alt-attributter gjelder ikke. Det som betyr noe:

• Sidetittelen bærer meningen. Skriv unike, beskrivende <title>-elementer. Stol aldri på ikonet for å formidle tilstand; gjenspeil ethvert merke i tittelen.
• Synlighet for svaksynte brukere. Høy kontrast, en fet form og et stort merke hjelper brukere som skanner faner visuelt.
• Uavhengighet av farge. Sørg for at former eller bokstaver skiller tilstander, ikke bare fargetone.
• Mindre distraksjon. Unngå blinkende eller animerte favicon, som kan være et problem for brukere som er følsomme for bevegelse.

Sjekkliste for favicon-UX

Sjekkliste for testing

Ikke stol på den store forhåndsvisningen i designverktøyet ditt. Test det ekte ikonet under ekte forhold:

1. Flere nettlesere. Sjekk Chrome, Firefox, Safari og Edge, siden hver velger ikoner og størrelser litt ulikt.
2. Lys og mørk modus. Bytt tema i operativsystemet og nettleseren, og se på fanelinjen hver gang.
3. Retina- og vanlige skjermer. Sjekk på en 1x-skjerm og en 2x- eller 3x-skjerm, og zoom i nettleseren.
4. Bokmerkelinjen. Bokmerk siden og se om ikonet fortsatt er lesbart ved siden av andre nettsteder.
5. Mange faner. Åpne 20 faner og se om du finner din med et blikk.
6. Forhåndsvisning i Google-søk. Sjekk et søkeresultat på mobil etter at ikonet er crawlet på nytt. Husk at det kan ta tid å oppdatere.
7. Startskjerm. Legg nettstedet til på startskjermen på iOS og Android, og bekreft at ikonet ikke er beskåret, ikke har svarte hjørner og ikke er for lite innenfor masken.
8. Teknisk sjekk. Kjør domenet ditt gjennom MakeFavs favicon-sjekker for å bekrefte at filene finnes, returnerer statuskode 200, har riktige størrelser og er deklarert riktig i HTML-en din.

En praktisk arbeidsflyt

1. Start med logosymbolet ditt og forenkle det til én form eller bokstav.
2. Lag et kvadratisk lerret med en heldekkende eller formet bakgrunn som fungerer i begge temaene.
3. Eksporter størrelsene 32x32 og 16x16, og finpuss den lille versjonen for hånd i pikseleditoren.
4. Generer hele settet (ICO, PNG, apple-touch-icon, manifest-ikoner) med generatoren.
5. Legg til link-taggene, sett cache-headere, publiser og verifiser med sjekkeren.

Et favicon er en av de minste ressursene på nettstedet ditt og en av de som sees oftest. Noen få nøye valg om kontrast, enkelhet og konsistens gjør at det fungerer i alle faner, temaer og på alle enheter.

Ofte stilte spørsmål

Hvilken størrelse bør et favicon ha?

Design for 16x16 og 32x32 for nettleserfaner (nettleseren bruker 32x32 på skjermer med høy tetthet), lever et 180x180 apple-touch-icon for iOS, og PNG-er på 192x192 og 512x512 for Android og PWA-er. For Google-søkeresultater bruker du et kvadratisk ikon med en størrelse som er et multiplum av 48 piksler, for eksempel 48x48 eller 96x96. En SVG-kilde skalerer til alle disse.

Bør jeg bruke hele logoen min som favicon?

Vanligvis ikke. Hele logoer med ordmerke er for detaljerte og for brede for et kvadratisk 16x16-ikon. Bruk logosymbolet eller et monogram med en eller to bokstaver, og forenkle det slik at det forblir gjenkjennelig når det er lite.

Hvordan får jeg et favicon til å fungere i mørk modus?

Den tryggeste fremgangsmåten er å gi ikonet sin egen heldekkende bakgrunnsform eller en kontrasterende kontur, slik at det ikke avhenger av fanefargen. Alternativt kan du bruke et SVG-favicon med en prefers-color-scheme-mediespørring for å bytte farger, og beholde PNG- eller ICO-reserveløsninger for nettlesere som ikke støtter SVG-ikoner. Test alltid i både lyst og mørkt tema.

Hvorfor vises ikke det nye faviconet mitt?

Nettlesere bufrer favicon lenge, og Google lagrer sin egen kopi, som oppdateres etter eget tidsskjema og ofte tar dager eller uker. Gjør en hard oppdatering av siden, tøm nettleserbufferen, bruk et nytt versjonert filnavn, og sørg for at link-taggene og en /favicon.ico i roten peker til riktig fil. Du kan verifisere oppsettet med MakeFav-sjekkeren.

Er det en god idé å vise varslingsmerker på et favicon?

Ja, hvis det brukes sparsomt. En liten prikk eller et tall med ett eller to sifre hjelper brukerne å legge merke til noe som krever handling, men konstant animasjon eller store tall skader lesbarhet og oppmerksomhet. Gjenspeil alltid tilstanden i sidetittelen, gjenopprett standardikonet når saken er håndtert, og ikke stol på farge alene.