Favicon-format förklarade: ICO, PNG, SVG och vad webbläsare behöver

Varför favicons fortfarande är märkligt komplicerade

En favicon ser ut som en enda liten bild, men den finns i skärningspunkten mellan webbläsargränssnitt, bokmärken, flikar, fastnålade genvägar, sökresultat, mobila hemskärmar och installationer av progressiva webbappar. Varje sammanhang har lite olika förväntningar.

Det är därför råd om favicons ofta känns röriga. Vissa team levererar bara en enda favicon.ico eftersom det brukade räcka. Andra genererar ett dussin filer utan att veta vilka som faktiskt används. Den rimliga medelvägen är mindre: förstå vad ICO, PNG och SVG är bra på var för sig, och leverera sedan en kompakt uppsättning som täcker aktuella webbläsare och vanliga enhetssammanhang.

Favicons är inte platsen för att visa upp en bildpipeline. De är platsen för att vara tråkig, tydlig och kompatibel.

ICO: det gamla formatet som vägrar dö

ICO är den klassiska Windows-behållaren för ikoner. Den kan innehålla flera bitmappsbilder i olika storlekar, vanligtvis 16×16, 32×32 och 48×48 pixlar. Det spelar roll eftersom en favicon kan återges mycket liten i en webbläsarflik, större i en bokmärkeslista och på ett annat sätt igen i Windows-genvägar.

Den viktiga detaljen är att ICO är en behållare, inte bara en enda bild. En bra favicon.ico innehåller vanligtvis flera rasterstorlekar så att webbläsaren eller operativsystemet kan välja närmaste matchning i stället för att skala en enda liten bitmapp.

ICO är fortfarande användbart av tre skäl:

• Webbläsare kan begära /favicon.ico automatiskt, även om du inte länkar till den i din HTML.
• Vissa äldre webbläsare och integrationer förväntar sig den.
• Det är en säker fallback när nyare ikondeklarationer ignoreras.

Det betyder inte att ICO bör vara din enda ikon. Det är omständligt att redigera, inte särskilt vänligt mot moderna arbetsflöden och dåligt som primär källa för ett varumärkesmärke. Behandla det som kompatibilitetsfallback.

I praktiken bör du placera en riktig /favicon.ico i webbplatsens rot. Servera inte en 404 där, om du inte uppskattar brusiga loggar och onödiga nya försök från webbläsare.

PNG: den pålitliga arbetshästen

PNG är fortfarande det mest förutsägbara rasterformatet för favicons och touch-ikoner. Det stöder transparens, har brett stöd och beter sig konsekvent i olika webbläsare och plattformar.

För favicons är PNG användbart när du vill ha explicita ikoner i pixelstorlekar som 32×32 eller 48×48. För ikoner på mobila hemskärmar är PNG i praktiken obligatoriskt i vissa miljöer. Apple touch icons är till exempel PNG-baserade vid normal produktionsanvändning.

Några praktiska regler hjälper:

• Exportera från en vektorkälla, inte från en redan liten bitmapp.
• Gör ikonen läsbar i 16×16 innan du bryr dig om större storlekar.
• Lägg till tillräckligt med luft så att märket inte känns beskuret i rundade eller maskerade sammanhang.
• Undvik fin text, tunna linjer och detaljerade illustrationer.

PNG-komprimering är vanligtvis inte värd att fastna vid för favicons eftersom filerna är små. Leverera ändå inte en touch-ikon på 500 KB bara för att den kom direkt från en designexport. Om du redan granskar bredare bildval gäller samma disciplinerade tänkande från beslut om bildformat på den moderna webben även här: välj format efter uppgiften, inte för att det är modernt.

SVG: det moderna, flexibla alternativet

SVG-favicons är attraktiva eftersom de är upplösningsoberoende. En enda liten fil kan återges skarpt i många storlekar, och den kan redigeras direkt i kod eller exporteras från designprogram.

Moderna versioner av Chromium, Firefox och Safari stöder SVG-favicons. Det gör SVG till ett bra primärt favicon-format för många webbplatser, särskilt när ikonen är en enkel logotyp, glyf eller geometriskt märke.

Men SVG-favicons har förbehåll.

För det första bör SVG:n vara självständig. Förlita dig inte på externa typsnitt, fjärrbilder eller skript. Webbläsare tillämpar begränsningar på SVG som används som bild, och även när något fungerar i en webbläsare kan det misslyckas i en annan.

För det andra, håll den visuellt enkel. SVG löser inte 16-pixelsproblemet magiskt. En detaljerad vektorillustration är fortfarande en suddig fläck när den pressas in i en flik.

