Artikel

Skapa en favicon från en PNG

En favicon är en liten grafik som webbläsare visar i flikar, bokmärken och historiklistor. Att göra det rätt innebär mer än att ändra storlek på en logotyp: .ico-formatet packar flera upplösningar i en fil, moderna webbläsare föredrar PNG, mobila enheter har sitt eget apple-touch-icon och webbapplikationsmanifest behöver sin egen ikonuppsättning. Den här artikeln täcker varje del och förklarar hur man producerar hela uppsättningen från en enda käll-PNG.

Skrivet av Bastien Sulyan · Publicerat den 29 juni 2026

Vad en favicon är och var webbläsare använder den

Ordet favicon är en sammandragning av "favorite icon". Webbläsare visade det först i adressfältet i Internet Explorer 5 (1999), sedan adopterades det för bokmärken. Idag visas det i webbläsarflikar, bokmärkesfältet, webbhistorik, sidan för ny flik i vissa webbläsare och operativsystems aktivitetsfält när en webbplats är fäst. På mobila enheter, om en användare lägger till en webbplats på sin startskärm, använder enheten en relaterad men distinkt bild kallad apple-touch-icon snarare än standard-faviconen. Sökmotorer visar ibland favicons bredvid resultat i sitt gränssnitt. Grafiken är liten av design, vilket gör den effektiv för snabb visuell identifiering men också krävande att producera väl: vid 16x16 pixlar blir en detaljerad logotyp ett otydligt suddigt märke. Favicon-filen har gått igenom flera format under decennierna, med .ico som förblir mest brett kompatibelt och PNG nu som modern standard för de flesta webbläsare.

.ico-behållaren: flera upplösningar i en fil

.ico-formatet är en behållare, inte en enstaka bild. En enda .ico-fil kan hålla flera bitmappsbilder vid olika upplösningar, var och en lagrad som en separat post i ett index i början av filen. De tre vanligaste storlekarna är 16x16, 32x32 och 48x48 pixlar. När Windows visar en favicon i Utforskaren eller i aktivitetsfältet väljer det den post som bäst matchar visningskontexten. Äldre Windows-versioner behövde en 48x48-post för aktivitetsfältsplatser med hög densitet. Webbläsare begär faviconen vid 16x16 för flikar men kan använda en större post om en högre-densitetsskärm detekteras. Att packa alla tre storlekar i en .ico-fil innebär att en enda HTTP-begäran täcker alla användningsfall. Att distribuera dem som separata PNG är också giltigt men kräver extra länktaggar och lägger till HTTP-begäranden. De interna bilderna inuti en .ico-fil är standard BMP- eller PNG-data, så behållaren lägger bara till ett litet headers-overhead per post.

Designa för små storlekar: förenkla märket

Vid 16x16 pixlar har du totalt 256 pixlar. En typisk logotyp med en ordmärke eller fina detaljer blir oläsbar i den storleken. Standardtillvägagångssättet är att skapa ett förenklat märke: en enda bokstav, en abstrakt form eller en ikon som representerar varumärket utan att förlita sig på detaljer. Några specifika problem att förutse: tunna streck försvinner helt i små storlekar, särskilt på skärmar som inte är retina. Bokstavspar och detaljer i negativt utrymme smälter samman till grå brus. Gradienter blir knappt synliga. Hög kontrast mellan märket och dess bakgrund är den enda viktigaste faktorn för läsbarhet. En solid form på en enkel bakgrund läser nästan alltid bättre än en detaljerad illustration vid 16x16. Storlekarna 32x32 och 48x48 är mer förlåtande och kan stödja lite mer detalj, men 16x16-versionen bör behandlas som den bindande begränsningen. Om märket fortfarande inte läser vid 16x16 behöver designen ytterligare förenkling.

Den moderna uppsättningen: .ico, PNG-ikoner, apple-touch-icon, manifest och HTML-länktaggar

