Le favicon ne se met pas à jour ? Commencez par le cache
Un favicon qui refuse de se mettre à jour est presque toujours un problème de cache, pas un bug. Confirmez d'abord que le fichier a réellement changé, puis videz les caches en partant du fichier vers l'extérieur.
Vérifiez le fichier avant de toucher au navigateur
Les favicons sont mis en cache de façon agressive à chaque couche : le navigateur, votre CDN, et parfois un artefact de build obsolète. Avant d'accuser le navigateur, découvrez quelle couche sert l'ancienne image.
Allez droit au fichier. Ouvrez https://votresite.com/favicon.ico dans la barre d'adresse et regardez ce qui se charge. Si c'est l'ancienne icône, votre navigateur n'est pas en cause, le serveur ou le CDN sert encore l'ancien fichier. Si c'est la nouvelle icône, le fichier a bien été publié et seul le cache de votre navigateur est en retard.
Travaillez du fichier vers l'extérieur
- 1
Ouvrez directement l'URL de l'icône
Chargez /favicon.ico et chaque chemin de PNG dans la barre d'adresse. Une ancienne image à l'URL signifie un cache serveur, build ou CDN. Une nouvelle image à l'URL signifie que seul votre navigateur est obsolète, passez directement aux étapes du navigateur.
- 2
Ajoutez un paramètre de version à la balise
Une chaîne de requête fait paraître l'URL nouvelle, donc les caches récupèrent une copie fraîche. Incrémentez le numéro à chaque changement d'icône. C'est le correctif de cache navigateur le plus fiable qui soit.
- 3
Rechargement forcé dans une fenêtre privée
Une fenêtre privée ou de navigation privée ignore votre cache de favicon habituel. Combinez-la avec un rechargement forcé pour bien tester le fichier déployé, et non une copie locale.
- 4
Purgez le CDN et videz un build obsolète
Si l'ancienne image est toujours à l'URL, purgez les chemins d'icône sur votre CDN ou cache edge, puis vérifiez que votre build a bien copié les nouveaux fichiers. Un artefact de build en cache continuera de servir l'ancienne icône tant que vous ne l'aurez pas vidé et reconstruit.
Le paramètre de version
<link rel="icon" href="/favicon.ico?v=2" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=2">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=2">Incrémentez ?v= à chaque changement d'icône. Même chemin de fichier, nouvelle URL, donc les caches du navigateur et du CDN la traitent comme une ressource fraîche.
Questions fréquentes
Pourquoi mon favicon ne se met-il pas à jour après l'avoir changé ?
Un cache sert l'ancien fichier. Ouvrez /favicon.ico directement : une ancienne image indique un cache CDN ou build, une nouvelle image indique le cache de votre navigateur. Corrigez la couche réellement obsolète.
Comment forcer un navigateur à recharger le favicon ?
Ajoutez une chaîne de requête de version comme /favicon.ico?v=2 à la balise link et incrémentez-la à chaque changement, puis faites un rechargement forcé dans une fenêtre privée. C'est la manière la plus fiable de faire récupérer une copie fraîche au navigateur.
Combien de temps avant que le favicon se mette à jour tout seul ?
Cela dépend de vos durées de cache. Sans paramètre de version, cela peut prendre des heures voire plus, car les navigateurs et les CDN conservent les icônes longtemps. Un paramètre de version fait prendre effet au changement dès le prochain chargement.
Mon favicon s'est mis à jour partout sauf sur l'écran d'accueil iOS. Pourquoi ?
Les raccourcis iOS enregistrés figent l'icône au moment de leur ajout. Supprimez le raccourci et rajoutez la page pour récupérer le nouvel apple-touch-icon.