Favicon-UX: Vad som gör en bra favicon

En bra favicon är en enkel, kontrastrik symbol, oftast ditt bildmärke eller en eller två bokstäver, som förblir läsbar i 16x16 pixlar på både ljusa och mörka webbläsarflikar, passar ditt varumärke och sällan ändras. Allt annat i den här guiden (pixeljustering, färg, marginaler, transparens, filstorlek) tjänar de målen: att göra din webbplats lätt att hitta direkt bland dussintals öppna flikar.

En favicon är liten, men den syns på många ställen: i webbläsarflikar, bokmärkesfält, historiklistor, flikmenyns sökfunktion, i Googles sökresultat på mobil och dator samt på telefoners startskärmar. För användare med många flikar öppna trunkeras titeln ofta till ingenting och ikonen är den enda ledtråden som finns kvar. Det gör den till ett verkligt navigeringselement, inte dekoration.

1. Läsbarhet i 16x16

Den klassiska favicon-storleken är 16x16 CSS-pixlar. På en vanlig skärm är det bokstavligen 256 pixlar; på en retinaskärm med 2x väljer webbläsaren oftast en 32x32-bild för samma yta. Allt du designar måste klara av den här förminskningen.

Håll det enkelt

• En form eller en till två bokstäver. En enda fet bokstav, en cirkel med en symbol eller ett enkelt geometriskt märke fungerar. Tre bokstäver eller ett ord blir bara brus.
• En enda fokuspunkt. Om du inte kan beskriva ikonen med fem ord är den för komplicerad.
• Inga gradienter, skuggor eller fina texturer. De blir suddiga fläckar i små storlekar.

Justera mot pixelrutnätet

I 16x16 antialiasas en linje som ligger en halv pixel vid sidan om rutnätet över två pixelrader och ser grå och mjuk ut. Placera kanterna på hela pixelgränser och använd jämna bredder där formen är symmetrisk. Om du exporterar från ett vektorverktyg, aktivera pixelsnappning, eller kontrollera det förminskade resultatet och rätta till det för hand.

Undvik tunna linjer

Streck som är tunnare än 2 pixlar i 16x16 (ungefär 12 procent av ikonens bredd) tenderar att försvinna eller flimra mellan storlekar. Gör strecken tjockare, ta bort inre detaljer och slå ihop små mellanrum. En fet, något tung glyf läses oftast bättre än en trogen miniatyr av en detaljrik logotyp.

Finjustera för hand

ICO- och PNG-filer har ingen typsnittsliknande hinting, så manuell pixelredigering är motsvarigheten: du justerar enskilda pixlar så att kurvor, diagonaler och inre hål (som i bokstäver som "a" eller "e") förblir skarpa. Automatisk förminskning är ett bra första utkast, men några handplacerade pixlar gör ofta skillnaden mellan en klump och en igenkännbar bokstav. MakeFavs pixelredigerare är byggd för detta: öppna 16x16-ytan, rätta till de problematiska pixlarna och exportera.

2. Kontrast på ljusa och mörka flikar

Webbläsare körs numera ofta i mörkt läge, och många användare har flikfält som skiljer sig från sidans tema. En mörkblå ikon med transparent bakgrund kan vara perfekt på en vit flik och nästan osynlig på en mörkgrå. Testa alltid båda.

Praktiska lösningar

• Lägg till en bakgrundsform. En solid rundad kvadrat eller cirkel i en varumärkesfärg ger märket egen kontrast oavsett flik.
• Använd en tunn kontur eller gloria. En ljusare kant på 1 px runt en mörk glyf (eller tvärtom) håller silhuetten synlig i båda teman, men i 16x16 måste den förbli skarp, så testa den.
• Välj varumärkesfärger i mellanton. Färger som stark blå, orange, grön eller magenta fungerar vanligtvis på både vita och nästan svarta ytor. Mycket ljusgul eller mycket mörkblå är de riskabla.
• Använd en adaptiv SVG-favicon. En SVG kan innehålla en prefers-color-scheme-mediafråga så att ikonen ändras 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>

