Hoe favicon-formaten werken
Begrijpen hoe elk formaat werkt helpt je het onvermijdelijke probleem "mijn favicon wordt niet getoond" op te lossen.
Check favicons on any website
Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.
De .ico-container
Een .ico-bestand bestaat uit een header gevolgd door een of meer afbeeldingsvermeldingen. Elke vermelding kan BMP of PNG zijn, met een eigen breedte, hoogte en bitdiepte.
Browsers parsen de directory, kiezen de vermelding die past bij de gevraagde maat en decoderen alleen die ene.
PNG binnen .ico
Voor maten van 64×64 en groter verkleint PNG-compressie de bestandsgrootte met factor 5–10 zonder zichtbaar kwaliteitsverlies. Moderne generators (waaronder de onze) doen dit automatisch.
SVG-favicons
Een SVG-favicon is een normaal SVG-bestand. Browsers renderen het zoals elke andere SVG, en het <style>-blok kan kleuren aanpassen op basis van prefers-color-scheme.
Hoe browsers kiezen
Als je meerdere <link rel="icon">-tags levert, kiest de browser degene die het best past bij het oppervlak (tab vs bladwijzer vs installatie). SVG krijgt voorrang wanneer ondersteund; .ico is de fallback.
Veelgestelde vragen
What is inside a .ico file?
A header plus a directory of image entries. Each entry can be BMP or PNG at a specific width and height.
How do browsers choose which favicon to display?
Browsers read all <link rel="icon"> tags and pick the best match for the surface — tab, bookmark, or install prompt. SVG is preferred when supported; .ico is the fallback.
Why use PNG inside an .ico instead of BMP?
PNG compression cuts file size 5–10× at 64×256 with no visible loss, which speeds up page loads.
Can I use only SVG for favicons?
Not safely. Always ship favicon.ico as a fallback for older browsers, Windows shortcuts, and embedders that ignore SVG.