Wat is een favicon?
Een favicon (favorite icon) is het kleine pictogram dat verschijnt in browsertabbladen, bladwijzers, geschiedenisvermeldingen en bureaubladsnelkoppelingen. Het is een van de eerste visuele elementen die bezoekers van je website opmerken. Een ontbrekende favicon geeft een onprofessionele of onafgewerkte indruk.
Favicons zijn geëvolueerd van eenvoudige pictogrammen van 16x16 pixels naar een complexe set van formaten die nodig zijn voor verschillende apparaten en contexten. Moderne websites hebben meerdere favicon-formaten nodig om alle gebruikssituaties te dekken.
Het ICO-formaat voor favicons
ICO is het oorspronkelijke favicon-formaat en blijft het meest universeel ondersteunde formaat. Eén favicon.ico-bestand bevat meerdere afbeeldingen in verschillende formaten (16x16, 32x32, 48x48 enz.), waardoor browsers en besturingssystemen automatisch de meest geschikte grootte kunnen selecteren.
Wanneer een browser /favicon.ico opvraagt, ontvangt hij één bestand met alle benodigde formaten. Er is geen extra HTML-markup nodig — browsers zoeken automatisch naar favicon.ico in de hoofdmap.
Moderne favicon-vereisten (2026)
| Bestand | Formaat | Doel |
|---|---|---|
| favicon.ico | 16x16 + 32x32 | Oudere browsers, Windows-snelkoppelingen |
| apple-touch-icon.png | 180x180 | Bladwijzer op iOS-startscherm |
| icon-192.png | 192x192 | Android Chrome, PWA-manifest |
| icon-512.png | 512x512 | PWA-splashscreen, installatiedialoog |
| favicon.svg | Schaalbaar | Moderne browsers, oneindige schaling, donkere modus |
Hoe maak je een favicon van een PNG
- Begin met een vierkante afbeelding — minstens 512x512 pixels. Gebruik je logo of een vereenvoudigde versie ervan.
- Gebruik PNG met transparantie — een transparante achtergrond zorgt ervoor dat je favicon er schoon uitziet in elk browserthema (licht of donker).
- Upload naar onze converter — selecteer ICO als uitvoerformaat. De converter genereert automatisch een ICO met meerdere resoluties.
- Test bij kleine formaten — bekijk je favicon op 16x16. Complexe ontwerpen moeten mogelijk worden vereenvoudigd voor zeer kleine weergaveformaten.
Transparantie in favicons
PNG-bron = transparant favicon. Als je bronafbeelding een transparante achtergrond heeft, blijft die behouden in de ICO. Dit is belangrijk voor favicons die er goed moeten uitzien op zowel lichte als donkere browserthema's.
JPG-bron = effen achtergrond. JPG ondersteunt geen transparantie, dus een favicon op basis van een JPG heeft altijd een effen achtergrondkleur. Gebruik waar mogelijk PNG.
Aanbevolen werkwijzen
- Houd het simpel: favicons worden weergegeven op 16x16 pixels. Complexe logo's worden onleesbaar. Gebruik een vereenvoudigd beeldmerk of één letter.
- Test op werkelijk formaat: bekijk je favicon in een browsertabblad voordat je publiceert. Wat er geweldig uitziet op 512x512 kan onherkenbaar zijn op 16x16.
- Zorg voor contrast: test op zowel lichte als donkere browserthema's. Je favicon moet zichtbaar zijn tegen elke achtergrond.
- Gebruik een vectorbron: als je een SVG-versie van je logo hebt, levert dat scherpere resultaten op alle formaten.
HTML-implementatie
Voeg deze regels toe aan de <head> van je HTML voor volledige favicon-ondersteuning:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Snel starten: plaats minimaal een favicon.ico (met formaten 16x16 en 32x32) in de hoofdmap van je website. Browsers vinden het automatisch zonder enige HTML-markup.