En sökning på ”favicon-storlek” ger fortfarande checklistor med femton filer från 2014. I praktiken räcker numera sex dimensioner för webbläsarflikar, sökresultat, iOS, Android och PWA:er. Här är storlekarna och varför de behövs.
Storlekarna du faktiskt behöver
Varje rad motsvarar ett dokumenterat användningsområde i det föreslagna paketet. Tabellen prioriterar en liten, kompatibel uppsättning framför en samling historiska varianter.
| Fil | Dimensioner | Användningsområde |
|---|---|---|
| favicon.ico | 16×16, 32×32, 48×48 | Flikar, bokmärken, äldre webbläsare och sökrobotar |
| favicon.svg | vektorbaserad, kvadratisk | Moderna webbläsare, skarp i alla storlekar, stöder mörkt läge |
| favicon-96x96.png | 96×96 | Googles sökresultat på mobilen |
| apple-touch-icon.png | 180×180 | Hemskärm i iOS och iPadOS, utan transparens |
| web-app-manifest-192x192.png | 192×192 | Hemskärm i Android, deklarerad i webbmanifestet |
| web-app-manifest-512x512.png | 512×512 | Startskärm för PWA, ”maskable”-versionen |
Därför finns 16, 32 och 48 i samma .ico-fil
ICO är ett containerformat: en enda fil kan innehålla flera bilder och webbläsaren väljer den som passar visningen. Det är precis vad som behövs, eftersom storleken som efterfrågas varierar med sammanhanget.
16×16 används för en flik på en standardskärm. 32×32 ger en variant för skärmar med hög pixeltäthet och andra webbläsargränssnitt. 48×48 kompletterar containern och följer även Googles dokumenterade regel om multiplar av 48 för favicons i sökresultat.
Att leverera en .ico-fil med bara 16×16 är det vanligaste misstaget: på en Retina-skärm förstoras ikonen och ser ständigt suddig ut.
180×180 för iOS, 192 och 512 för Android
iOS läser inte webbmanifestet för hemskärmsikonen, utan söker efter en apple-touch-icon-tagg. En enda storlek räcker: 180×180, som täcker alla nyare iPhone- och iPad-modeller. Systemet skalar självt ner den för äldre enheter.
Android använder i stället webbmanifestet. Två poster räcker: 192×192 för hemskärmsikonen och 512×512 för startskärmen när webbplatsen installeras som app. Versionen på 512 bör deklareras med purpose ”maskable”, vilket innebär att den är utformad för att tåla beskärning till en cirkel eller en rundad kvadrat.
För en maskbar ikon ska det viktiga ligga inom de centrala 80 procenten. Allt utanför kan beskäras beroende på telefontillverkare.
Vilken källbild bör du utgå från?
Bäst är att börja med en SVG: den kan skalas utan kvalitetsförlust till alla storlekar ovan. Använd annars en kvadratisk PNG på minst 512×512 pixlar, så att även Androids startskärmsikon skapas genom förminskning och aldrig förstoring.
En liggande logotyp med text fungerar inte vid 16×16: i den storleken blir ett ord bara några suddiga pixlar. Använd enbart symbolen eller börja med en eller två bokstäver på en kontrastrik bakgrund.
Kontrollera slutligen kontrasten mot både ljusa och mörka bakgrunder. En svart logotyp försvinner i en flik med mörkt tema. Det är just därför SVG-faviconen har en mörk variant.
Storlekarna du inte längre behöver
Äldre generatorer skapar fortfarande filer för historiska integrationer, till exempel Windows-paneler med mstile-150x150.png och browserconfig.xml. Lägg bara till dem om de gränssnitten uttryckligen ingår i det du ska stödja.
Den långa serien apple-touch-icon-57x57, 60x60, 72x72, 76x76, 114x114, 120x120, 144x144 och 152x152 kommer från tiden då iOS inte kunde ändra storlek. En enda bild på 180×180 ersätter dem alla.
Att ta bort onödiga deklarationer förenklar ditt kodarkiv och din HTML. Kontrollera vilka webbläsare och plattformar du stöder innan du tar bort en befintlig integration.
Primärkällor
Vanliga frågor
Behövs favicon.ico fortfarande?
Ja, men bara i webbplatsens rot. Moderna webbläsare föredrar SVG, men många sökrobotar, aggregatorer och e-postklienter begär fortfarande /favicon.ico utan att läsa din HTML. Filen väger några kilobyte: behåll den.
Vilken favicon-storlek använder Google i sökresultaten?
Google efterfrågar en ikon med en sidlängd som är en multipel av 48 pixlar och visar den vanligtvis i 48×48. En PNG på 96×96 eller en SVG täcker behovet. Ikonen måste vara genomsökbar och får inte blockeras av robots.txt.
Kan min favicon vara rektangulär?
Tekniskt ja, visuellt nej. Alla visningsytor reserverar en kvadrat: en rektangulär bild förvrängs eller centreras med tomma fält. Utgå alltid från en kvadrat och lägg vid behov till marginaler runt symbolen.