Favicon voor Next.js
De Next.js 14+ App Router herkent /app/icon.png en /app/favicon.ico als conventies — plaats ze en Next genereert automatisch de juiste tags.
Check favicons on any website
Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.
Zet favicon.ico in /app en Next serveert het op /favicon.ico en injecteert de link-tag voor je.
Voor multi-size of themed icons gebruik je de bestandsconventies: icon.png, icon.svg en apple-icon.png in /app. Next genereert de <link>-tags op basis van de bestandsmetadata.
Hoe het werkt
- 1
Genereer favicon.ico
Multi-size 16/32/48/64 vanuit een 512×512-bron.
- 2
Plaats in /app
/app/favicon.ico wordt automatisch geserveerd. Voeg icon.png toe voor HD.
- 3
Controleer
Open /favicon.ico in je browser — Next serveert het zonder configuratie.
Probeer het nu
Genereer een Next.js-klaar favicon
Favicon-generatorVeelgestelde vragen
Waar komen icons terecht in de Next.js App Router?+
In de /app-map. De bestandsnaam (icon, apple-icon, favicon) bepaalt de functie.
En de Pages Router?+
Plaats favicon.ico in /public en link ernaar vanuit _document.tsx.
Heb ik nog een multi-size .ico nodig?+
Aanbevolen voor legacy-browsers, vooral Edge en snelkoppelingen in IE-modus.
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.