Favicon voor React
React rendert de <head> niet voor je — de favicon leeft in index.html. Plaats je favicon.ico in /public en link ernaar; moderne setups leveren ook een SVG- en PNG-variant.
Zowel Vite als CRA serveren /public op de root, dus /favicon.ico is het standaard zoekpad. Geen bundler-configuratie nodig.
Voor hoge-DPI-schermen en PWA-installatieprompts voeg je een 180×180 apple-touch-icon en een 512×512 PNG toe aan /public, en link je ze in index.html.
Hoe het werkt
- 1
Genereer een multi-size .ico
Gebruik onze favicon-generator met een 512×512-bron.
- 2
Plaats in /public
Zet favicon.ico, favicon.svg en apple-touch-icon.png in die map.
- 3
Link in index.html
Voeg <link rel="icon" href="/favicon.ico"> en <link rel="icon" type="image/svg+xml" href="/favicon.svg"> toe.
Probeer het nu
Maak een React-klaar favicon
Favicon-generatorVeelgestelde vragen
Waar staat de favicon in een Vite React-app?+
/public/favicon.ico (en /public/favicon.svg als je een vectorvariant wilt).
Hoe voeg ik een dark-mode favicon toe?+
Gebruik één SVG met een <style>@media (prefers-color-scheme: dark) {...}</style>-blok.
Waarom laadt mijn favicon niet in dev?+
Leeg je browsercache met een hard refresh (Ctrl+F5). Browsers cachen /favicon.ico per origin, zelfs bij herladen.
Gerelateerde tools
Favicon-generator
Genereer een compleet favicon-pakket (ICO + PNGs) voor elk apparaat en elke browser.
PNG naar ICO Converter
Gratis online PNG naar ICO converter voor Windows iconen, app-icoontjes en website favicons.
SVG naar PNG Converter
Rasteriseer SVG vectorafbeeldingen naar PNG op elke gewenste resolutie.