Observera att mediafrågan speglar operativsystemets eller webbläsarens tema, vilket flikfältet oftast följer, men inte alltid. Stödet för SVG-favicons varierar också: Chrome och Firefox hanterar dem, medan Safari historiskt har legat efter, så behåll alltid PNG- eller ICO-reservalternativ. En design med solid bakgrund är det mest robusta alternativet eftersom den inte kräver någon temalogik alls.

3. Igenkänning och varumärkeskonsekvens

Använd bildmärket (symbolen eller monogrammet), inte hela logotypen med ordmärket. Text i en 16x16-ikon går inte att läsa, och en bred horisontell logotyp som krympts till en kvadrat ger bara en liten remsa i mitten.

• Om ditt varumärke har en symbol, förenkla den för små storlekar i stället för att bara skala ner den. En "favicon-version" med färre detaljer är vanlig praxis.
• Om ditt varumärke bara är ett ordmärke, ta första bokstaven eller ett karaktäristiskt bokstavspar och sätt det i varumärkets typsnitt i fet vikt.
• Håll färgerna konsekventa med din logotyp, appikon och avatarer i sociala medier, så att användaren känner igen samma varumärke överallt.

Särprägel är minst lika viktigt som trohet mot originalet. Titta på en rad flikar: om tre andra webbplatser också använder en blå cirkel kommer din inte att sticka ut. En annan form eller färg är mer användbar än en perfekt trogen förminskning.

4. Färg: en begränsad, mättad palett

Med så få pixlar ger varje extra färg bara rörighet. Sikta på en eller två färger plus högst vitt eller svart. Mättade färger bär bättre i små storlekar än pasteller, som tenderar att smälta in i flikens bakgrund.

Låna lite från tillgänglighetstänkandet. WCAG kräver minst 3:1 i kontrast för meningsfulla grafiska objekt (framgångskriterium 1.4.11, Kontrast för icke-text). En favicon omfattas inte formellt, eftersom den är en del av webbläsarens gränssnitt snarare än sidinnehåll, men 3:1 mellan glyfen och dess bakgrund, och mellan ikonen och fliken, är ett vettigt mål. Undvik också att förmedla något enbart genom nyans: röda respektive gröna varianter av samma ikon går inte att skilja åt för många färgblinda, så variera formen eller lägg till en symbol.

5. Form, marginaler och säkra zoner

Fyll kvadraten

Webbläsarflikar visar favicon i en fast liten storlek, så extra marginal gör bara ditt märke mindre. För vanliga flikikoner, använd största delen av ytan, med bara en eller två pixlar luft, så att märket blir så stort som möjligt.

Rundad eller kvadratisk?

Webbläsare beskär i allmänhet inte flikarnas favicons, så formen du ritar är formen användarna ser. En kvadrat med lätt rundade hörn ser prydlig ut och ger en jämn bakgrund; en friform eller cirkel på transparent bakgrund kan se lättare och mer särpräglad ut. Båda fungerar. Välj en och håll hela din ikonuppsättning konsekvent.

Apple touch-ikoner

iOS lägger till egna rundade hörn på apple-touch-icon (180x180 är den vanliga storleken). Leverera en helt fylld kvadrat utan förrundade hörn, annars kan du få synliga mörka eller vita kanter i hörnen.

Maskable-ikoner för Android och PWA:er

Maskable-ikoner beskärs av operativsystemet till cirklar, squircles eller andra former. Håll allt viktigt innehåll inom den säkra zonen: en cirkel centrerad i ikonen med en radie på 40 procent av ikonens bredd. Låt bakgrundsfärgen sträcka sig ända ut till kanterna så att vilken mask som helst ser rätt ut. Återanvänd inte en tajt favicon för flikar, som går kant i kant, som maskable-ikon, eftersom masken då kommer att klippa den.

6. Transparens

Transparens fungerar bra för flikars favicons, och det är den som låter en ikon med enbart en glyf sitta fint på vilken flikfärg som helst. För Apple touch-ikoner är det ett problem: iOS fyller transparenta ytor med en solid färg (vanligtvis svart), vilket kan förstöra designen. Ge alltid apple-touch-icon en ogenomskinlig bakgrund i din varumärkesfärg. Detsamma gäller maskable-ikoner och de flesta användningsfall på Androids startskärm, där en ogenomskinlig bakgrund ger förutsägbara resultat.

