En Favicon-uppsättning som fungerar överallt 2026
Sex storlekar, en .ico, ett manifest — allt du faktiskt behöver för att skicka en favicon som ser rätt ut i varje webbläsare, iOS-hemskärm och Windows-aktivitetsfält 2026.
Favicons verkar triviala. Skicka en och hundra edge cases dyker upp: iOS-hemskärmikonen är suddig, Android Chrome-fliken har fel färg, Windows-nålningar visar en oklar 16×16. Den här guiden skär igenom bruset och täcker exakt vad du behöver 2026 — inget mer, inget mindre.
Den minimalt livskraftiga uppsättningen
Sex resurser täcker varje yta som kommer att visa din sajts ikon:
favicon.ico— multi-storleksbehållare med 16×16, 32×32, 48×48 inuti (äldre webbläsare, Windows Explorer, fästa flikar).favicon-16x16.png,favicon-32x32.png— moderna webbläsarflikar.apple-touch-icon.png(180×180) — iOS-hemskärm, Safari-läslista.android-chrome-192x192.png,android-chrome-512x512.png— Android-hemskärm, PWA-installationsuppmaningar.site.webmanifest— PWA-konfigurationen som pekar på Android-ikonerna och definierar temafärgen.
Det är allt. Allt annat (Safari fäst flik SVG, gamla Apple touch-varianter, Windows-panelbilder) är äldre. Moderna webbläsare faller tillbaka gracefully till 192 eller 512 PNG.
Varför .ico fortfarande används 2026
En .ico-fil är en binär behållare som kan innehålla flera PNG-bilder i olika storlekar. När en webbläsare frågar efter /favicon.ico (vilket vissa fortfarande gör per standard), får den alla tre storlekar i en förfrågan. Renderaren väljer den som passar bäst för den aktuella ytan — en 48×48 för Windows Explorer, en 16×16 för en webbläsarflik.
En PNG döpt till .ico innehåller bara en storlek. Det fungerar mestadels eftersom webbläsare är förlåtande, men Windows Explorer och vissa e-postklienter kommer antingen att rendera det suddig eller vägra att visa det. Skicka en riktig .ico om du vill ha konsistens.
Vad site.webmanifest gör
När en användare lägger till din sajt på sin Android-hemskärm eller installerar den som en PWA läser webbläsaren site.webmanifest för att veta hur den installerade appen ska se ut. Det definierar:
name/short_name— etiketten under ikonen.icons— vilka PNG-bilder som ska användas i vilken storlek.theme_color— färg på statusfältet när appen är öppen.background_color— startskärmsbakgrund under lansering.display— vanligtvisstandaloneså att appen öppnas utan webbläsarens gränssnitt.
Utan ett manifest faller Android tillbaka till apple-touch-icon och visar din sajt inuti ett webbläsarfönster. Med en ser det ut som en inbyggd app.
HTML-utdraget
Varje fil går i din webrot. Varje sajt behöver detta block i <head>:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#YOUR_HEX">Design för 16×16
Din vackra detaljerade logotyp dör vid 16 pixlar. Reglerna för att göra en favicon som läses tydligt i den storleken:
- En form. En cirkel, en kvadrat eller en stark monogram. Undvik sammansatta former.
- Högt kontrast. Förgrunden och bakgrunden måste vara åtskilda minst WCAG AA. Subtila gradienter försvinner.
- Säker marginal. Lämna 10–20% utfyllnad. Webbläsare lägger ofta till en egen 1px-kant.
- Text? En enskild fet bokstav fungerar bättre än ett helt ord vid 16px.
aukimi Favicon Generator producerar alla sex filer och HTML-utdraget från en bild eller en bokstav på under 30 sekunder. Det genererar en riktig multi-storleks .ico (enligt Microsoft ICONDIR-specifikationen), inte en döpt PNG. Ladda upp, välj dina storlekar, hämta ett ziplöst paket, klistra in utdraget — klart.
Vanliga misstag
- Servering av
.icofrån CDN utan cache-headers. Webbläsare cachar favicons aggressivt. Använd en versionerad URL (?v=2) för att tvinga en uppdatering efter en omdesign. - Olika ikoner per underdomän. En enda
favicon.icopå apex är vanligtvis vad användare förväntar sig — fragmentera inte din identitet. - Glömma
theme-color-metataggen. Mobile Chrome färgar webbläsargränssnittet för att matcha detta värde. Att hoppa över det lämnar dig med standardgrå.
En bra favicon är tråkig på bästa sätt — användare märker när den saknas eller är fel, aldrig när den är rätt. Få de sex filerna skickade och gå vidare.
Gillade du den här artikeln?
Relaterade Artiklar
Den kreativa stacken kollapsade precis: En vecka av AI-verktyg, sen april 2026
Mellan 27 april och 4 maj 2026 överskred Adobe, Luma, Novi, fal, Figma, Canva, HeyGen och Anthropic samma tröskel på åtta dagar. Här är vad som lanserades, vad det betyder, och var det lämnar de webbläsarbaserade creativsuiter som försöker konsolidera allt.
AI-musik och SFX 2026: Vad som faktiskt fungerar i indiespelsljud
För tre år sedan betydde indiespelsljud antingen licensiering av royaltyfria bibliotek (billigt, generiskt, alla spel låter likadant) eller att anställa en kompositör (bra, dyrt). 2026 genererar AI musik som skeppas. Här är vilka verktyg som levererar — och var en mänsklig kompositör fortfarande vinner.
AI-meshgenerering 2026: Vad som faktiskt levereras i spelutvecklingspipelines
Image-to-3D gick från "kuslig demo" till "levereras i indieprojekt" på arton månader. Här är vad Tripo, Meshy, Rodin och Hyper3D faktiskt gör i produktion — och där 3D-konstnären slår modellen varje gång.