Favicon UX: Hvad kendetegner et godt favicon

Et godt favicon er et enkelt mærke med høj kontrast, som regel dit logomærke eller et eller to bogstaver, der er læseligt i 16x16 pixel på både lyse og mørke browserfaner, passer til dit brand og sjældent ændres. Alt andet i denne guide (pixeljustering, farver, margener, gennemsigtighed, filstørrelse) tjener de samme mål: at gøre dit website let at finde blandt dusinvis af åbne faner.

Et favicon er lille, men det dukker op mange steder: i browserfaner, bogmærkelinjer, historiklister, fanesøgningsmenuen, Googles søgeresultater på mobil og computer samt på telefoners startskærme. For brugere med mange faner åbne bliver titlen ofte afkortet til ingenting, og ikonet er det eneste, der er tilbage. Det gør det til et reelt navigationselement og ikke blot pynt.

1. Læsbarhed i 16x16

Den klassiske favicon-størrelse er 16x16 CSS-pixel. På en almindelig skærm er det helt bogstaveligt 256 pixel; på en retina-skærm med 2x vælger browseren som regel et 32x32-billede til det samme område. Uanset hvad du designer, skal det kunne overleve denne reduktion.

Hold det enkelt

• Én form eller ét til to bogstaver. Et enkelt fedt bogstav, en cirkel med et symbol eller et simpelt geometrisk mærke fungerer. Tre bogstaver eller et ord bliver til støj.
• Ét omdrejningspunkt. Hvis du ikke kan beskrive ikonet med fem ord, er det for kompliceret.
• Ingen farveovergange, skygger eller fine teksturer. De bliver til slørede klatter i små størrelser.

Juster efter pixelgitteret

I 16x16 bliver en streg, der ligger en halv pixel ved siden af gitteret, anti-aliaset over to rækker pixel og ser grå og blød ud. Placér kanter på hele pixelgrænser, og brug lige bredder, hvor formen er symmetrisk. Hvis du eksporterer fra et vektorværktøj, så aktivér pixel snapping, eller tjek det nedskalerede resultat og ret det til i hånden.

Undgå tynde linjer

Streger, der er tyndere end 2 pixel i 16x16 (cirka 12 procent af ikonets bredde), har en tendens til at forsvinde eller flimre mellem størrelserne. Gør stregerne tykkere, fjern indre detaljer, og luk små mellemrum. Et fedt, let tungt tegn læses som regel bedre end en tro miniature af et detaljeret logo.

Finjustér i hånden

ICO- og PNG-filer har ingen hinting som skrifttyper, så manuel redigering af pixel er det tilsvarende: Du justerer enkelte pixel, så kurver, diagonaler og indre rum (hullerne i bogstaver som "a" eller "e") forbliver skarpe. Automatisk nedskalering er et godt første udkast, men et par håndplacerede pixel kan gøre forskellen på en klat og et genkendeligt bogstav. MakeFav pixeleditor er bygget til netop dette: Åbn 16x16-lærredet, ret de problematiske pixel, og eksportér.

2. Kontrast på lyse og mørke faner

Browsere kører i dag ofte i mørk tilstand, og mange brugere har fanelinjer, der afviger fra sidens tema. Et mørkeblåt ikon med gennemsigtig baggrund kan være perfekt på en hvid fane og næsten usynligt på en mørkegrå. Test altid begge dele.

Praktiske løsninger

• Tilføj en baggrundsform. En massiv afrundet firkant eller cirkel i en brandfarve sikrer, at mærket har sin egen kontrast uanset fane.
• Brug en tynd kontur eller glorie. En lysere kant på 1 px rundt om et mørkt tegn (eller omvendt) holder silhuetten synlig i begge temaer, men i 16x16 skal den forblive skarp, så test den.
• Vælg brandfarver i mellemtoner. Farver som kraftig blå, orange, grøn eller magenta fungerer typisk på både hvide og næsten sorte flader. Meget lys gul og meget mørk marineblå er de risikable.
• Brug et adaptivt SVG-favicon. En SVG kan indeholde en prefers-color-scheme media query, så ikonet skifter med systemets tema.

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

