Vilka favicon-storlekar behöver du 2026? Den ideala uppsättningen

Den ideala favicon-uppsättningen 2026 är: en favicon.ico som innehåller bilder på 16, 32 och 48 px, en 96x96 PNG (för Google Sök), en valfri SVG-favicon, en 180x180 apple-touch-icon.png samt PNG-filer på 192x192 och 512x512 (plus en maskable 512) som deklareras i ett webbappmanifest. Windows-brickor och äldre Apple-storlekar behövs bara om du måste stödja riktigt gamla enheter. Nedan förklaras varför, med en storlekstabell, färdig HTML och vanliga misstag att undvika.

Favicon-landskapet var tidigare rörigt: varje webbläsare och operativsystem ville ha sin egen storlek, vilket gav de ökända <head>-blocken på 20 rader. Idag är det mesta av det föråldrat. Moderna webbläsare skalar en enda bra ikon, iOS vill ha en storlek och Android läser manifestet. Den här artikeln skiljer det som verkligen behövs från det som bara är trevligt att ha.

Det korta svaret: den ideala uppsättningen favicon-filer

• favicon.ico (16, 32, 48 px i en fil) i webbplatsens rotkatalog. Webbläsare, flödesläsare och många verktyg begär fortfarande /favicon.ico automatiskt.
• favicon.svg (valfri men rekommenderad) för skarp rendering i alla storlekar och stöd för mörkt läge.
• PNG 16x16, 32x32 och 96x96 som uttryckliga reservlösningar. Versionen på 96 px hjälper Google Sök, som kräver en multipel av 48 px.
• apple-touch-icon.png i 180x180, ogenomskinlig, utan transparens.
• 192x192 och 512x512 PNG i manifest.json, plus en maskable 512x512-ikon för Android.
• theme-color-metataggen för att färga webbläsarens gränssnitt på mobilen.
• Windows-brickor (70, 150, 310 px) med browserconfig.xml endast för äldre Windows och fästa webbplatser i IE11.

Tabell över favicon-storlekar: syfte, filnamn och prioritet

Använd tabellen som checklista. "Obligatorisk" betyder att en vanlig webbplats ser trasig eller ofärdig ut utan den, "Rekommenderad" innebär en tydlig kvalitetsvinst och "Valfri" gäller nischade eller äldre användningsfall.

favicon.ico: 16, 32 och 48 px i en fil

