SVG-favicons: Hvorfor de er bedre, og hvordan du faktisk bruger dem

Sagen er den med favicons: vi har siddet fast med pixelerede ICO-filer siden 1999. Femogtyve år med slørede små ikoner. Men SVG-favicons? De er faktisk ret fantastiske — og de fleste udviklere bruger dem stadig ikke.

Lad mig vise dig, hvorfor du måske vil skifte, og endnu vigtigere, hvordan du gør det uden at ødelægge tingene for brugere på ældre browsere.

Hvorfor SVG-favicons faktisk er det værd

Uendelig skalering uden sløring

Kan du huske at oprette fem forskellige PNG-størrelser til dit favicon? 16x16, 32x32, 48x48... det bliver hurtigt kedeligt. Med SVG opretter du én fil. Det er det. Den ser skarp ud, uanset om den vises ved 16 pixels i en browserfane eller 512 pixels i en PWA-splashskærm.

Et typisk SVG-favicon fylder 300-800 bytes. Sammenlign det med en PNG favicon-pakke på 2-5 KB. Det er en 85-95% størrelsesreduktion. Ikke enormt i absolutte tal, men hvert byte tæller, når du optimerer.

Mørk tilstand der bare fungerer

Dette er killer-funktionen. Med et SVG-favicon kan du indlejre CSS media queries direkte i filen. Når en bruger skifter til mørk tilstand, tilpasser dit favicon sig automatisk.

Sådan ser det ud i praksis:

<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 er en simpel trekant, der er mørk på lyse baggrunde og lys på mørke baggrunde. Ingen JavaScript påkrævet. Ingen server-side detektion. Det fungerer bare.

CSS-styling og animation

Da SVG grundlæggende er XML med styling, kan du gøre ting, der ikke er mulige med rasterformater:

Ændre farver ved hover (i understøttede sammenhænge)
Tilføje subtile animationer
Bruge CSS-variabler til tematisering
Ændre stilarter med JavaScript

Jeg vil ikke anbefale at gå amok med animationer i et favicon — det er lidt irriterende. Men at have muligheden er rart.

Browserunderstøttelsens virkelighed

Lad os være ærlige om dette: SVG favicon-understøttelse er ikke perfekt. Her er virkeligheden pr. 2025:

Fuld understøttelse:

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

Ingen understøttelse:

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

Safari er det store problem. Apples browser understøtter stadig ikke SVG-favicons, hvilket betyder at omkring 20% af brugerne ikke vil se dit SVG-ikon. Du har brug for en fallback.

Implementering af SVG-favicons på den rigtige måde

Grundlæggende opsætning med fallbacks

Her er markup'en, der dækker alle:

<head>
  <!-- ICO fallback for very old browsers -->
  <link rel="icon" href="/favicon.ico" sizes="32x32">

  <!-- SVG for modern browsers -->
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">

  <!-- PNG fallback for Safari -->
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

  <!-- Apple Touch Icon (Safari won't use your SVG) -->
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>

Rækkefølgen betyder noget. Browsere parser disse sekventielt og bruger den sidste, de understøtter. Moderne browsere vil gribe SVG'en, Safari vil bruge PNG'en, og ældgamle browsere falder tilbage til ICO.

Pro tip: Forhindre Chrome i at bruge ICO

Chrome downloader sommetider ICO'en, selv når SVG er tilgængelig. Tilføj sizes="32x32" til dit ICO-link — dette fortæller Chrome, at ICO'en kun er til den specifikke størrelse, så den foretrækker den skalerbare SVG.

Oprettelse af et mørk tilstand-adaptivt SVG

Her er et mere komplet eksempel:

<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>

Dette opretter et cirkulært ikon med et bogstav, der inverterer farver baseret på systempræference.

Filstørrelse: Et realitetstjek

Folk hævder sommetider, at SVG altid er mindre. Det er ikke helt sandt. Her er realiteterne:

Simple geometriske ikoner: SVG vinder, ofte med meget
Komplekse illustrationer: PNG kan faktisk være mindre
Fotos eller detaljeret grafik: Brug ikke disse som favicons

For typiske logo-lignende favicons (former, bogstaver, simpel grafik) er SVG næsten altid det bedre valg mht. filstørrelse.

Optimeringstips

Før du deployer dit SVG-favicon, kør det gennem SVGOMG eller en lignende optimeringsværktøj. Eksportværktøjer som Illustrator og Figma tilføjer en masse unødvendigt — metadata, editor-kommentarer, unødvendig præcision i koordinater.

En god optimering kan reducere din SVG-størrelse med 50-70%.

Hold også dine designs simple. Komplekse gradienter, filtre og hundredvis af paths vil ikke bare øge filstørrelsen — de kan forårsage renderforsinkelser.

En ting at vide om temadetektion

prefers-color-scheme media query'en inde i SVG følger operativsystemets præference, ikke browserens temaindstilling. Hvis nogen bruger macOS i mørk tilstand, men har deres browser sat til et lyst tema, vil faviconen stadig være i mørk tilstand-stil.

Dette matcher, hvordan de fleste hjemmesider håndterer mørk tilstand alligevel, men det er værd at vide.

Bør du skifte til SVG?

Hvis dit nuværende favicon er en simpel form eller et bogstavmærke, er SVG sandsynligvis det værd. Du får:

Én fil i stedet for mange
Automatisk mørk tilstand-understøttelse
Mindre samlet filstørrelse
Fremtidssikret skalerbarhed

Hvis dit favicon er en detaljeret illustration, eller du har mange Safari-brugere, bliv ved med PNG som dit primære format.

Den bedste tilgang for de fleste sider? Brug begge. SVG til browsere der understøtter det, PNG-fallback til dem der ikke gør. Det tager 5 ekstra minutter at sætte op og dækker 100% af brugerne.

Hurtig implementeringstjekliste

[ ] Opret dit SVG-favicon (hold det simpelt)
[ ] Tilføj mørk tilstand media query om nødvendigt
[ ] Optimér med SVGOMG
[ ] Opret PNG-fallback (mindst 32x32)
[ ] Opret apple-touch-icon.png (180x180)
[ ] Tilføj korrekte link-tags med fallback-rækkefølge
[ ] Test i Chrome, Firefox og Safari

Det er virkelig alt, der er til det. SVG-favicons er ikke komplicerede — de er bare underudnyttede. Prøv dem i dit næste projekt.

Referencer

Can I Use - SVG Favicons - Browserkompatibilitetsdata for SVG favicon-understøttelse
Building an Adaptive Favicon - web.dev - Googles guide til at oprette adaptive favicons
SVG Favicons and All the Fun Things We Can Do With Them - CSS-Tricks - Omfattende udforskning af SVG favicon-muligheder
How to Favicon in 2025 - Evil Martians - Praktisk moderne favicon-implementeringsguide