Nödvändiga favicon-storlekar: Snabb beslutsguide för 2025

Internet är fullt av rekommendationer för favicon-storlekar som sträcker sig från 4 till 20+ olika dimensioner. De flesta webbplatser behöver inte alla. Denna guide skär igenom bruset och visar dig exakt vilka favicon-storlekar som är viktiga för just ditt projekt, sparar tid och minskar komplexiteten.

De enda 4 favicon-storlekarna du faktiskt behöver

Efter att ha analyserat tusentals webbplatser och enhetanvändningsmönster, här är de nödvändiga favicon-storlekarna som täcker 99% av alla användningsfall:

1. favicon.ico (behållare med flera storlekar)

Storlek: Innehåller 16x16 och 32x32 pixlar Varför den är nödvändig: Universellt webbläsarstöd, automatisk detektering Filformat: ICO Användning: Webbläsarflikar, bokmärken, webbläsarhistorik

2. 180x180 pixlar (Apple Touch Icon)

Storlek: 180x180 pixlar Varför den är nödvändig: iOS hemskärm, Safari-bokmärken Filformat: PNG Användning: iPhone/iPad "Lägg till på hemskärm"

3. 192x192 pixlar (Android Chrome)

Storlek: 192x192 pixlar Varför den är nödvändig: Android hemskärm, Chrome-genvägar Filformat: PNG Användning: Android-enheter, PWA minimikrav

4. 512x512 pixlar (PWA och framtidssäker)

Storlek: 512x512 pixlar Varför den är nödvändig: Progressiva webbappar, högupplösta skärmar Filformat: PNG Användning: PWA-startskärmar, appbutiker

Snabb implementeringskod

Här är den minimala HTML du behöver i din <head>-tagg:

<!-- Nödvändig favicon-installation - täcker 99% av enheter -->
<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png">

Det är allt. Dessa fyra filer visar din favicon korrekt på alla moderna enheter och webbläsare.

När du kan behöva ytterligare storlekar

Bygger du en progressiv webbapp?

Lägg till dessa i ditt webbmanifest:

144x144 - Windows-paneler
384x384 - Mellanliggande PWA-storlek

Stöder du äldre system?

Överväg att lägga till:

16x16 PNG - Mycket gamla webbläsare
32x32 PNG - Äldre högupplösta skärmar
48x48 - Windows skrivbordsgenvägar

Vill du ha perfekt täckning?

Den kompletta uppsättningen inkluderar:

16x16, 32x32, 48x48, 64x64, 96x96, 128x128, 144x144, 152x152, 167x167, 180x180, 192x192, 256x256, 384x384, 512x512

Men kom ihåg: varje ytterligare storlek ökar komplexiteten med avtagande avkastning.

Beslutsflödesschema för storlekar

Är din webbplats en PWA?
├─ Ja → Använd alla 4 nödvändiga storlekar + manifeststorlekar
└─ Nej → Fortsätt
   │
   Är det en enkel webbplats/blogg?
   ├─ Ja → Använd bara favicon.ico
   └─ Nej → Fortsätt
      │
      Är mobiltrafiken > 50%?
      ├─ Ja → Använd alla 4 nödvändiga storlekar
      └─ Nej → Använd favicon.ico + 192x192

Verklig storleksjämförelse

Här är vad stora webbplatser faktiskt använder:

Webbplats	Antal storlekar	Faktiska storlekar som används
Google	3	favicon.ico, 192x192, 512x512
Facebook	4	favicon.ico, 180x180, 192x192, 512x512
Amazon	2	favicon.ico, 192x192
Netflix	3	favicon.ico, 192x192, 512x512
GitHub	5	favicon.ico, 180x180, 192x192, 512x512, SVG

Ser du mönstret? Även teknikjättarna håller det enkelt.

Riktlinjer för filstorlek

Håll dina favicons lätta för bättre prestanda:

