Handleiding

Favicon (.ico) vs SVG

SVG is het spannendste favicon-formaat van dit moment — vector, dark-mode-aware en minuscuul. Maar het kan .ico in 2026 nog niet volledig vervangen. Hier lees je waarom, en hoe je beide combineert.

Check favicons on any website

Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.

Install Chrome Extension

SVG schaalt oneindig en ondersteunt dark-mode media queries in het bestand zelf. Eén SVG van 1 KB dekt elke schermheidheid in elke moderne browser.

ICO is de universele fallback. Oudere Safari-versies, legacy-browsers en de standaard-URL <code>/favicon.ico</code>-conventie zijn er allemaal nog van afhankelijk.

De aanbevolen setup: lever <code>favicon.ico</code> + <code>favicon.svg</code>. Browsers die SVG ondersteunen geven er de voorkeur aan; de rest valt automatisch terug op .ico.

Hoe het werkt

  1. 1

    Ontwerp of exporteer een SVG

    Vierkante viewBox, één root <svg>-element.

  2. 2

    Genereer de .ico-fallback

    Gebruik FetchFavicon om je SVG te rasteren naar een multi-size .ico.

  3. 3

    Link beide

    <link rel="icon" href="/favicon.ico"> + <link rel="icon" type="image/svg+xml" href="/favicon.svg">.

Probeer het nu

Genereer het .ico + SVG-paar

SVG naar PNG Converter

Veelgestelde vragen

Kan ik .ico helemaal weglaten als ik SVG gebruik?+

Niet zonder risico. Veel social-media-embedders, RSS-lezers en legacy-tools vragen standaard /favicon.ico op.

Welke browsers ondersteunen SVG-favicons?+

Chrome 80+, Edge 80+, Firefox 41+, Safari 15+ en Brave. iOS Safari geeft nog steeds de voorkeur aan de apple-touch-icon PNG.

Hoe klein kan een SVG-favicon zijn?+

Onder 1 KB voor een strak monochroom merk. Zelfs complexe meerkleurige logo's worden zelden groter dan 4 KB.

Gerelateerde tools

Meer handleidingen

Handleidingen