De App Router kan pictogramelementen genereren vanuit bestanden met vaste naamconventies of vanuit het metadata-object. Beide werkwijzen zijn geldig, maar zonder duidelijke regel kunnen ze samen tegenstrijdige declaraties opleveren.
Kies bestandsconventies
Plaats favicon.ico in de hoofdmap van app. Ondersteunde icon-bestanden kunnen in een routesegment staan, terwijl apple-icon het pictogram voor Apple-apparaten beschrijft.
Next.js herkent deze bestanden, bepaalt de relevante attributen en voegt de bijbehorende linkelementen toe aan head. Een pictogram in een segment geldt voor de routes binnen dat segment.
| Bestand | Locatie | Doel |
|---|---|---|
| favicon.ico | app/ | Standaardalternatief voor de site |
| icon.svg | app-segment | Browserpictogram |
| apple-icon.png | app-segment | Apple-pictogram |
| manifest.webmanifest | app-segment | Manifest voor installatie |
Gebruik metadata voor expliciete paden
Staan bestanden in public of op een afbeeldingshost, declareer dan metadata.icons in een layout of pagina. Geef icon, apple en zo nodig shortcut op met consistente URL's.
Metadata uit een onderliggend segment kan samengestelde velden van het bovenliggende segment vervangen. Controleer de uiteindelijke head op meerdere routes en ga er niet van uit dat alle bovenliggende vermeldingen zijn samengevoegd.
Voor een pictogram dat op aanvraag wordt gegenereerd, ondersteunt Next.js ook icon.tsx of icon.js. De functie retourneert afbeeldingsgegevens met expliciete afmetingen en een inhoudstype. Gebruik deze aanpak voor daadwerkelijk dynamische ontwerpen: een statisch bestand is eenvoudiger te cachen, te inspecteren en bij elke publicatie consistent aan te bieden.
Verbind het manifest met de pictogrammen
Een statisch manifestbestand of een manifest.ts-functie kan de appnaam, kleuren en installeerbare pictogrammen beschrijven. De pictogram-URL's in het manifest moeten openbaar zijn en verwijzen naar bestanden met de opgegeven afmetingen.
Houd de functie van het manifest gescheiden van de tabbladfavicon: een installatiepictogram van 512×512 vervangt niet automatisch icon.svg of favicon.ico.
Test in productie
Maak een productiebuild, open één route uit elk betrokken segment en inspecteer de linkelementen. Open daarna elke bestands-URL rechtstreeks en controleer of middleware deze niet onderschept.
Gebruik je basePath of een CDN, test de gegenereerde URL's dan in de gepubliceerde omgeving. Lokaal gedrag maakt een onjuiste openbare basis of herschrijfregel niet altijd zichtbaar.
Primaire bronnen
Veelgestelde vragen
Moet je linkelementen met de hand schrijven?
Nee. Bestandsconventies of metadata.icons kunnen ze genereren. Kies één duidelijke bron voor de configuratie.
Waar moet favicon.ico staan?
Bij de App Router wordt de favicon.ico-conventie ondersteund in de hoofdmap van de app-directory.
Vervangt manifest.ts icon.svg?
Nee. Het manifest beschrijft onder meer installeerbare pictogrammen, terwijl icon.svg rechtstreeks het browserpictogram levert.