Favicon-generator: den kompletta .ICO-guiden (2026)

Faviconen, den lilla 16×16-pixelikonen bredvid din fliktitel, är en av de mest förbisedda detaljerna på webben. De flesta sajter levererar antingen ingen favicon (visar en generisk webbläsarikon, det universella tecknet på en oavslutad sajt) eller levererar en JPEG omdöpt till .ico (vilket inte fungerar konsekvent över webbläsare).

Denna guide täcker hur en korrekt favicon-implementation 2026 ser ut: formaten du behöver, storlekarna som spelar roll, stöd för mörkt läge och hur du installerar den korrekt. Allt genereras lokalt, din logotyp laddas aldrig upp till en server.

Varför faviconer betyder mer än du tror

En favicon gör tre saker samtidigt:

1. Identifierar din sajt i webbläsarflikar, bokmärken och historik.
2. Ökar varumärkesigenkänning när användare har flera flikar öppna.
3. Signalerar professionalism. Sajter utan ordentliga faviconer ser oavslutade ut, även stora varumärken misslyckas ibland med detta.

Studier visar att användare med 10+ öppna flikar identifierar en sajt via favicon innan de läser titeln. Din favicon är fastighetsutrymme värt att ta seriöst.

ICO vs PNG vs SVG

ICO (favicon.ico)

Det ursprungliga favicon-formatet, introducerat av Microsoft 1999. Dess superkraft: det är en behållare. En enda .ico-fil rymmer flera PNG-kodade bilder vid olika upplösningar (vanligtvis 16×16, 32×32, 48×48). Webbläsaren/operativsystemet väljer rätt en för sammanhanget.

Använd det för: maximal kompatibilitet, särskilt Windows skrivbordsgenvägar och Outlook e-postsignaturer.

PNG (favicon-32x32.png, favicon-192x192.png, etc.)

Moderna webbläsare (Chrome, Firefox, Safari, Edge) föredrar PNG. Skarpare rendering, alfakanalstöd, mindre filstorlek än ICO vid likvärdig kvalitet.

Använd det för: moderna webbläsare, Apple Touch Icons (iOS), Android Chrome PWA-ikoner, Windows-kakelikoner.

SVG (favicon.svg)

Vektorformat. Skarpt vid vilken upplösning som helst, stöder CSS och fyllningar som är medvetna om mörkt läge, mycket mindre än PNG för enkla ikoner.

Använd det för: framtidssäkring. Moderna webbläsare (90 %+) stöder SVG-faviconer. Para ihop med PNG-fallback för äldre webbläsare.

Bästa praxis: leverera alla tre

<!-- Moderna webbläsare föredrar detta om tillgängligt -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<!-- Moderna webbläsare fallback -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<!-- Äldre/Windows -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- iOS hemskärm -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- Android PWA + temafärg -->
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#c59a6d">

Favicon-generator matar ut exakt denna uppsättning filer plus snutten, redo att distribuera.

Storlekarna som faktiskt spelar roll

Storlek	Filnamn	Används av
16×16	inuti favicon.ico	Webbläsarflik, adressfält
32×32	favicon-32x32.png + inuti favicon.ico	Webbläsarflik hög-DPI, aktivitetsfält
48×48	inuti favicon.ico	Windows skrivbordsgenväg
180×180	apple-touch-icon.png	iOS hemskärm, watchOS
192×192	android-chrome-192x192.png	Android hemskärm
512×512	android-chrome-512x512.png	Android startskärm, PWA
150×150	mstile-150x150.png	Windows 10/11 Start-kakel
oändlig	favicon.svg	Moderna webbläsare, retina

Du behöver inte alla dessa för en grundläggande sajt, men en generator som producerar dem alla kostar inget extra och framtidssäkrar dig.

Faviconer för mörkt läge (bästa praxis 2026)