7. Stabilitet: ändra den inte för ofta

En favicon bygger igenkänning genom upprepning. Om du ändrar den ofta måste användarna lära sig om vilken flik som är din, och det ger dessutom tekniskt huvudbry. Webbläsare cachar favicons aggressivt, och Google hämtar och lagrar dem separat från dina sidor, så en ny ikon kan ta dagar eller veckor på sig att dyka upp i sökresultaten. Google ber också om en stabil favicon-URL, en ikon vars storlek är en multipel av 48 pixlar (48x48, 96x96 och så vidare) och en fil som kan genomsökas (inte blockeras av robots.txt). Behandla en favicon-ändring som ett beslut på nivån av en varumärkesomläggning, inte som en säsongsdekoration.

8. Notisstatus och dynamiska favicons

Vissa webbappar ändrar favicon för att visa olästa meddelanden, inspelningsstatus eller ett fel. Om det görs bra är det till hjälp; om det överdrivs är det irriterande.

• Använd en liten badge (en prick eller en kort siffra) i ett hörn, inte en total omdesign. Basikonen ska förbli igenkännbar.
• Använd den sparsamt. Reservera badges för händelser som kräver åtgärd från användaren. Animera inte ikonen kontinuerligt.
• Begränsa siffror. I 16x16 är bara en eller två siffror läsbara; visa "9+" eller en enkel prick i stället för "137".
• Återställ snabbt när användaren har hanterat ärendet, och återgå till standardikonen.
• Förlita dig inte enbart på färg. En röd prick bör även backas upp av sidtiteln, till exempel "(3) Inkorg", så att informationen är tillgänglig för alla.

Dynamiska favicons ritas vanligtvis på en canvas och byts in genom att uppdatera href på ikonens link-element. Begränsa uppdateringarna, eftersom en favicon som ständigt ändras kan belasta processorn och distrahera användarna.

9. Prestanda

Favicons är små, men de är ändå förfrågningar som kan hanteras dåligt.

• Håll filerna små. En PNG-favicon är vanligtvis några hundra byte till några kilobyte. En enkel SVG kan vara under 1 KB.
• Undvik uppblåsta ICO-filer. En ICO med flera storlekar, med bilder på 16, 32 och 48 pixlar, räcker. Att bädda in en 256x256-bild multiplicerar filstorleken utan någon synlig nytta i webbläsarflikar.
• Ställ in cache-headers. Servera ikoner med lång Cache-Control-livslängd, till exempel public, max-age=31536000, immutable, och använd ett versionshanterat eller hashat filnamn när du faktiskt ändrar dem.
• Deklarera ikoner explicit. Webbläsare begär /favicon.ico som standard, så tillhandahåll en även om du deklarerar andra ikoner, för att undvika 404-brus i dina loggar.
• Komprimera. Kör PNG-filer genom en förlustfri optimerare och minifiera 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'>

Om du vill generera alla dessa filer från en enda källbild skapar MakeFavs favicon-generator standarduppsättningen, och sidan för utvecklare beskriver integrationsalternativen.

10. Tillgänglighet

En favicon har ingen alternativtext och skärmläsare läser inte upp den, så traditionella tillgänglighetsverktyg som alt-attribut är inte tillämpliga. Det som däremot spelar roll:

• Sidtiteln bär betydelsen. Skriv unika, beskrivande <title>-element. Förlita dig aldrig på ikonen för att förmedla status; spegla varje badge i titeln.
• Synlighet för användare med nedsatt syn. Hög kontrast, en fet form och ett stort märke hjälper användare som skannar flikar visuellt.
• Färgoberoende. Se till att former eller bokstäver skiljer tillstånden åt, inte bara nyansen.
• Mindre distraktion. Undvik blinkande eller animerade favicons, som kan vara ett problem för användare som är känsliga för rörelse.

Checklista för favicon-UX

Testchecklista

Lita inte på den stora förhandsvisningen i ditt designverktyg. Testa den riktiga ikonen under verkliga förhållanden:

