Favicon Next.js qui ne se met pas à jour ? Voici la solution
Le fichier a changé et l'onglet non. Sur Next.js, c'est l'un de trois caches : le stockage de favicon du navigateur, un build .next obsolète, ou un CDN servant les anciens octets. Écartez-les dans cet ordre.
Confirmez d'abord que le fichier a réellement changé
Avant de toucher aux caches, ouvrez /favicon.ico directement. Si l'ancienne image s'y charge, le nouveau fichier n'a jamais été servi (un problème de build ou d'emplacement) et aucun rafraîchissement forcé n'y changera rien. Réglez cela d'abord.
Si l'URL directe affiche la nouvelle icône mais que l'onglet montre toujours l'ancienne, c'est un véritable cache. Les navigateurs mettent les favicons en cache plus agressivement que presque tout autre asset et les conservent séparément de la page.
Videz les caches dans l'ordre
- 1
Rafraîchissez de force dans une fenêtre privée
Cmd+Maj+R ou Ctrl+F5, ou une nouvelle fenêtre privée. Cela vide le stockage de favicon propre au navigateur, qui est le coupable le plus fréquent.
- 2
Supprimez .next et reconstruisez
Un build obsolète peut continuer d'émettre l'ancienne icône. Supprimez le répertoire .next et reconstruisez pour que Next relise les fichiers de votre répertoire app.
- 3
Purgez le CDN ou le cache de la plateforme
Sur Vercel ou n'importe quel CDN, le edge peut servir l'ancien /favicon.ico après un redéploiement. Invalidez ce chemin, puis rouvrez l'URL directe.
Favicon Next.js qui ne se met pas à jour : FAQ
Pourquoi mon favicon Next.js ne se met-il pas à jour ?
Soit le nouveau fichier n'a jamais été servi (vérifiez /favicon.ico directement), soit un cache retient l'ancien. Les navigateurs mettent les favicons en cache agressivement, et un build .next obsolète ou un CDN peut continuer d'émettre le fichier précédent après un déploiement.
Comment forcer une mise à jour du favicon dans Next.js ?
Dans le Pages Router, ajoutez une chaîne de version au href du lien. Dans l'App Router vous ne pouvez pas, puisque la balise est générée : changez le fichier et redéployez, supprimez .next pour vider un build obsolète, et purgez le CDN.
Il se met à jour en local mais pas sur Vercel.
Le cache du edge sert l'ancien /favicon.ico. Confirmez que le déploiement contient bien le nouveau fichier, puis purgez ou redéployez pour que le edge le recharge, et vérifiez l'URL directe dans une fenêtre privée.