L'App Router peut produire les balises d'icône depuis des fichiers conventionnels ou depuis l'objet metadata. Les deux approches sont valides, mais les mélanger sans règle claire crée facilement des déclarations concurrentes.
Choisir les conventions de fichiers
Placez favicon.ico à la racine de app. Les fichiers icon avec une extension prise en charge peuvent vivre dans un segment de route, tandis qu'apple-icon décrit l'icône destinée aux appareils Apple.
Next.js détecte ces fichiers, calcule les attributs utiles et ajoute les éléments link correspondants dans le head. Une icône placée dans un segment s'applique aux routes de ce segment.
| Fichier | Emplacement | Usage |
|---|---|---|
| favicon.ico | app/ | Repli du site |
| icon.svg | segment app/ | Icône du navigateur |
| apple-icon.png | segment app/ | Icône Apple |
| manifest.webmanifest | segment app/ | Manifeste installable |
Utiliser metadata pour des chemins explicites
Si vos actifs vivent dans public ou sur un hôte d'images, déclarez metadata.icons dans un layout ou une page. Précisez icon, apple et, si nécessaire, shortcut avec des URL cohérentes.
Les métadonnées d'un segment enfant peuvent remplacer des champs composés hérités. Inspectez donc le head final de plusieurs routes au lieu de supposer que chaque entrée du parent a été fusionnée.
Pour une icône générée à la demande, Next.js accepte aussi icon.tsx ou icon.js. La fonction renvoie des données d'image avec une taille et un type explicites. Réservez cette approche aux compositions réellement dynamiques : un fichier statique reste plus simple à mettre en cache et à inspecter.
Relier le manifeste et ses icônes
Un fichier manifest statique ou une fonction manifest.ts peut décrire le nom de l'application, les couleurs et les icônes installables. Les URL d'icônes du manifeste doivent être publiques et pointer vers les dimensions déclarées.
Gardez le rôle du manifeste séparé du favicon d'onglet : une icône 512×512 destinée à l'installation ne remplace pas automatiquement icon.svg ou favicon.ico.
Tester en production
Lancez un build de production, ouvrez une route de chaque segment concerné et inspectez les éléments link. Vérifiez ensuite chaque URL d'actif directement et confirmez qu'elle n'est pas interceptée par un middleware.
Si vous utilisez une basePath ou un CDN, testez les URL produites dans l'environnement déployé. Le comportement local ne révèle pas toujours une base publique ou une règle de réécriture incorrecte.
Sources primaires
Questions fréquentes
Faut-il écrire les balises link à la main ?
Non. Les conventions de fichiers ou metadata.icons peuvent les générer. Choisissez une source de vérité claire.
Où placer favicon.ico ?
Avec l'App Router, la convention favicon.ico est prise en charge à la racine du dossier app.
Un manifest.ts remplace-t-il icon.svg ?
Non. Le manifeste décrit notamment les icônes installables, tandis qu'icon.svg sert directement l'icône du navigateur.