1. Flera webbläsare. Kontrollera Chrome, Firefox, Safari och Edge, eftersom var och en väljer ikoner och storlekar något olika.
2. Ljust och mörkt läge. Växla OS- och webbläsartema och titta på flikfältet varje gång.
3. Retina- och vanliga skärmar. Kontrollera på en 1x-skärm och en 2x- eller 3x-skärm, och zooma i webbläsaren.
4. Bokmärkesfältet. Bokmärk sidan och se om ikonen fortfarande är läsbar bredvid andra webbplatser.
5. Många flikar. Öppna 20 flikar och se om du hittar din med en snabb blick.
6. Förhandsvisning i Googles sökresultat. Kontrollera ett sökresultat på mobil när ikonen har genomsökts på nytt. Kom ihåg att det kan ta tid att uppdateras.
7. Startskärm. Lägg till webbplatsen på startskärmen i iOS och Android och bekräfta att ikonen inte är beskuren, inte har svarta hörn och inte är för liten inom sin mask.
8. Teknisk kontroll. Kör din domän genom MakeFavs favicon-kontroll för att bekräfta att filerna finns, returnerar statuskod 200, har rätt storlekar och är korrekt deklarerade i din HTML.

Ett praktiskt arbetsflöde

1. Utgå från ditt bildmärke och förenkla det till en form eller bokstav.
2. Skapa en kvadratisk yta med en solid eller formad bakgrund som fungerar i båda teman.
3. Exportera storlekarna 32x32 och 16x16 och förfina den lilla versionen för hand i pixelredigeraren.
4. Generera hela uppsättningen (ICO, PNG, apple-touch-icon, manifestikoner) med generatorn.
5. Lägg till link-taggarna, ställ in cache-headers, driftsätt och verifiera med kontrollen.

En favicon är en av de minsta resurserna på din webbplats och en av de som syns oftast. Några noggranna beslut om kontrast, enkelhet och konsekvens gör att den fungerar i varje flik, tema och enhet.

Vanliga frågor

Vilken storlek ska en favicon ha?

Designa för 16x16 och 32x32 för webbläsarflikar (webbläsaren använder 32x32 på skärmar med hög pixeltäthet), tillhandahåll en apple-touch-icon på 180x180 för iOS samt PNG-filer på 192x192 och 512x512 för Android och PWA:er. För Googles sökresultat, använd en kvadratisk ikon vars storlek är en multipel av 48 pixlar, till exempel 48x48 eller 96x96. En SVG-källa skalas till alla dessa.

Ska jag använda hela min logotyp som favicon?

Oftast inte. Hela logotyper med ordmärken är för detaljerade och för breda för en kvadratisk 16x16-ikon. Använd bildmärket eller ett monogram med en eller två bokstäver, och förenkla det så att det förblir igenkännbart när det är pyttelitet.

Hur får jag en favicon att fungera i mörkt läge?

Det säkraste sättet är att ge ikonen en egen solid bakgrundsform eller en kontrasterande kontur, så att den inte beror på flikens färg. Alternativt kan du använda en SVG-favicon med en prefers-color-scheme-mediafråga för att byta färger, och behålla PNG- eller ICO-reserver för webbläsare som inte stöder SVG-ikoner. Testa alltid i både ljust och mörkt tema.

Varför syns inte min nya favicon?

Webbläsare cachar favicons under lång tid, och Google lagrar en egen kopia som uppdateras enligt eget schema, vilket ofta tar dagar eller veckor. Gör en hård omladdning av sidan, rensa webbläsarens cache, använd ett nytt versionshanterat filnamn och se till att link-taggarna och en /favicon.ico i roten pekar på rätt fil. Du kan verifiera uppsättningen med MakeFavs kontroll.

Är det en bra idé att visa notisbadges på en favicon?

Ja, om det används sparsamt. En liten prick eller en siffra med en eller två tecken hjälper användare att uppmärksamma något som kräver åtgärd, men ständig animation eller stora siffror skadar både läsbarhet och uppmärksamhet. Spegla alltid statusen i sidtiteln, återställ standardikonen när ärendet är hanterat och förlita dig inte enbart på färg.