En komplett favicon-konfiguration för en offentlig webbplats behöver för närvarande fem saker. För det första, en favicon.ico i webbplatsens rot (webbläsare begär /favicon.ico direkt utan en länktagg som reserv). För det andra, en 32x32 PNG för moderna skrivbordswebbläsare, deklarerad med en länktagg: `<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">`. För det tredje, en 16x16 PNG för flikstorleken: `<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">`. För det fjärde, ett apple-touch-icon vid 180x180 pixlar för iOS-startskärmsbokmärken: `<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">`. För det femte, ett webbapplikationsmanifest (site.webmanifest) med en 192x192 och en 512x512 PNG för Android och progressiva webbapplikationer. Transparens stöds i PNG och i PNG-kodade poster inuti .ico, men apple-touch-icon bör ha en ogenomskinlig bakgrund eftersom iOS ignorerar alfakanalen och fyller transparenta områden med svart.

Gör det lokalt: favicon-generator håller din bild på din enhet

Favicon-generatorn på den här webbplatsen tar en PNG och producerar den fullständiga uppsättningen: en multi-upplösnings favicon.ico packad med 16x16, 32x32 och 48x48 poster, de enskilda PNG-storlekarna för direkt länktaggsanvändning och 180x180 apple-touch-icon. Allt detta händer i din webbläsare med Canvas API och en JavaScript .ico-kodare. Din källbild laddas aldrig upp någonstans; den stannar på din enhet. Detta spelar roll när källfilen är en företagslogotyp eller någon tillgång som inte bör lämna din maskin innan du kontrollerar vart den tar vägen. Varje genererad fil erbjuds som en egen nedladdning, med de konventionella filnamnen. Du kopierar dem till roten på din webbplats och lägger till motsvarande länktaggar i din HTML-head. Om din källlogotyp har fina detaljer som inte överlever 16x16-renderingen kan du beskära eller förenkla den innan du släpper den i generatorn, eller tillhandahålla en annan källbild specifikt förberedd för faviconen.

Verktyg i den här artikeln

Vanliga frågor

Behöver jag fortfarande en favicon.ico om jag deklarerar PNG-länktaggar?

Ja, av två skäl. För det första letar webbläsare som inte läser din HTML (webbcrawlers, RSS-läsare, vissa gamla mobila webbläsare) efter /favicon.ico direkt i domänens rot. Om den filen saknas genererar de en 404-begäran vid varje sidladdning, vilket lägger till brus i dina serverloggar och en liten onödig tur-retur. För det andra känner äldre versioner av Internet Explorer bara igen .ico-formatet och ignorerar PNG-länktaggar. Att tillhandahålla båda täcker alla fall.

Kan jag använda en SVG som favicon?

Chrome och Firefox stöder SVG-favicons via `<link rel="icon" type="image/svg+xml" href="/favicon.svg">`. Safari stöder inte SVG-favicons. Eftersom SVG-favicons är upplösningsoberoende ser de skarpa ut på alla skärmdensiteter, inklusive retina-skärmar, utan att behöva flera storleksvarianter. Den praktiska rekommendationen är att deklarera SVG-länktaggen för webbläsare som stöder den och ändå inkludera .ico-reserven för fullständig täckning. SVG-favicons kan också inkludera en `prefers-color-scheme` media-query för att automatiskt växla mellan en ljus och mörk version.

Vilken bild ska jag utgå från för bästa resultat?

En kvadratisk PNG vid 512x512 eller större med en transparent bakgrund ger störst flexibilitet. Att börja stort och nedskalas bevarar mer detalj än att börja från en liten bild. Om din huvudlogotyp inkluderar ett ordmärke, överväg att förbereda en separat förenklad version som bara visar ikonen eller märket, eftersom texten inte kommer att vara läsbar vid 16x16 oavsett källupplösning. Hög kontrast mellan märket och dess bakgrund är den mest tillförlitliga förutsägaren för om de små storlekarna kommer att läsa tydligt.