Favicon qui ne se met pas à jour : vider le cache

Un favicon qui ne se met pas à jour est le plus souvent resté bloqué dans le navigateur : les navigateurs conservent les favicons dans un cache à part, qu'un rechargement normal ne touche pas. Le plus rapide est de donner à l'icône une nouvelle URL, soit un nouveau nom de fichier, soit un paramètre de version comme /favicon.svg?v=2, et de mettre à jour les balises <link>. Avant cela, assurez-vous que votre serveur et votre CDN envoient bien le nouveau fichier.

D'abord : le serveur envoie-t-il la nouvelle icône ?

Ouvrez directement l'URL de l'icône, par exemple https://example.com/favicon.ico, dans une fenêtre privée. Si vous y voyez l'ancienne icône, le problème est côté serveur : un CDN ou un proxy garde encore l'ancien fichier, le déploiement ne l'a pas remplacé, ou le HTML pointe ailleurs. Favicon Checker récupère à neuf chaque icône déclarée et montre les en-têtes de cache envoyés par votre serveur.

Changer l'URL

Une nouvelle URL contourne en une seule fois le cache du navigateur, le CDN et Google :

<link rel="icon" href="/favicon.ico?v=2" sizes="32x32">
<link rel="icon" href="/favicon.svg?v=2" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png?v=2">

Faites de même pour les icônes du manifeste. /favicon.ico lui-même ne peut pas être renommé, puisque les navigateurs demandent précisément ce chemin ; une purge du CDN règle le problème.

Vider le cache dans le navigateur

Chrome et Edge : ouvrez l'URL de l'icône dans un onglet, appuyez sur Ctrl+Maj+R (Cmd+Maj+R sur Mac), puis rechargez votre page. Les icônes sont stockées avec l'historique : si l'ancienne persiste, supprimez les entrées d'historique du site ou redémarrez le navigateur.
Firefox : le rechargement de l'URL directe fonctionne aussi. Firefox conserve aussi les icônes avec l'historique : ouvrez la Bibliothèque, faites un clic droit sur le site et choisissez Oublier ce site.
Safari : quittez complètement Safari et rouvrez-le. Sur Mac, Développement → Vider les caches aide aussi (activez le menu Développement dans Réglages → Avancées).

Régler des en-têtes de cache adaptés

Les icônes changent rarement : un long délai de cache convient, à condition de changer l'URL quand l'icône change. Les fichiers dont le nom ou le paramètre contient une version peuvent être mis en cache pendant un an :

Cache-Control: public, max-age=31536000, immutable

Pour les icônes à chemin fixe, comme /favicon.ico, un délai d'un jour à une semaine évite aux visiteurs d'attendre des mois après un changement d'identité visuelle :

Cache-Control: public, max-age=604800

Écrans d'accueil et applications installées

iOS copie l'Apple touch icon quand quelqu'un ajoute votre site à l'écran d'accueil et ne l'actualise jamais. Le visiteur doit supprimer le raccourci et le rajouter. Les applications web installées sont différentes : Chrome vérifie de temps en temps le manifeste d'une application installée et prend en compte une icône modifiée. Sur Android, il peut demander à l'utilisateur avant de changer.

Google Search

Google actualise le favicon quand il réexplore votre page d'accueil, ce qui peut prendre des jours ou des semaines. Demandez l'indexation de la page d'accueil dans la Search Console pour accélérer un peu. Si l'icône ne change toujours pas, comparez-la aux exigences de Google sur les favicons.