Hoe maak je een favicon
Een modern favicon is meer dan een plaatje van 16×16. Hier vind je de volledige workflow voor een setup die er in elke browser, elk besturingssysteem en op elk apparaat scherp uitziet.
Wat is een favicon?
Een favicon is het kleine icoon dat een browser toont in het tabblad, de bladwijzerbalk en de geschiedenislijst. Op mobiel is het het homescreen-icoon. Op Windows het snelkoppelingsicoon.
Moderne sites leveren meerdere resoluties en formaten zodat elk oppervlak scherp wordt weergegeven.
Bereid je bronafbeelding voor
Begin met een vierkante afbeelding van minimaal 512×512 — het liefst een SVG met een vierkante viewBox. Kleinere bronnen worden wazig bij verkleining.
Vermijd dunne lijnen en kleine tekst. Die verdwijnen op 16×16.
Genereer een multi-size .ico
Bundel 16, 32, 48, 64, 128 en 256 px in één favicon.ico. Browsers kiezen automatisch de juiste maat.
Onze favicon-generator doet dit client-side in minder dan een seconde.
Voeg de HTML-tags toe
Plaats favicon.ico in de root van je site. Voeg vervolgens de SVG, apple-touch-icon en manifest-iconen toe in <head> voor een complete setup.
Controleer in elke browser
Doe een hard refresh (Ctrl+F5) in Chrome, Safari, Firefox en Edge. Check de bladwijzerbalk, het tabblad en een homescreen-installatie.