Bemærk, at media queryen afspejler styresystemets eller browserens tema, som fanelinjen som regel følger, men ikke altid. Understøttelsen af SVG-favicons varierer også: Chrome og Firefox håndterer dem, mens Safari historisk har haltet bagefter, så behold altid PNG- eller ICO-fallbacks. Et design med massiv baggrund er den mest robuste løsning, fordi det slet ikke kræver nogen temalogik.

3. Genkendelighed og brandkonsistens

Brug logomærket (symbolet eller monogrammet), ikke hele logoopsætningen med ordmærket. Tekst i et 16x16-ikon er ulæselig, og et bredt, vandret logo, der er presset ned i en firkant, efterlader dig med en lille stribe i midten.

• Hvis dit brand har et symbol, så forenkl det til små størrelser i stedet for blot at skalere det ned. En "favicon-version" med færre detaljer er almindelig praksis.
• Hvis dit brand kun er et ordmærke, så tag det første bogstav eller et karakteristisk bogstavpar, og sæt det i din brandskrifttype i en tung skriftvægt.
• Hold farverne ensartede med dit logo, dit app-ikon og dine avatarer på sociale medier, så brugeren genkender samme brand overalt.

Særpræg betyder lige så meget som troskab mod originalen. Se på en række faner: Hvis tre andre sites også bruger en blå cirkel, vil dit ikke skille sig ud. En anden form eller farve er mere nyttig end en perfekt tro reduktion.

4. Farver: en begrænset, mættet palet

Med så få pixel tilføjer hver ekstra farve uro. Sigt efter én eller to farver plus højst hvid eller sort. Mættede farver bærer bedre i små størrelser end pasteller, som har en tendens til at smelte sammen med fanens baggrund.

Lån lidt fra tilgængelighedstænkningen. WCAG kræver mindst 3:1 kontrast for meningsfulde grafiske objekter (succeskriterium 1.4.11, Non-text Contrast). Et favicon er ikke formelt dækket, da det er en del af browserens grænseflade og ikke sideindhold, men 3:1 mellem tegnet og dets baggrund samt mellem ikonet og fanen er et fornuftigt mål. Undgå også at formidle noget alene gennem farvetone: Røde og grønne varianter af det samme ikon kan ikke skelnes for mange farveblinde, så varier formen, eller tilføj et symbol.

5. Form, margener og sikre zoner

Fyld firkanten ud

Browserfaner viser favicon i en fast lille størrelse, så ekstra margen gør blot dit mærke mindre. Til almindelige fane-ikoner bør du bruge det meste af lærredet med kun en pixel eller to i luft, så mærket bliver så stort som muligt.

Afrundet eller firkantet?

Browsere beskærer generelt ikke fane-favicons, så den form, du tegner, er den form, brugerne ser. En firkant med let afrundede hjørner ser pæn ud og giver en ensartet baggrund; et frit tegn eller en cirkel på gennemsigtig baggrund kan se lettere og mere karakteristisk ud. Begge dele er fint. Vælg én, og hold hele dit ikonsæt konsistent.

Apple touch-ikoner

iOS tilføjer sine egne afrundede hjørner til apple-touch-icon (180x180 er den sædvanlige størrelse). Levér en firkant, der fylder helt ud til kanten, uden forudafrundede hjørner, ellers kan du ende med synlige mørke eller hvide kanter i hjørnerne.

Maskable-ikoner til Android og PWA'er

Maskable-ikoner bliver beskåret af styresystemet til cirkler, squircles eller andre former. Hold alt vigtigt indhold inden for den sikre zone: en cirkel centreret i ikonet med en radius på 40 procent af ikonets bredde. Før baggrundsfarven helt ud til kanterne, så enhver maske ser rigtig ud. Genbrug ikke et stramt, kant-til-kant fane-favicon som maskable-ikon, for masken vil beskære det.

6. Gennemsigtighed

