SVG-favicons: Waarom ze beter zijn en hoe je ze echt gebruikt

Hier is het punt over favicons: we zitten al vast aan korrelige ICO-bestanden sinds 1999. Vijfentwintig jaar wazige kleine icoontjes. Maar SVG-favicons? Die zijn eerlijk gezegd best geweldig — en de meeste ontwikkelaars gebruiken ze nog steeds niet.

Laat me je laten zien waarom je misschien wilt overstappen, en nog belangrijker, hoe je het doet zonder dingen te breken voor gebruikers op oudere browsers.

Waarom SVG-favicons echt de moeite waard zijn

Oneindige schaling zonder wazig beeld

Weet je nog dat je vijf verschillende PNG-maten moest maken voor je favicon? 16x16, 32x32, 48x48... dat wordt snel vervelend. Met SVG maak je een bestand. Dat is alles. Het ziet er scherp uit, of het nu wordt weergegeven op 16 pixels in een browsertab of 512 pixels in een PWA-splashscreen.

Een typische SVG-favicon weegt 300-800 bytes. Vergelijk dat met een PNG-faviconpakket van 2-5 KB. Dat is een besparing van 85-95%. Niet enorm in absolute termen, maar elke byte telt wanneer je optimaliseert.

Donkere modus die gewoon werkt

Dit is de killerfunctie. Met een SVG-favicon kun je CSS media queries direct in het bestand insluiten. Wanneer een gebruiker naar donkere modus schakelt, past je favicon zich automatisch aan.

Zo ziet dat er in de praktijk uit:

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

Dat is een eenvoudige driehoek die donker is op lichte achtergronden en licht op donkere achtergronden. Geen JavaScript nodig. Geen server-side detectie. Het werkt gewoon.

CSS-styling en animatie

Aangezien SVG eigenlijk XML met styling is, kun je dingen doen die niet mogelijk zijn met rasterformaten:

Kleuren wijzigen bij hover (in ondersteunde contexten)
Subtiele animaties toevoegen
CSS-variabelen gebruiken voor theming
Stijlen aanpassen met JavaScript

Ik zou niet overdrijven met animaties in een favicon — dat is best irritant. Maar de optie hebben is fijn.

De browserondersteuning-situatie

Laten we hier eerlijk over zijn: SVG-favicon-ondersteuning is niet perfect. Dit is de realiteit in 2025:

Volledige ondersteuning:

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

Geen ondersteuning:

Safari (zowel desktop als iOS)
Internet Explorer
Android Browser

Safari is het grote probleem. Apple's browser ondersteunt nog steeds geen SVG-favicons, wat betekent dat ongeveer 20% van de gebruikers je SVG-icoon niet zal zien. Je hebt een fallback nodig.

SVG-favicons op de juiste manier implementeren

Basisopzet met fallbacks

Dit is de markup die iedereen dekt:

<head>
  <!-- ICO-fallback voor zeer oude browsers -->
  <link rel="icon" href="/favicon.ico" sizes="32x32">

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

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

  <!-- Apple Touch Icon (Safari gebruikt je SVG niet) -->
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>

De volgorde is belangrijk. Browsers verwerken deze sequentieel en gebruiken de laatste die ze ondersteunen. Moderne browsers pakken de SVG, Safari gebruikt de PNG en oeroude browsers vallen terug op ICO.

Pro tip: Voorkom dat Chrome ICO gebruikt

Chrome downloadt soms de ICO zelfs wanneer SVG beschikbaar is. Voeg sizes="32x32" toe aan je ICO-link — dit vertelt Chrome dat de ICO alleen voor die specifieke maat is, dus het geeft de voorkeur aan de schaalbare SVG.

Een donkere modus-adaptieve SVG maken

Hier is een completer voorbeeld:

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

Dit maakt een rond icoon met een letter die kleuren omkeert op basis van de systeemvoorkeur.

Realiteitscheck bestandsgrootte

Mensen beweren soms dat SVG altijd kleiner is. Dat klopt niet helemaal. Hier is de situatie:

Eenvoudige geometrische iconen: SVG wint, vaak met een groot verschil
Complexe illustraties: PNG kan eigenlijk kleiner zijn
Foto's of gedetailleerde afbeeldingen: Gebruik deze niet als favicons

Voor typische logo-achtige favicons (vormen, letters, eenvoudige afbeeldingen) is SVG bijna altijd de betere keuze qua bestandsgrootte.

Optimalisatietips

Voordat je je SVG-favicon deployt, haal het door SVGOMG of een vergelijkbare optimizer. Exporttools zoals Illustrator en Figma voegen veel rommel toe — metadata, editor-opmerkingen, onnodige precisie in coördinaten.

Een goede optimalisatie kan je SVG-grootte met 50-70% verkleinen.

Houd je ontwerpen ook eenvoudig. Complexe verlopen, filters en honderden paden vergroten niet alleen de bestandsgrootte — ze kunnen ook renderingvertragingen veroorzaken.

Iets wat je moet weten over themadetectie

De prefers-color-scheme media query binnen SVG volgt de voorkeur van het besturingssysteem, niet de thema-instelling van de browser. Als iemand macOS in donkere modus gebruikt maar zijn browser op een licht thema heeft staan, zal de favicon nog steeds de donkere modus-stijl hebben.

Dit komt overeen met hoe de meeste websites sowieso donkere modus afhandelen, maar het is goed om te weten.

Moet je overstappen naar SVG?

Als je huidige favicon een eenvoudige vorm of lettermerk is, is SVG waarschijnlijk de moeite waard. Je krijgt:

Een bestand in plaats van vele
Automatische donkere modus-ondersteuning
Kleinere totale bestandsgrootte
Toekomstbestendige schaalbaarheid

Als je favicon een gedetailleerde illustratie is of je veel Safari-gebruikers hebt, blijf dan bij PNG als je primaire formaat.

De beste aanpak voor de meeste sites? Gebruik beide. SVG voor browsers die het ondersteunen, PNG-fallback voor browsers die dat niet doen. Het kost 5 extra minuten om in te stellen en dekt 100% van de gebruikers.

Snelle implementatiechecklist

[ ] Maak je SVG-favicon (houd het eenvoudig)
[ ] Voeg donkere modus media query toe indien nodig
[ ] Optimaliseer met SVGOMG
[ ] Maak PNG-fallback (minimaal 32x32)
[ ] Maak apple-touch-icon.png (180x180)
[ ] Voeg juiste link-tags toe met fallback-volgorde
[ ] Test in Chrome, Firefox en Safari

Dat is eigenlijk alles wat erbij komt kijken. SVG-favicons zijn niet ingewikkeld — ze worden alleen te weinig gebruikt. Probeer ze bij je volgende project.

Referenties

Can I Use - SVG Favicons - Browsercompatibiliteitsdata voor SVG-favicon-ondersteuning
Building an Adaptive Favicon - web.dev - Google's handleiding voor het maken van adaptieve favicons
SVG Favicons and All the Fun Things We Can Do With Them - CSS-Tricks - Uitgebreide verkenning van SVG-faviconmogelijkheden
How to Favicon in 2025 - Evil Martians - Praktische moderne favicon-implementatiehandleiding