Favicon-storlek	Målfilstorlek	Maximalt acceptabel
favicon.ico	< 5 KB	15 KB
180x180 PNG	< 3 KB	8 KB
192x192 PNG	< 4 KB	10 KB
512x512 PNG	< 15 KB	30 KB

Vanliga storleksmisstag att undvika

Misstag 1: Att bara använda stora storlekar

Problem: 512x512-ikon nedskalad till 16x16 ser suddig ut Lösning: Inkludera alltid favicon.ico med inbäddade små storlekar

Misstag 2: Att glömma mobilstorlekar

Problem: Generisk ikon visas när användare sparar på hemskärmen Lösning: Inkludera 180x180 (iOS) och 192x192 (Android)

Misstag 3: Att överoptimera filstorlekar

Problem: Kraftigt komprimerade ikoner ser pixlade ut Lösning: Balansera kvalitet och filstorlek; favicons cachas ändå

Misstag 4: Att använda fel dimensioner

Problem: 200x200 eller 256x256 istället för standardstorlekar Lösning: Håll dig till plattformsstandardiserade dimensioner

Snabb testchecklista

Testa din favicon-implementering:

Webbläsarflik på desktop - Visas favicon.ico?
Mobil webbläsare - Är ikonen synlig i mobil Chrome/Safari?
Lägg till på hemskärm - Prova på både iOS och Android
Bokmärkestest - Lägg till bokmärke och kontrollera ikonen
Delningsförhandsgranskning - Vissa plattformar använder större storlekar för delning

Format vs storlek: Vad spelar mest roll?

Storlek avgör var din favicon visas Format avgör kompatibilitet och kvalitet

Prioriteringsordning:

Få storlekarna rätt först
Använd ICO för favicon.ico
Använd PNG för alla andra storlekar
Överväg SVG först efter att grunderna fungerar

5-minutersinstallationen för favicon

Börja med en 512x512 masterbild
Generera de 4 nödvändiga storlekarna med valfri favicon-generator
Lägg till HTML-koden i din webbplats head
Testa i en desktop- och en mobilwebbläsare
Publicera - övertänk inte

Storleksspecifika tips

För 16x16 och 32x32 (favicon.ico)

Använd enkla former utan fina detaljer
Testa synligheten i faktisk storlek
Undvik text om det inte är 1-2 tecken

För 180x180 (iOS)

Designa med rundade hörn i åtanke (iOS applicerar dem)
Använd solid bakgrund (transparens blir vit)
Säkerställ god kontrast

För 192x192 och 512x512 (Android/PWA)

Stöd transparens för adaptiva ikoner
Testa på olika Android-startskärmsbakgrunder
Håll viktiga element centrerade

Prestandapåverkan per storlek

Att ladda flera favicon-storlekar har minimal påverkan:

4 nödvändiga storlekar: ~25KB totalt, 4 förfrågningar
10 omfattande storlekar: ~60KB totalt, 10 förfrågningar
20+ storlekar: ~120KB totalt, ofta onödigt

Favicons cachas aggressivt, så initial laddning är det enda orosmomentet.

Slutliga rekommendationer

För 90% av webbplatser: Använd de 4 nödvändiga storlekarna. Du är klar.

För PWA:er: Lägg till 144x144 och 384x384 till de nödvändiga 4.

För maximal kompatibilitet: Använd ett generatorverktyg för att skapa alla storlekar, men förstå att du optimerar för undantagsfall.

Kom ihåg: Perfekt favicon-täckning på varje tänkbar enhet och webbläsarversion är omöjligt. Fokusera på de storlekar som spelar roll för dina faktiska användare, implementera dem korrekt och gå vidare till mer verkningsfulla aspekter av din webbplats.

Den bästa favicon-implementeringen är den som fungerar pålitligt för dina användare utan att överkomplicera din kodbas. Börja med det nödvändiga, lägg till mer bara när du har ett specifikt behov.

Behöver du testa din favicon i olika storlekar? Prova Favicon.im för att omedelbart förhandsgranska hur vilken webbplats favicon som helst visas i olika dimensioner.