Hoe favicon-formaten werken

Begrijpen hoe elk formaat werkt helpt je het onvermijdelijke probleem "mijn favicon wordt niet getoond" op te lossen.

6 min leestijd

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.

Probeer de tools

Verder lezen

Ontdek FetchFavicon

Categorieën

Omzetters

Hulpprogramma's

Gidsen

Handleidingen