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

Så her er saken med favicons: vi har vært fastlåst med pikselerte ICO-filer siden 1999. Tjuefem år med uskarpe små ikoner. Men SVG-favicons? De er ærlig talt ganske fantastiske — og de fleste utviklere bruker dem fortsatt ikke.

La meg vise deg hvorfor du kanskje vil bytte, og enda viktigere, hvordan du gjør det uten å ødelegge ting for brukere på eldre nettlesere.

Hvorfor SVG-favicons faktisk er verdt det

Uendelig skalering uten uskarphet

Husker du å lage fem ulike PNG-størrelser for faviconet ditt? 16x16, 32x32, 48x48... det blir kjedelig fort. Med SVG lager du én fil. Det er alt. Den ser skarp ut enten den vises ved 16 piksler i en nettleserfane eller 512 piksler i en PWA-velkomstskjerm.

Et typisk SVG-favicon veier 300-800 bytes. Sammenlign det med en PNG-favicon-pakke på 2-5 KB. Det er en 85-95 % størrelsesreduksjon. Ikke enormt i absolutte termer, men hvert byte teller når du optimaliserer.

Mørk modus som bare fungerer

Dette er killer-funksjonen. Med et SVG-favicon kan du bygge inn CSS-mediespørringer direkte i filen. Når en bruker bytter til mørk modus, tilpasser faviconet seg automatisk.

Slik ser det ut 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 enkel trekant som er mørk på lyse bakgrunner og lys på mørke bakgrunner. Ingen JavaScript nødvendig. Ingen serverside-deteksjon. Det bare fungerer.

CSS-styling og animasjon

Siden SVG i bunn og grunn er XML med styling, kan du gjøre ting som ikke er mulig med rasterformater:

Endre farger ved muspekerhold (i støttede kontekster)
Legge til subtile animasjoner
Bruke CSS-variabler for tematisering
Endre stiler med JavaScript

Jeg ville ikke gått amok med animasjoner i et favicon — det er litt irriterende. Men å ha muligheten er fint.

Nettleserstøtte-situasjonen

La oss være ærlige om dette: SVG-favicon-støtte er ikke perfekt. Her er virkeligheten per 2025:

Full støtte:

Chrome 80+ (stasjonær og Android)
Firefox 41+
Edge 80+
Opera 44+
Samsung Internet 13+

Ingen støtte:

Safari (både stasjonær og iOS)
Internet Explorer
Android Browser

Safari er det store problemet. Apples nettleser støtter fortsatt ikke SVG-favicons, noe som betyr at omtrent 20 % av brukerne ikke vil se SVG-ikonet ditt. Du trenger en reserveløsning.

Implementere SVG-favicons på riktig måte

Grunnleggende oppsett med reserveløsninger

Her er oppmerkningen som dekker alle:

<head>
  <!-- ICO-reserveløsning for veldig gamle nettlesere -->
  <link rel="icon" href="/favicon.ico" sizes="32x32">

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

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

  <!-- Apple Touch Icon (Safari vil ikke bruke SVG-en din) -->
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>

Rekkefølgen er viktig. Nettlesere tolker disse sekvensielt og bruker den siste de støtter. Moderne nettlesere vil ta SVG-en, Safari vil bruke PNG-en, og gamle nettlesere faller tilbake til ICO.

Profftips: Hindre Chrome fra å bruke ICO

Chrome laster noen ganger ned ICO-en selv når SVG er tilgjengelig. Legg til sizes="32x32" på ICO-lenken din — dette forteller Chrome at ICO-en kun er for den spesifikke størrelsen, slik at den foretrekker den skalerbare SVG-en.

Lage et mørk modus-adaptivt SVG

Her er et mer komplett 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 skaper et sirkulært ikon med en bokstav som inverterer farger basert på systempreferanse.

Filstørrelse i virkeligheten

Folk hevder noen ganger at SVG alltid er mindre. Det stemmer ikke helt. Her er realiteten:

Enkle geometriske ikoner: SVG vinner, ofte med god margin
Komplekse illustrasjoner: PNG kan faktisk være mindre
Fotografier eller detaljert grafikk: Ikke bruk disse som favicons

For typiske logostil-favicons (former, bokstaver, enkel grafikk) er SVG nesten alltid det bedre valget for filstørrelse.

Optimaliseringstips

Før du distribuerer SVG-faviconet ditt, kjør det gjennom SVGOMG eller et lignende optimaliseringsverktøy. Eksportverktøy som Illustrator og Figma legger til mye unødvendig — metadata, redigeringskommentarer, unødvendig presisjon i koordinater.

En god optimalisering kan kutte SVG-størrelsen din med 50-70 %.

Hold også designene enkle. Komplekse gradienter, filtre og hundrevis av stier vil ikke bare øke filstørrelsen — de kan forårsake gjengivelsesforsinkelser.

En ting å vite om temadeteksjon

Mediespørringen prefers-color-scheme inne i SVG følger operativsystemets preferanse, ikke nettleserens temainnstilling. Hvis noen bruker macOS i mørk modus men har nettleseren satt til et lyst tema, vil faviconet fortsatt være i mørk modus-stil.

Dette matcher hvordan de fleste nettsteder håndterer mørk modus uansett, men det er verdt å vite.

Bør du bytte til SVG?

Hvis det nåværende faviconet ditt er en enkel form eller bokstavmerke, er SVG sannsynligvis verdt det. Du får:

Én fil i stedet for mange
Automatisk mørk modus-støtte
Mindre total filstørrelse
Fremtidssikret skalerbarhet

Hvis faviconet ditt er en detaljert illustrasjon eller du har mange Safari-brukere, hold deg til PNG som primærformat.

Den beste tilnærmingen for de fleste nettsteder? Bruk begge. SVG for nettlesere som støtter det, PNG-reserveløsning for de som ikke gjør det. Det tar 5 ekstra minutter å sette opp og dekker 100 % av brukerne.

Rask implementeringssjekkliste

[ ] Lag SVG-faviconet ditt (hold det enkelt)
[ ] Legg til mørk modus-mediespørring om nødvendig
[ ] Optimaliser med SVGOMG
[ ] Lag PNG-reserveløsning (minimum 32x32)
[ ] Lag apple-touch-icon.png (180x180)
[ ] Legg til riktige link-tagger med reserveløsningsrekkefølge
[ ] Test i Chrome, Firefox og Safari

Det er egentlig alt som skal til. SVG-favicons er ikke kompliserte — de er bare underbrukt. Prøv dem på neste prosjekt.

Referanser

Can I Use - SVG Favicons - Nettleserkompatibilitetsdata for SVG-favicon-støtte
Building an Adaptive Favicon - web.dev - Googles guide til å lage adaptive favicons
SVG Favicons and All the Fun Things We Can Do With Them - CSS-Tricks - Omfattende utforskning av SVG-favicon-muligheter
How to Favicon in 2025 - Evil Martians - Praktisk guide for moderne favicon-implementering