Favicon React qui ne se met pas à jour ? Voici la solution
Vous avez remplacé le fichier et l'onglet a gardé l'ancienne icône. Dans une application React, c'est le navigateur qui met le favicon en cache, ou la sortie du build et le CDN qui servent encore la copie précédente depuis public/.
Vérifiez le fichier servi, puis le cache
Ouvrez /favicon.ico directement. S'il affiche encore l'ancienne image, le build n'a pas pris votre nouveau fichier : le serveur de dev ou le déploiement sert une copie obsolète depuis public/, et vider le cache du navigateur n'y aidera pas.
Si l'URL directe est correcte mais pas l'onglet, c'est le navigateur. Les favicons sont mis en cache durement et indépendamment de la page, donc un rafraîchissement normal ne suffit souvent pas.
Videz-le dans l'ordre
- 1
Versionnez le lien ou rafraîchissez de force
Changez le href en /favicon.ico?v=2 pour que le navigateur le traite comme un nouveau fichier, puis rafraîchissez de force dans une fenêtre privée.
- 2
Redémarrez le serveur de dev ou reconstruisez
Les serveurs de dev servent fréquemment un fichier public/ en cache jusqu'au redémarrage. En production, reconstruisez pour que le nouveau fichier atterrisse dans la sortie.
- 3
Purgez le CDN
Si un CDN se trouve devant le site, invalidez le chemin du favicon pour que les nœuds du edge cessent de distribuer les anciens octets.
Favicon React qui ne se met pas à jour : FAQ
Pourquoi mon favicon React ne se met-il pas à jour ?
Soit le build sert encore l'ancien fichier (vérifiez /favicon.ico directement), soit le navigateur l'a mis en cache. Redémarrez le serveur de dev ou reconstruisez pour le premier cas ; versionnez l'URL et rafraîchissez de force pour le second.
Comment forcer le favicon à se rafraîchir ?
Ajoutez une chaîne de version au href de l'icône, par exemple /favicon.ico?v=2, puis rafraîchissez de force ou ouvrez une fenêtre privée. Changer l'URL est ce qui pousse le navigateur à récupérer un fichier neuf.
Il a changé en dev mais pas après le déploiement.
Le déploiement sert une copie en cache depuis le build ou le CDN. Confirmez que le nouveau fichier est dans la sortie du build, puis purgez le chemin sur le CDN et rouvrez l'URL directe.