Favicon voor Next.js
Next.js 14+ App Router introduceerde op bestanden gebaseerde pictogramconventies: plaats favicon.ico of icon.png in de map /app en Next.js zendt automatisch de juiste `<link>`-tags uit - geen handmatige Head-component nodig. Voor Pages Router-projecten plaatst u favicon.ico in /public en koppelt u deze vanuit _document.tsx. De favicon generator produceert de volledige bestandenset op basis van één bronafbeelding, en de best favicon size guide bestrijkt welke groottes van belang zijn voor elke context.
Next.js 13+ met App Router behandelt speciale bestandsnamen in de map /app als metadataconventies. Bestanden met de naam favicon.ico, icon.png, icon.svg en apple-icon.png worden automatisch herkend door het Next.js-metagegevenssysteem en voorzien van de juiste responsheaders en `<link>`-tags, zonder enige configuratie in layout.tsx of metagegevensexports.
Om de bestandsconventie te gebruiken, plaatst u uw favicon.ico in de map /app (niet in /public). Next.js levert het op de /favicon.ico-route en injecteert de linktag in elke pagina die die lay-out deelt. Het pictogrambestand moet zich op hetzelfde niveau bevinden als uw hoofdmap layout.tsx om het globaal te kunnen toepassen.
Voor pictogrammen met hoge DPI die de App Router gebruiken, plaatst u een icon.png in /app. Next.js leest de afmetingen ervan en genereert de juiste `<link rel='icon' sizes='...' href='...'>`-tag. Als u meerdere formaten wilt weergeven, exporteert u meerdere pictogrambestanden met verschillende numerieke achtervoegsels: icon.png (32×32), icon@2x.png (64×64), of gebruikt u icon.svg voor één oneindig schaalbaar bestand.
App Router ondersteunt ook een speciaal apple-icon.png-bestand voor het iOS-startschermpictogram. Plaats apple-icon.png (180×180) in /app en Next.js zendt automatisch `<link rel='apple-touch-icon' href='...'>` uit. Dit is de schoonste aanpak: er is geen handmatige metadata-export vereist.
Als u favicons liever in code declareert dan via bestandsconventies, exporteert u een metadata-object vanuit layout.tsx. De eigenschap pictogrammen accepteert een object met snelkoppelingen, pictogrammen, appels en andere velden. Voorbeeld: `const metadata exporteren: Metadata = { iconen: { icon: '/favicon.ico', apple: '/apple-touch-icon.png' } }`. Deze methode is handig als u dynamische pictogrampaden nodig heeft op basis van landinstelling of omgeving.
Voor Pages Router-projecten (Next.js 12 en lager, of projecten die niet naar App Router zijn gemigreerd) werkt de favicon-afhandeling anders. Plaats favicon.ico in de map /public — Next.js bedient /public op de hoofd-URL. Voeg de linktag toe in page/_document.tsx in de `<Head>`-component: `<link rel='icon' href='/favicon.ico' />`. Deze `<Head>` is de kop op documentniveau, niet de import van de volgende/kop per pagina.
De component next/head (Hoofd importeren uit 'next/head') werkt voor pictogramoverschrijvingen per pagina in de Pages Router. Als je een andere favicon op een specifieke pagina wilt, neem dan een `<link rel='icon'>` op in `<Head>` in die paginacomponent. De tag per pagina overschrijft de tag op documentniveau. Dit is handig voor sites met meerdere merken die worden bediend vanuit één Next.js-implementatie.
SVG favicons worden volledig ondersteund door Next.js App Router-conventies. Noem het bestand icon.svg en plaats het in /app. Next.js zendt `<link rel='icon' type='image/svg+xml' href='/_next/static/media/icon.svg...'>` uit. Omdat Next.js statische bestandsnamen hasht voor cache-busting, hoeft u zich geen zorgen te maken over het ongeldig maken van de favicon-cache; als u het bestand wijzigt, verandert de hash en worden browsers gedwongen opnieuw te laden.
Het webmanifest in Next.js App Router wordt geconfigureerd via het bestand manifest.ts in /app. Exporteer een standaardfunctie die een MetadataRoute.Manifest-object retourneert dat uw pictogramgrootten bevat. Next.js geeft het weer als application/manifest+json op /manifest.webmanifest. De 192×192 en 512×512 PNG’s waarnaar in het manifest wordt verwezen, moeten in /public worden geplaatst.
Turbopack (de experimentele bundelaar in Next.js 14+) verwerkt statische assets in /public op dezelfde manier als webpack. Favicon-bestanden in /public worden aangeboden zonder bundeling. Voor bestanden in /app (de pictogramconventie) verwerkt Turbopack ze als metadata-items - er is geen configuratiewijziging nodig bij het schakelen tussen Turbopack en webpack.
Next.js ISR (Incremental Static Regeneration) en edge-implementaties hebben geen invloed op de favicon-bediening. Favicon-bestanden zijn statische assets die worden aangeboden vanaf de CDN-rand, niet vanuit de ISR-cache. Dit betekent dat favicon-updates onmiddellijk na de implementatie worden doorgevoerd zonder te wachten op hervalidatie van de pagina.
Next.js-apps met meerdere locaties hebben vaak locatiebewuste pictogrammen nodig. Gebruik de functie genererenMetadata in layout.tsx om landspecifieke pictogrampaden te retourneren op basis van het params-object. Dit is alleen een functie voor App Router: Pages Router-sites hebben aangepaste _document.tsx-logica of een aangepaste server nodig om favicons per land te kunnen realiseren.
Verifieer na de implementatie uw Next.js-favicons met behulp van de favicon tester. Controleer of /favicon.ico, /icon.svg en /apple-touch-icon.png allemaal 200 reacties retourneren met de juiste headers van het inhoudstype. Inspecteer ook de `<head>` HTML van uw geïmplementeerde site om te bevestigen dat Next.js alle verwachte linktags heeft verzonden.
Hoe het werkt
- 1
Genereer uw faviconpakket
Upload een 512×512 PNG of SVG naar de [favicon generator](tool:favicon-generator). Download favicon.ico, icon.svg, apple-touch-icon.png (180×180) en het manifest PNGs.
- 2
Plaats favicon.ico in /app (App Router)
Kopieer favicon.ico naar de map /app van uw project naast layout.tsx. Next.js serveert het automatisch en injecteert de linktag. Voor Pages Router plaatst u deze in plaats daarvan in /public.
- 3
Voeg icon.svg toe voor scherpe weergave
Hernoem uw SVG naar icon.svg en plaats deze in /app (App Router). Next.js zendt automatisch een SVG-linktag uit. Voor Pages Router plaatst u deze in /public en voegt u de linktag toe aan _document.tsx.
- 4
Voeg apple-icon.png toe voor iOS-installaties
Hernoem je 180×180 PNG naar apple-icon.png en plaats deze in /app (App Router). Voor Pages Router plaatst u apple-touch-icon.png in /public en voegt u de linktag toe in _document.tsx.
- 5
Configureer het webmanifest
Voor App Router maakt u /app/manifest.ts aan en exporteert u de metagegevens van het manifest, inclusief de pictogrammen 192×192 en 512×512. Plaats de PNG’s in /public. Voor Pages Router plaatst u site.webmanifest in /public en voegt u de manifestlinktag toe in _document.tsx.
- 6
Verifieer op productie
Bekijk na de implementatie de bron op uw live URL en controleer of alle linktags aanwezig zijn. Gebruik de [favicon tester](utility:favicon-tester) om te controleren of elke pictogram-URL 200 retourneert met het juiste inhoudstype.
Probeer het nu
Genereer een favicon die klaar is voor Next.js
Favicon-generatorVeelgestelde vragen
Waar gaan favicons naar Next.js App Router?+
In de map /app. Bestanden met de naam favicon.ico, icon.png, icon.svg en apple-icon.png worden automatisch herkend en gekoppeld. Een wereldwijd favicon komt in /app; een layout-specifieke gaat in de overeenkomstige layout-submap.
Waar gaan favicons naar de Next.js Pages Router?+
In de map /public. Voeg de linktag toe in pagina's/_document.tsx in de component `<Head>`. Next.js levert /public-bestanden op de hoofd-URL — /public/favicon.ico is toegankelijk via https://uwdomein.com/favicon.ico.
Moet ik layout.tsx bewerken om een favicon toe te voegen in App Router?+
Nee, als u de bestandsconventie gebruikt (favicon.ico in /app). Als u de voorkeur geeft aan code, exporteert u een metadataobject met een iconeneigenschap. Beide benaderingen produceren identieke `<link>`-tags in de weergegeven HTML.
Ondersteunt Next.js SVG favicons?+
Ja. Plaats icon.svg in /app voor App Router, of voeg `<link rel='icon' type='image/svg+xml' href='/favicon.svg'>` toe in _document.tsx voor Pages Router. App Router zendt automatisch de linktag SVG uit de bestandsconventie uit.
Hoe voeg ik apple-touch-icon toe aan Next.js?+
Voor App Router: plaats apple-icon.png (180×180) in /app. Next.js verzendt automatisch de linktag apple-touch-icon. Voor Pages Router: plaats apple-touch-icon.png in /public en voeg de linktag toe in _document.tsx.
Vergrendelt Next.js favicons automatisch in de cache?+
Voor bestanden in /app ja: Next.js voegt een inhoudshash toe aan de weergegeven bestandsnaam, zodat elke bestandswijziging een nieuwe ophaalactie activeert. Voor bestanden in /public geen automatische cache-busting; voeg indien nodig handmatig een queryreeks toe.
Kan ik in Next.js per pagina een andere favicon gebruiken?+
Ja. Exporteer in App Router een functie genererenMetadata in page.tsx van de specifieke route met een aangepaste pictogrammenwaarde. Voeg in Pages Router een `<link rel='icon'>` toe binnen de `<Head>`-component per pagina; deze overschrijft de standaard op documentniveau.