Favicon toevoegen in HTML
Een favicon toevoegen aan een gewone HTML-pagina is een wijziging van één regel — maar de moderne, complete opzet telt zes regels en dekt iOS, Android, dark mode én PWA-installatie.
De ene tag die elke browser respecteert is <link rel="icon" href="/favicon.ico">. Zet favicon.ico in je site-root en je bent voor 80 % klaar.
De overige 20 % — apple-touch-icon, PNG-varianten, SVG met dark-mode-ondersteuning en een webmanifest — is wat een standaardicoon onderscheidt van een gepolijste merkervaring.
Hoe het werkt
- 1
Genereer je favicon-pakket
Gebruik de FetchFavicon-pakketgenerator — levert elk benodigde bestand plus kant-en-klare markup.
- 2
Plaats bestanden in de site-root
favicon.ico, apple-touch-icon.png, android-chrome-192/512.png, site.webmanifest.
- 3
Plak het snippet in <head>
Zes <link>-tags + één <meta name="theme-color">.
Probeer het nu
Genereer het HTML-snippet
Favicon-generatorVeelgestelde vragen
Waar horen de <link>-tags?+
Binnen <head>, op elke positie — volgorde maakt niet uit zolang ze vóór </head> staan.
Heb ik zowel .ico als PNG nodig?+
Ja. .ico is de universele fallback; PNG rendert het scherpst op hoge-DPI-schermen.
Hoe zit het met dark mode?+
Lever een SVG-variant mee die een prefers-color-scheme media query bevat in het <style>-blok.