Moderna webbläsare stöder faviconer som är medvetna om mörkt läge via SVG med CSS:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    path { fill: #000; }
    @media (prefers-color-scheme: dark) {
      path { fill: #fff; }
    }
  </style>
  <path d="M..."/>
</svg>

Faviconen anpassar sig till användarens operativsystemstema, svart på ljust, vitt på mörkt. Vissa användare (utvecklare, tillgänglighetsförespråkare) letar aktivt efter denna detalj.

Bästa praxis för källbilder

Innan du genererar, förbered din källa:

1. Kvadratisk. Minimum 512×512, idealt 1024×1024. Icke-kvadratiska källor beskärs eller fylls.
2. Enkel. Vid 16×16 px blir komplexa logotyper oläsbar mos. Testa genom att kisa mot din logotyp på ett 16-pixelraster: kan du fortfarande känna igen den?
3. Hög kontrast. Ikonen behöver vara läsbar mot vilken webbläsarflikfärg som helst (ljus eller mörk). Sikta på minst 4,5:1 kontrastförhållande internt.
4. Genomskinlig bakgrund (PNG/SVG). Solida bakgrunder ser kantiga ut i webbläsarflikremsor som har utfyllnad.

Om din fullständiga logotyp är för detaljerad, gör en förenklad symbol för faviconen, en enskild bokstav, en ikon, en abstrakt form. Många varumärken gör detta (Apples äpple, Twitters fågel, Spotifys cirklar).

Integritet: varför lokal generering spelar roll

Den smutsiga hemligheten med online favicon-generatorer: de flesta laddar upp din källogotyp till sin server, genererar ikonerna och mejlar dig en länk.

Det innebär att din outgivna varumärkesidentitet sitter på någon annans hårdvara. För en stealth-startup, ett klientprojekt under sekretessavtal eller en produktlansering är det oacceptabelt.

Alternativet: generera lokalt med HTML5 Canvas + WebAssembly för ICO-kodning. DuneTools Favicon-generator gör exakt detta, din logotyp lämnar aldrig din webbläsare, generering sker på några hundra millisekunder, du laddar ner en ZIP med alla 12 filvarianter plus HTML-snutten.

Distributionschecklista

1. ✅ Placera alla genererade filer i roten av din sajt (/favicon.ico, /favicon.svg, etc.). De flesta webbläsare letar här automatiskt.
2. ✅ Lägg till <link>- och <meta>-taggar från generatorn inuti <head>.
3. ✅ Lägg till <link rel="manifest" href="/site.webmanifest"> och skapa site.webmanifest med ikondefinitionerna (generatorn skapar det åt dig).
4. ✅ Testa på Chrome, Safari, Firefox-flik. Hård-uppdatera (Cmd+Shift+R eller Ctrl+F5), faviconer cachelagras aggressivt.
5. ✅ Lägg till på iPhone hemskärm (Safari → Dela → Lägg till på hemskärm), verifiera att apple-touch-icon visas.
6. ✅ Testa i mörkt läge (system → byt tema), verifiera att SVG anpassar sig.

Vanliga misstag

1. Att byta namn på en JPEG till .ico. ICO har sitt eget format. Att byta namn konverterar inte. Använd en generator.
2. Endast en 16×16 PNG. Ser bra ut i flikar, hemskt överallt annars (aktivitetsfält, mobil hemskärm, PWA-startskärm).
3. Att glömma Apple Touch Icon. När användare lägger till din sajt på iPhone hemskärm och din ikon saknas använder iOS en skärmdump. Ser hemskt ut.
4. Ingen theme-color meta-tagg. Att lägga till <meta name="theme-color"> får Chrome/Safari mobil att använda din varumärkesfärg i adressfältet, liten detalj, stor effekt.
5. Inte testa mörkt läge. En logotyp osynlig på mörka bakgrunder är en logotyp som saknas från miljontals användares flikar.

Verklig checklista

Innan du lanserar:

• Genererat favicon.ico (multistorlek 16/32/48)
• Genererat favicon.svg med CSS för mörkt läge
• Genererat favicon-16x16.png och favicon-32x32.png
• Genererat apple-touch-icon.png (180×180)
• Genererat android-chrome-192x192.png och 512x512
• Skapat site.webmanifest med ikondefinitioner
• Lagt till alla <link>-taggar inuti <head>
• Lagt till <meta name="theme-color"> som matchar varumärket
• Hård-uppdaterat och verifierat att alla storlekar visas korrekt
• Lagt till på iOS hemskärm, verifierat apple-touch-icon
• Testat mörkt läge, verifierat att SVG anpassar sig

Sammanfattning

En komplett favicon-implementation 2026 har 8-12 filer, tar 5 minuter att generera med rätt verktyg och förbättrar märkbart den upplevda professionalismen på din sajt. Hoppa inte över några format, det finns ingen god anledning till det 2026, och kostnaden är en uppladdning till Favicon-generator.