SVG-favicons: Varför de är bättre och hur du faktiskt använder dem

Här är grejen med favicons: vi har suttit fast med pixlade ICO-filer sedan 1999. Tjugofem år av suddiga små ikoner. Men SVG-favicons? De är faktiskt ganska fantastiska — och de flesta utvecklare använder dem fortfarande inte.

Låt mig visa dig varför du kanske vill byta, och ännu viktigare, hur du gör det utan att förstöra saker för användare med äldre webbläsare.

Varför SVG-favicons faktiskt är värda det

Oändlig skalning utan suddighet

Minns du när du skapade fem olika PNG-storlekar för din favicon? 16x16, 32x32, 48x48... det blir tröttsamt. Med SVG skapar du en fil. Det är allt. Den ser skarp ut oavsett om den visas i 16 pixlar i en webbläsarflik eller 512 pixlar på en PWA-startskärm.

En typisk SVG-favicon väger 300-800 byte. Jämför det med ett PNG favicon-paket på 2-5 KB. Det är en 85-95% storleksreduktion. Inte enormt i absoluta termer, men varje byte räknas när du optimerar.

Mörkt läge som bara fungerar

Det här är killerfunktionen. Med en SVG-favicon kan du bädda in CSS media queries direkt i filen. När en användare växlar till mörkt läge anpassas din favicon automatiskt.

Så här ser det ut i praktiken:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    path { fill: #1a1a1a; }
    @media (prefers-color-scheme: dark) {
      path { fill: #ffffff; }
    }
  </style>
  <path d="M16 4L4 28h24L16 4z"/>
</svg>

Det är en enkel triangel som är mörk på ljusa bakgrunder och ljus på mörka bakgrunder. Ingen JavaScript krävs. Ingen serversidedetektering. Det bara fungerar.

CSS-styling och animation

Eftersom SVG i princip är XML med styling kan du göra saker som inte är möjliga med rasterformat:

Ändra färger vid hovring (i stödda sammanhang)
Lägga till subtila animationer
Använda CSS-variabler för temahantering
Modifiera stilar med JavaScript

Jag skulle inte överdriva med animationer i en favicon — det är ganska irriterande. Men att ha möjligheten är trevligt.

Webbläsarstödet i verkligheten

Låt oss vara ärliga om detta: SVG favicon-stöd är inte perfekt. Här är verkligheten per 2025:

Fullt stöd:

Chrome 80+ (desktop och Android)
Firefox 41+
Edge 80+
Opera 44+
Samsung Internet 13+

Inget stöd:

Safari (både desktop och iOS)
Internet Explorer
Android Browser

Safari är det stora problemet. Apples webbläsare stöder fortfarande inte SVG-favicons, vilket innebär att ungefär 20% av användarna inte ser din SVG-ikon. Du behöver en reservlösning.

Implementera SVG-favicons på rätt sätt

Grundläggande installation med reservlösningar

Här är koden som täcker alla:

<head>
  <!-- ICO-reserv för mycket gamla webbläsare -->
  <link rel="icon" href="/favicon.ico" sizes="32x32">

  <!-- SVG för moderna webbläsare -->
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">

  <!-- PNG-reserv för Safari -->
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

  <!-- Apple Touch Icon (Safari använder inte din SVG) -->
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>

Ordningen spelar roll. Webbläsare tolkar dessa sekventiellt och använder den sista de stöder. Moderna webbläsare väljer SVG:n, Safari använder PNG:n och uråldriga webbläsare faller tillbaka på ICO.

Proffstips: Förhindra Chrome från att använda ICO

Chrome laddar ibland ned ICO:n även när SVG finns tillgänglig. Lägg till sizes="32x32" till din ICO-länk — detta talar om för Chrome att ICO:n bara är för den specifika storleken, så den föredrar den skalbara SVG:n.

Skapa en adaptiv SVG för mörkt läge

Här är ett mer komplett exempel:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .icon-bg { fill: #ffffff; }
    .icon-fg { fill: #000000; }

    @media (prefers-color-scheme: dark) {
      .icon-bg { fill: #1a1a1a; }
      .icon-fg { fill: #f0f0f0; }
    }
  </style>

  <circle class="icon-bg" cx="16" cy="16" r="15"/>
  <text class="icon-fg" x="16" y="21"
        text-anchor="middle"
        font-family="system-ui"
        font-weight="bold"
        font-size="18">F</text>
</svg>

Detta skapar en cirkulär ikon med en bokstav som inverterar färger baserat på systeminställning.

Filstorleksverkligheten

Folk hävdar ibland att SVG alltid är mindre. Det stämmer inte riktigt. Så här ligger det till:

Enkla geometriska ikoner: SVG vinner, ofta med god marginal
Komplexa illustrationer: PNG kan faktiskt vara mindre
Foton eller detaljerad grafik: Använd inte dessa som favicons

För typiska logotypliknande favicons (former, bokstäver, enkel grafik) är SVG nästan alltid det bättre valet för filstorlek.

Optimeringstips

Innan du distribuerar din SVG-favicon, kör den genom SVGOMG eller en liknande optimerare. Exportverktyg som Illustrator och Figma lägger till en massa skräp — metadata, redigeringskommentarer, onödig precision i koordinater.

En bra optimering kan minska din SVG-storlek med 50-70%.

Håll även dina designer enkla. Komplexa gradienter, filter och hundratals sökvägar ökar inte bara filstorleken — de kan orsaka renderingsfördröjningar.

En sak att veta om temadetektering

Media queryn prefers-color-scheme inuti SVG följer operativsystemets preferens, inte webbläsarens temainställning. Om någon använder macOS i mörkt läge men har sin webbläsare inställd på ett ljust tema, kommer faviconen fortfarande att vara i mörkt läge-stil.

Detta matchar hur de flesta webbplatser hanterar mörkt läge ändå, men det är värt att veta.

Ska du byta till SVG?

Om din nuvarande favicon är en enkel form eller bokstavslogotyp är SVG förmodligen värt det. Du får:

En fil istället för många
Automatiskt stöd för mörkt läge
Mindre total filstorlek
Framtidssäker skalbarhet

Om din favicon är en detaljerad illustration eller om du har många Safari-användare, behåll PNG som ditt primära format.

Det bästa tillvägagångssättet för de flesta webbplatser? Använd båda. SVG för webbläsare som stöder det, PNG-reserv för de som inte gör det. Det tar extra 5 minuter att konfigurera och täcker 100% av användarna.

Snabb implementeringschecklista

[ ] Skapa din SVG-favicon (håll den enkel)
[ ] Lägg till media query för mörkt läge vid behov
[ ] Optimera med SVGOMG
[ ] Skapa PNG-reserv (minst 32x32)
[ ] Skapa apple-touch-icon.png (180x180)
[ ] Lägg till korrekta link-taggar med reservordning
[ ] Testa i Chrome, Firefox och Safari

Det är verkligen allt. SVG-favicons är inte komplicerade — de är bara underutnyttjade. Ge dem ett försök i ditt nästa projekt.

Referenser

Can I Use - SVG Favicons - Webbläsarkompatibilitetsdata för SVG favicon-stöd
Building an Adaptive Favicon - web.dev - Googles guide för att skapa adaptiva favicons
SVG Favicons and All the Fun Things We Can Do With Them - CSS-Tricks - Omfattande utforskning av SVG favicon-möjligheter
How to Favicon in 2025 - Evil Martians - Praktisk guide för modern favicon-implementering