En ICO-fil är en behållare som rymmer flera bitmappar. En bra favicon.ico innehåller bilder på 16x16, 32x32 och 48x48 så att webbläsaren eller operativsystemet kan välja den som passar bäst. Placera den i roten av din domän (https://example.com/favicon.ico). Även om din HTML pekar någon annanstans begär många sökrobotar, RSS-läsare och äldre webbläsare fortfarande exakt den adressen, så om filen finns slipper du 404-brus i loggarna.

Byt inte bara namn på en PNG till .ico. De flesta webbläsare tolererar det, men vissa verktyg avvisar filen och du förlorar fördelen med flera upplösningar. Exportera en riktig ICO.

PNG-favicons: 16, 32 och 96 px

PNG-länkar med uttryckligt sizes låter webbläsaren välja den bästa bitmappen utan att behöva tolka ICO-filen. I praktiken täcker 32x32 flikar med hög DPI, och 16x16 är numera nästan överflödig. Storleken 96x96 är värd att lägga till eftersom Google Sök visar favicons bredvid resultaten och kräver en kvadratisk ikon vars storlek är en multipel av 48 px (48x48, 96x96, 144x144 och så vidare). En fil på 96 px ger Google en skarpare källa än en på 48 px när den nedskalas för mobilresultat.

Designtips: vid 16 px försvinner fina detaljer. Använd en kraftfull, enkel form, hög kontrast och lite eller ingen text. Du kan justera och förhandsgranska din ikon i MakeFav-editorn innan du exporterar.

SVG-favicon och mörkt läge

En SVG-favicon är en enda liten fil som förblir skarp på alla skärmtätheter. Chromium-baserade webbläsare och Firefox stöder den. Safaris stöd har historiskt varit begränsat, så förlita dig aldrig enbart på SVG: behåll ICO- och PNG-reservlösningarna.

Den största fördelen är teman. Eftersom en SVG kan innehålla CSS kan du anpassa ikonen efter användarens färgschema med prefers-color-scheme:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .bg { fill: #0f172a; }
    .fg { fill: #ffffff; }
    @media (prefers-color-scheme: dark) {
      .bg { fill: #ffffff; }
      .fg { fill: #0f172a; }
    }
  </style>
  <rect class="bg" width="32" height="32" rx="6"/>
  <circle class="fg" cx="16" cy="16" r="8"/>
</svg>

Observera att mediafrågan speglar webbläsarens eller operativsystemets tema, vilket är det som flikfältet använder. Den följer inte en temaväxlare på din egen webbplats.

En känd egenhet: när både en ICO och en SVG anges kan Chrome välja ICO. Om du deklarerar ICO med sizes="32x32" och listar SVG efteråt föredrar Chrome SVG, som i koden nedan.

Apple touch-ikon: 180x180 och de äldre storlekarna

När en användare lägger till din webbplats på hemskärmen i iOS eller iPadOS använder Safari apple-touch-icon. Idag räcker en enda PNG på 180x180 px: iOS skalar ned den för äldre enheter och iPad. Döp den till apple-touch-icon.png och lägg den i roten; iOS letar till och med efter just den filen som standard om ingen länktagg finns.

Regler för Apple-ikonen:

• Ingen transparens. iOS fyller transparenta pixlar med svart, så en transparent logotyp blir ofta en svart klump. Lägg till en enfärgad bakgrund.
• Inga rundade hörn. iOS lägger på sin egen rundade mask. Leverera en helt kvadratisk bild.
• Håll viktigt innehåll borta från ytterkanterna, eftersom hörnen beskärs.

När behöver du de äldre storlekarna (57, 72, 76, 114, 120, 144, 152, 167)? Bara om du stödjer iOS 6 eller äldre, eller vill ha exakt pixelkontroll per enhet för iPad Pro (167 px) och iPad (152 px). För nästan alla webbplatser 2026 räcker filen på 180x180 gott och väl. Uppsättningen för maximal kompatibilitet nedan innehåller några för fullständighetens skull.

Android- och PWA-ikoner: 192, 512 och maskable

Chrome på Android och andra PWA-kapabla webbläsare läser ikoner från webbappmanifestet, inte från <link rel="icon">. För att appen ska kunna installeras behöver du minst en PNG på 192x192 och en på 512x512. Ikonen på 192 px används på hemskärmen och i appstartaren, medan ikonen på 512 px visas på startskärmar och i installationsdialoger.

Maskable-ikoner och säkerhetszonen

Androids adaptiva ikoner kan beskäras till en cirkel, squircle eller annan form beroende på enheten. En maskable-ikon är utformad för att kunna beskäras säkert: det viktiga innehållet måste ligga inom säkerhetszonen, en centrerad cirkel med en diameter på 80 % av bilden (radien motsvarar 40 % av sidan). För en fil på 512x512 innebär det att du håller logotypen inom en cirkel med en diameter på cirka 410 px och låter bakgrundsfärgen sträcka sig ut till alla fyra kanter så att inga glipor syns efter maskningen.

Deklarera maskable-ikonen som en egen post med "purpose": "maskable". Undvik "any maskable" på en och samma fil: den marginal som behövs för maskning ser för liten ut när ikonen visas utan mask.

Exempel på manifest.json

{
  "name": "Example App",
  "short_name": "Example",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0f172a",
  "icons": [
    {
      "src": "/web-app-manifest-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/web-app-manifest-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/maskable-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

Servera filen som application/manifest+json (eller application/json) och länka till den från varje sida med <link rel="manifest" href="/manifest.json">. Vissa projekt döper den till site.webmanifest; namnet spelar ingen roll, länken gör det.

Windows-brickor och browserconfig.xml

Windows 8.1 och 10 låter användare fästa en webbplats i startmenyn, och IE11 samt äldre Edge läser bricksbilder från browserconfig.xml. De vanliga storlekarna är 70x70 (liten), 150x150 (medel), 310x150 (bred) och 310x310 (stor). Chromium-baserade Edge använder i stället manifestet och vanliga favicons, så detta är en äldre funktion. Ta bara med den om din publik fortfarande omfattar äldre Windows-miljöer, till exempel i företagsmiljöer.

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/mstile-70x70.png"/>
      <square150x150logo src="/mstile-150x150.png"/>
      <wide310x150logo src="/mstile-310x150.png"/>
      <square310x310logo src="/mstile-310x310.png"/>
      <TileColor>#0f172a</TileColor>
    </tile>
  </msapplication>
</browserconfig>

theme-color: färga webbläsarens gränssnitt

Metataggen theme-color talar om för mobila webbläsare (och vissa skrivbordswebbläsare) vilken färg som ska användas för adressfältet eller titelfältet. Den är ingen favicon, men hör till samma varumärkesuppsättning. Du kan ange separata värden för ljust och mörkt läge:

<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

Minimal modern uppsättning kontra maximal kompatibilitet

Minimal modern uppsättning (rekommenderas för de flesta webbplatser)

Fem filer täcker över 99 % av verklig användning: favicon.ico, favicon.svg, apple-touch-icon.png (180x180) och de två manifestikonerna (192 och 512). Lägg till PNG:n på 96x96 om synlighet i Google Sök är viktig, och en maskable-ikon om du levererar en PWA.

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">

Uppsättning för maximal kompatibilitet

Välj den här när du riktar dig till en bred publik eller företagspublik, eller när du vill ha alla tänkbara klienter täckta. Den lägger till uttryckliga PNG-storlekar, äldre Apple-storlekar, Windows-brickor och temafärger.

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Classic and modern browser icons -->
  <link rel="icon" href="/favicon.ico" sizes="32x32">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">

  <!-- Apple -->
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">

  <!-- Android / PWA -->
  <link rel="manifest" href="/manifest.json">
  <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
  <meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

  <!-- Windows (legacy) -->
  <meta name="msapplication-config" content="/browserconfig.xml">
  <meta name="msapplication-TileColor" content="#0f172a">

  <title>Example</title>
</head>

Notera de rotrelativa sökvägarna som börjar med /. De fungerar på alla sidnivåer, vilket leder oss till de vanligaste misstagen.

Vanliga favicon-misstag och hur du åtgärdar dem

1. Fel sökvägar

En länk som href="favicon.ico" tolkas relativt den aktuella adressen, så den fungerar på / men går sönder på /blog/post/. Använd rotrelativa (/favicon.ico) eller absoluta webbadresser. Kontrollera också att filerna verkligen finns: öppna varje adress direkt i webbläsaren och se till att den returnerar HTTP 200, inte en omdirigering till en 404-sida eller en inloggningsvägg.

2. Saknat eller felaktigt sizes-attribut

Utan sizes måste webbläsare ladda ned ikonerna för att granska dem och kan välja fel. Deklarera alltid sizes på PNG-länkar och se till att värdet stämmer med de verkliga pixelmåtten. En fil märkt 32x32 som i själva verket är 64x64 ger inkonsekventa resultat.

3. Aggressiv cachelagring

Webbläsare cachar favicons under lång tid, ofta oberoende av sidans cache. Efter en varumärkesförnyelse kan den gamla ikonen ligga kvar i flera dagar. Byt filnamn eller lägg till en versionsparameter (/favicon.ico?v=2) och uppdatera länktaggarna. En hård omladdning uppdaterar ofta inte flikikonen; att öppna ikonens adress direkt och ladda om den brukar göra det.

4. Icke-kvadratiska bilder

Favicons måste vara kvadratiska. En rektangulär logotyp sträcks, beskärs eller får kantremsor på oförutsägbart sätt. Designa en särskild kvadratisk symbol, till exempel en initial eller en ikon, i stället för att förminska en bred logotext.

5. Transparenta Apple touch-ikoner som blir svarta

iOS fyller transparens med svart. Ge ikonen på 180x180 en ogenomskinlig bakgrund och runda inte hörnen i förväg.

6. Maskable-ikoner utan säkerhetszon

Om logotypen når kanterna på en maskable-ikon klipper Android bort delar av den. Håll den inom den centrala cirkeln på 80 % och fyll hela ytan med bakgrundsfärgen.

7. Att blockera ikoner för sökrobotar

Om robots.txt nekar åtkomst till din favicon-sökväg kan Google inte hämta den och visar en generisk jordglobsikon i sökresultaten. Kom också ihåg att Google kräver att favicon ligger på samma värd som sidan och bara uppdaterar den då och då, så ändringar kan ta dagar eller veckor att visas.

8. Glömd manifestlänk eller glömda purposes

Ett manifest som inte är länkat, eller som saknar ikoner på 192 och 512 px, förhindrar installationsrutan i Chrome. Validera det i webbläsarens utvecklarverktyg under fliken Application.

Generera hela uppsättningen med ett klick

Att skapa ett dussin filer för hand i ett bildredigeringsprogram, sedan konvertera till ICO och skriva manifestet, är tidskrävande och felbenäget. MakeFav genererar alla filer ovan från en enda bild, text eller emoji: favicon.ico med flera storlekar, PNG-filer, SVG, Apple touch-ikon, PNG på 192/512, en maskable-ikon, Windows-brickor, manifest.json och browserconfig.xml, plus ett HTML-utdrag redo att klistras in, allt i en enda ZIP-nedladdning. Du kan finjustera bakgrund, marginal och form i editorn, kontrollera en befintlig webbplats med favicon-kontrollen och automatisera genereringen via resurserna för utvecklare.

Checklista för driftsättning

1. Ladda upp alla filer till webbplatsens rot.
2. Klistra in HTML-utdraget i <head> på varje sida (eller i din gemensamma layout).
3. Kontrollera att sökvägarna är rotrelativa och returnerar HTTP 200.
4. Testa ljust och mörkt läge, en installation på iOS-hemskärmen och en Android-installation.
5. Kör kontrollen för att hitta saknade eller felaktiga storlekar.
6. Rensa cacheminnen med en versionsparameter om du har ersatt en gammal ikon.

Vanliga frågor

Behöver jag fortfarande favicon.ico 2026?

Ja. Även om moderna webbläsare accepterar PNG och SVG begär många sökrobotar, flödesläsare, e-postklienter och äldre webbläsare fortfarande /favicon.ico direkt. En ICO med flera storlekar, med bilder på 16, 32 och 48 px, är en liten fil som förhindrar saknade ikoner och 404-fel.

Vilken storlek ska en favicon ha för Google Sök?

Google kräver en kvadratisk favicon vars storlek är en multipel av 48 px, minst 48x48. En PNG på 96x96 är ett tryggt val, och SVG stöds också. Google kräver även att filen går att genomsöka, så blockera den inte i robots.txt. Uppdateringar kan ta dagar eller veckor att visas.

Räcker 180x180 för Apple touch-ikonen?

För nästan alla webbplatser, ja. iOS och iPadOS nedskalar en PNG på 180x180 för alla nuvarande enheter. De äldre storlekarna (57 till 152 px) är bara viktiga för mycket gamla iOS-versioner. Kom ihåg att använda en ogenomskinlig bakgrund så att ikonen inte blir svart.

Vad är en maskable-ikon och behöver jag en?

En maskable-ikon är en PNG på 512x512 som är utformad för Androids adaptiva ikonformer. Det viktiga innehållet ligger inom en cirkel med 80 % diameter i mitten, och bakgrunden fyller hela kvadraten. Du behöver den bara om du erbjuder en installerbar PWA, men den får ikonen att se inbyggd ut i stället för att ligga i en vit cirkel.

Varför visas min gamla favicon fortfarande efter att jag har ändrat den?

Webbläsare cachar favicons separat och under lång tid. Byt namn på filen eller lägg till en versionsparameter som ?v=2, uppdatera länktaggarna och öppna sedan ikonens adress direkt och ladda om den. Sökmotorer kan ta längre tid på sig att uppdatera sin egen kopia.