För det tredje, var försiktig med dynamisk styling. Vissa team använder prefers-color-scheme inuti en SVG-favicon så att ikonen anpassar sig till mörka och ljusa webbläsarteman. Det kan fungera, men webbläsarbeteende och cachelagring kan vara ojämna. Om varumärkesigenkänning är viktigt slår en enda robust ikon ofta en smart adaptiv.

SVG är en bra källa och ett bra modernt leveransformat. Det är inte ett skäl att hoppa över fallback-filer.

Vad webbläsare faktiskt letar efter

Webbläsare hittar favicons på två huvudsakliga sätt: explicita HTML-länkar och implicita begäranden mot roten.

Det implicita beteendet är det gamla: om webbläsaren vill ha en ikon och inte har hittat någon kan den begära /favicon.ico. Det är därför ICO-filen i roten fortfarande är användbar även på moderna webbplatser.

Det explicita beteendet använder <link>-element i dokumentets head. En kompakt modern uppsättning ser ut så här:

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

Manifestet kan sedan peka på större PNG-ikoner som används för installerbara webbappar:

{
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Detta är inte den enda giltiga uppsättningen, men det är en bra baslinje. Den ger moderna webbläsare en SVG, tillhandahåller en konventionell ICO-fallback, täcker sparande till iOS-hemskärmen och stöder sammanhang för appinstallation.

Favicon-uppsättningen de flesta webbplatser bör leverera

För en vanlig marknadsföringswebbplats, dokumentationswebbplats, SaaS-app eller publikation räcker den här uppsättningen:

• /favicon.ico som innehåller 16×16 och 32×32, eventuellt 48×48.
• /icon.svg som modern skalbar favicon.
• /apple-touch-icon.png i 180×180.
• /icon-192.png och /icon-512.png om du har ett webbappsmanifest.

Du kan lägga till fler storlekar om en plattform har ett specifikt krav, men generera inte tio filer av vana. Varje extra fil är ännu en sak att cachelagra, glömma, namnge fel eller lämna inaktuell efter en rebranding.

Om din webbplats inte är installerbar och inte har något manifest kanske du inte behöver ikonerna på 192 och 512 pixlar. Om din webbplats beter sig som en app gör du förmodligen det.

Vanliga feltyper

De vanligaste favicon-buggarna är inte konstnärliga. De är leveransproblem.

Ett är aggressiv cachelagring. Webbläsare håller envist fast vid favicons. Under testning kanske en ändrad ikon inte visas förrän du gör en hård uppdatering, rensar webbplatsdata, använder ett nytt filnamn eller testar i en ny profil. För rebrandingar i produktion kan ändring till /icon.svg?v=2 hjälpa i HTML, men roten /favicon.ico är svårare eftersom webbläsare begär den direkt. Att ersätta filen och vänta ut cacheminnen är ofta en del av jobbet.

Ett annat vanligt problem är fel MIME-typ. SVG bör serveras som image/svg+xml, PNG som image/png och ICO vanligtvis som image/x-icon eller image/vnd.microsoft.icon. Många webbläsare är förlåtande, men inte alla sammanhang är det. Om något bara misslyckas i en webbläsare, granska nätverkssvaret innan du ritar om ikonen. Samma vanor som används vid felsökning av omdirigeringar och HTTP-headers i produktion gäller här: titta på det faktiska svaret, inte på vad CMS:et påstår sig servera.

Ett tredje problem är designtäthet. Logotyper som fungerar utmärkt i en webbplatshuvuddel misslyckas ofta som favicons. Flikikonen är ett brutalt test. Ta bort ord, förenkla former, öka kontrasten och testa i verkliga storlekar. Om ikonen är meningsbärande innehåll inne på sidan spelar tillgänglighetsfrågor som alt-text roll; för själva faviconen är den dekoration i webbläsarens gränssnitt, inte sidinnehåll. För distinktionen, se vår pragmatiska guide till alt-text för bilder.

<!-- tool-cta:start -->

💡 Prova detta: Generera ICO-, PNG- och SVG-varianterna som moderna webbläsare förväntar sig i ett svep med Ultimate Favicon Generator.

<!-- tool-cta:end -->

En enkel checklista för implementering

Använd den här checklistan före leverans:

1. Börja från ett rent vektormaster.
2. Testa märket i 16×16 och 32×32.
3. Exportera en självständig SVG-favicon.
4. Generera en ICO-fallback med flera storlekar.
5. Exportera en 180×180 Apple touch icon.
6. Lägg till 192×192 och 512×512 PNG:er om du använder ett manifest.
7. Placera /favicon.ico i webbplatsens rot.
8. Verifiera statuskoder, MIME-typer och cache-headers.
9. Testa i minst en Chromium-webbläsare, Firefox och Safari om din målgrupp omfattar Apple-enheter.

Favicons är små, men de är också mycket synliga. En trasig favicon gör att en webbplats känns ofärdig. En välgjord försvinner in i gränssnittet, vilket är precis poängen.