Gennemsigtighed er fint til fane-favicons, og det er det, der lader et ikon med kun et tegn sidde rent på enhver fanefarve. Det er et problem for Apple touch-ikoner: iOS fylder gennemsigtige områder med en ensfarvet farve (typisk sort), hvilket kan ødelægge designet. Giv altid apple-touch-icon en uigennemsigtig baggrund i din brandfarve. Det samme gælder maskable-ikoner og de fleste anvendelser på Androids startskærm, hvor en uigennemsigtig baggrund giver forudsigelige resultater.

7. Stabilitet: ændr det ikke for ofte

Et favicon opbygger genkendelighed gennem gentagelse. Hvis du ændrer det hyppigt, tvinger du brugerne til at lære på ny, hvilken fane der er din, og det giver også tekniske hovedpiner. Browsere cacher favicons aggressivt, og Google henter og gemmer dem adskilt fra dine sider, så et nyt ikon kan tage dage eller uger om at dukke op i søgeresultaterne. Google beder desuden om en stabil favicon-URL, et ikon hvis størrelse er et multiplum af 48 pixel (48x48, 96x96 og så videre) og en fil, som kan crawles (ikke blokeret af robots.txt). Betragt en ændring af faviconet som en beslutning på niveau med en rebranding og ikke som sæsondekoration.

8. Notifikationstilstande og dynamiske favicons

Nogle webapps ændrer faviconet for at vise ulæste beskeder, optagestatus eller en fejl. Gjort godt er det nyttigt; overdrevet er det irriterende.

• Brug en lille badge (en prik eller et kort tal) i et hjørne, ikke et helt nyt design. Basisikonet skal forblive genkendeligt.
• Brug det sparsomt. Gem badges til hændelser, der kræver handling fra brugeren. Animér ikke ikonet konstant.
• Begræns tal. I 16x16 er kun ét eller to cifre læselige; vis "9+" eller en almindelig prik i stedet for "137".
• Nulstil hurtigt, når brugeren har håndteret sagen, og gendan standardikonet.
• Stol ikke kun på farve. En rød prik bør også understøttes af sidens titel, for eksempel "(3) Indbakke", så oplysningen er tilgængelig for alle.

Dynamiske favicons tegnes som regel på et canvas og skiftes ind ved at opdatere href på ikonets link-element. Begræns opdateringerne, for hvis faviconet hele tiden ændres, kan det bruge CPU og distrahere brugerne.

9. Ydeevne

Favicons er små, men de er stadig forespørgsler, som kan implementeres dårligt.

• Hold filerne små. Et PNG-favicon fylder typisk fra nogle hundrede bytes til et par kilobytes. En simpel SVG kan fylde under 1 KB.
• Undgå oppustede ICO-filer. En ICO med flere størrelser med billeder på 16, 32 og 48 pixel er nok. At indlejre et 256x256-billede mangedobler filstørrelsen uden synlig fordel i browserfaner.
• Sæt caching-headers. Server ikoner med en lang Cache-Control-levetid, for eksempel public, max-age=31536000, immutable, og brug et versioneret eller hashet filnavn, når du ændrer dem.
• Deklarér ikoner eksplicit. Browsere anmoder som standard om /favicon.ico, så angiv en, selv om du deklarerer andre ikoner, for at undgå 404-støj i dine logs.
• Komprimér. Kør PNG-filer gennem en tabsfri optimerer, og minificér SVG-filer.

<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 filer ud fra ét kildebillede, producerer MakeFav favicon-generatoren standardsættet, og udviklersiden beskriver integrationsmulighederne.

10. Tilgængelighed

Et favicon har ingen alt-tekst, og skærmlæsere oplæser det ikke, så de traditionelle tilgængelighedsværktøjer som alt-attributter gælder ikke. Det, der betyder noget:

• Sidens titel bærer meningen. Skriv unikke, beskrivende <title>-elementer. Stol aldrig på, at ikonet formidler status; gentag enhver badge i titlen.
• Synlighed for svagsynede brugere. Høj kontrast, en fed form og et stort mærke hjælper brugere, der scanner faner visuelt.
• Uafhængighed af farve. Sørg for, at former eller bogstaver adskiller tilstande, ikke kun farvetone.
• Mindre distraktion. Undgå blinkende eller animerede favicons, som kan være et problem for brugere, der er følsomme over for bevægelse.

Favicon UX-tjekliste

