Favicon Next.js qui ne s'affiche pas ? Voici la solution
Dans l'App Router, Next.js construit les liens vers les icônes à partir des fichiers du répertoire app. Ratez le nom du fichier et il n'émet rien. Dans le Pages Router, il n'existe aucune convention. Déterminez à quel cas vous avez affaire et la solution devient évidente.
Sur quel router êtes-vous ?
L'App Router lit les fichiers nommés favicon.ico, icon et apple-icon dans le répertoire app, détermine leur taille et injecte les balises link au moment du build. Si le fichier est mal nommé ou placé dans le mauvais dossier, aucune balise n'est émise. Aucune erreur, juste un onglet vide.
Le Pages Router n'a pas cette convention. Rien n'apparaît tant que vous ne placez pas les fichiers dans public et que vous ne déclarez pas vous-même les balises link dans un head personnalisé. Un projet à moitié migré de l'un vers l'autre est la raison classique pour laquelle un favicon fonctionne sur une route et pas sur une autre.
Où le fichier doit se trouver
| Fichier | Router | Ce que fait Next.js |
|---|---|---|
| app/favicon.ico | App Router | Servi à /favicon.ico, balise injectée automatiquement |
| app/icon.png | App Router | Dimensionné et lié automatiquement au build |
| public/favicon.ico | Pages Router | N'apparaît que si vous ajoutez la balise link à la main |
Vérifiez-le en trente secondes
- 1
Ouvrez directement l'URL de l'icône
Chargez /favicon.ico (ou /icon) dans un nouvel onglet. Un 404 signifie que le fichier n'est pas là où Next l'attend : un problème de build, pas de cache.
- 2
Affichez le code source et cherchez rel="icon"
Aucun lien d'icône dans le head signifie que la convention de fichiers ne s'est jamais déclenchée. Vérifiez que le nom du fichier correspond exactement : favicon.ico, icon.png, apple-icon.png.
- 3
N'écartez le cache qu'en dernier
Ce n'est qu'une fois le fichier résolu et la balise présente que vous devez forcer le rafraîchissement dans une fenêtre privée. Neuf fois sur dix, le problème se situait en amont du cache.
Favicon Next.js qui ne s'affiche pas : FAQ
Pourquoi mon favicon Next.js ne s'affiche-t-il pas ?
Dans l'App Router, parce que le fichier est mal nommé ou absent du répertoire app, donc aucune balise link n'est générée. Dans le Pages Router, parce qu'il n'existe aucune convention automatique et que vous n'avez pas ajouté les balises dans un head personnalisé. Ouvrez /favicon.ico directement. Un 404 confirme qu'il s'agit d'un problème de fichier ou d'emplacement.
Ai-je besoin de favicon.ico si j'ai app/icon.png ?
Gardez les deux. icon.png couvre les navigateurs modernes avec une meilleure qualité ; favicon.ico est ce que les navigateurs plus anciens, les lecteurs de flux et certains robots d'aperçu de liens demandent encore par chemin.
Pourquoi le favicon apparaît-il sur une page mais pas sur une autre ?
Généralement un projet qui mêle App Router et Pages Router. La convention du répertoire app ne couvre que les routes qu'il rend ; les routes du Pages Router ont besoin de leurs propres balises link dans _document ou dans un head personnalisé.