Testtjekliste

Stol ikke på det store eksempel i dit designværktøj. Test det rigtige ikon under reelle forhold:

1. Flere browsere. Tjek Chrome, Firefox, Safari og Edge, da hver især vælger ikoner og størrelser en smule forskelligt.
2. Lys og mørk tilstand. Skift tema i styresystemet og browseren, og se på fanelinjen hver gang.
3. Retina- og almindelige skærme. Tjek på en 1x-skærm og en 2x- eller 3x-skærm, og zoom ind i browseren.
4. Bogmærkelinjen. Gem siden som bogmærke, og se, om ikonet stadig er læseligt ved siden af andre sites.
5. Mange faner. Åbn 20 faner, og se, om du kan finde din med et enkelt blik.
6. Google SERP-eksempel. Tjek et søgeresultat på mobil, når ikonet er blevet crawlet igen. Husk, at det kan tage tid at opdatere.
7. Startskærm. Føj sitet til startskærmen på iOS og Android, og bekræft, at ikonet ikke er beskåret, ikke har sorte hjørner og ikke er for småt i sin maske.
8. Teknisk tjek. Kør dit domæne gennem MakeFav favicon-checkeren for at bekræfte, at filerne findes, returnerer status 200, har de rigtige størrelser og er korrekt deklareret i din HTML.

En praktisk arbejdsgang

1. Start med dit logomærke, og forenkl det til én form eller ét bogstav.
2. Opret et firkantet lærred med en massiv eller formet baggrund, der fungerer i begge temaer.
3. Eksportér størrelserne 32x32 og 16x16, og finpuds den lille version i hånden i pixeleditoren.
4. Generér det fulde sæt (ICO, PNG, apple-touch-icon, manifest-ikoner) med generatoren.
5. Tilføj link-tags, sæt cache-headers, udgiv, og verificér med checkeren.

Et favicon er en af de mindste ressourcer på dit site og en af dem, der ses oftest. Nogle få velovervejede beslutninger om kontrast, enkelhed og konsistens får det til at fungere i enhver fane, ethvert tema og på enhver enhed.

Ofte stillede spørgsmål

Hvilken størrelse skal et favicon have?

Design til 16x16 og 32x32 til browserfaner (browseren bruger 32x32 på skærme med høj tæthed), lav et apple-touch-icon på 180x180 til iOS og PNG-filer på 192x192 og 512x512 til Android og PWA'er. Til Googles søgeresultater skal du bruge et firkantet ikon, hvis størrelse er et multiplum af 48 pixel, for eksempel 48x48 eller 96x96. En SVG-kilde skalerer til dem alle.

Skal jeg bruge mit fulde logo som favicon?

Som regel ikke. Fulde logoer med ordmærker er for detaljerede og for brede til et firkantet 16x16-ikon. Brug logomærket eller et monogram med et eller to bogstaver, og forenkl det, så det forbliver genkendeligt, selv når det er småt.

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

Den sikreste fremgangsmåde er at give ikonet sin egen massive baggrundsform eller en kontrasterende kontur, så det ikke afhænger af fanens farve. Alternativt kan du bruge et SVG-favicon med en prefers-color-scheme media query til at skifte farver og beholde PNG- eller ICO-fallbacks til browsere, der ikke understøtter SVG-ikoner. Test altid i både lyse og mørke temaer.

Hvorfor vises mit nye favicon ikke?

Browsere cacher favicons i lang tid, og Google gemmer sin egen kopi, som den opdaterer efter sin egen tidsplan, hvilket ofte tager dage eller uger. Lav en hård genindlæsning af siden, ryd browserens cache, brug et nyt versioneret filnavn, og sørg for, at link-tags og en /favicon.ico i roden peger på den rigtige fil. Du kan verificere opsætningen med MakeFav-checkeren.

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

Ja, hvis det bruges sparsomt. En lille prik eller et tal med et eller to cifre hjælper brugerne med at bemærke noget, der kræver handling, men konstant animation eller store tal skader læsbarheden og opmærksomheden. Gentag altid tilstanden i sidens titel, gendan standardikonet, når sagen er håndteret, og stol ikke kun på farve.