Le favicon ne s'affiche pas ou ne se met pas à jour ? 9 causes et solutions
Les neuf causes qui cassent les favicons, et la solution exacte pour chacune. Neuf fois sur dix, c'est le cache, alors commencez par là et descendez le tableau.
<link rel="icon" href="/favicon.ico?v=2" sizes="any">Changer l'URL, c'est ce qui pousse le navigateur à récupérer un nouveau fichier. Modifier l'ICO sur place ne suffit pas.
Causes et solutions
| Cause | Pourquoi ça casse | Solution |
|---|---|---|
| 1. Cache du navigateur ou du CDN | Les navigateurs mettent les favicons en cache plus agressivement que presque tout autre asset, et un CDN en amont ajoute une seconde couche. | Forcez un rafraîchissement (Cmd+Shift+R / Ctrl+F5) et ajoutez une query string de version pour que l'URL elle-même change. |
| 2. Mauvais chemin de fichier | Un chemin relatif se résout par rapport à la page courante, pas à la racine. | Utilisez un slash initial, /favicon.ico, et confirmez que le fichier se charge bien à cette URL dans un nouvel onglet. |
| 3. Balises link manquantes ou mal formées | Aucun lien d'icône, une faute de frappe dans rel="icon", ou des balises placées hors du <head> empêchent toutes le navigateur de trouver le fichier. | Validez le markup dans votre layout partagé. |
| 4. Mauvais format ou mauvaise taille | Un favicon trop petit, un mauvais type MIME ou un .ico corrompu peuvent échouer à s'afficher en silence. | Réexportez dans une taille et un format pris en charge, et servez-le avec le bon content type. Comparez ICO et PNG et vérifiez les tailles de favicon requises. |
| 5. L'apple touch icon ne se met pas à jour | iOS ignore favicon.ico et utilise l'apple-touch-icon. S'il est manquant ou périmé, l'écran d'accueil affiche la mauvaise chose. | Corrigez le lien apple-touch-icon, puis retirez et rajoutez la page à l'écran d'accueil. |
| 6. Problèmes d'icône du manifest | Sur Android et dans les PWA installés, l'icône vient de manifest.json. Un mauvais chemin ou une mauvaise taille y casse les icônes de l'écran d'accueil et du splash. | Corrigez les chemins et les tailles d'icône dans manifest.json, puis réinstallez l'app. |
| 7. La sortie du build supprime vos balises | Certains frameworks réécrivent le head du document, si bien que les balises link écrites à la main ne survivent pas au build. | Suivez le guide de votre stack : Next.js, React, WordPress ou Shopify. |
| 8. Un thème ou un CMS injecte sa propre icône | Un thème peut définir sa propre icône de site, qui prend le pas sur celle que vous avez ajoutée dans le markup. | Définissez l'icône via le réglage d'icône de site de la plateforme elle-même, plutôt que dans le template. |
| 9. Un cache de build sert un fichier périmé | Le cache du build ou de la plateforme continue de distribuer l'ancienne icône même après votre redéploiement. | Videz le cache du build/de la plateforme, redéployez et revérifiez. |
Où chercher ensuite
Format ou taille suspects ? Comparez ICO et PNG dans le glossaire et vérifiez les tailles de favicon requises. Un souci sur iOS ? Lisez l'entrée sur l'apple-touch-icon. Un souci de manifest ? Lisez ce qu'est manifest.json.
Les causes 7 à 9 sont celles spécifiques à la plateforme : certains frameworks et CMS écrasent ou mettent en cache le favicon d'une manière que le HTML brut ne connaît pas. La sortie du build peut supprimer vos balises, un thème peut injecter sa propre icône, ou un cache de build peut servir un fichier périmé. Les guides Next.js, React, WordPress et Shopify couvrent chacun leur propre version de ce problème.
Comment vider un favicon en cache
- 1
Ajoutez une query string de version
Changez le href du lien en /favicon.ico?v=2 pour que le navigateur récupère un nouveau fichier.
- 2
Forcez un rafraîchissement de la page
Utilisez Cmd+Shift+R (macOS) ou Ctrl+F5 (Windows) pour contourner le cache.
- 3
Purgez tout cache de CDN
Si un CDN se trouve en amont de votre site, invalidez le chemin du favicon pour que les nœuds de bordure servent le nouveau fichier.
Cache vidé et c'est toujours pareil ?
| Ce que vous voyez | Ce que ça signifie en général | Prochain geste |
|---|---|---|
| 404 : favicon introuvable | Le navigateur a demandé /favicon.ico et le serveur n'avait rien à cet endroit. Fréquent juste après un build de framework qui n'a jamais copié le fichier dans la sortie. | Ouvrez /favicon.ico directement. S'il renvoie un 404, le fichier n'est pas déployé. C'est un problème de build ou de chemin, pas de cache, donc régler le cache n'aidera jamais. |
| L'ancienne icône se charge encore à l'URL directe | Ouvrir /favicon.ico montre l'ANCIENNE image, donc le fichier lui-même est périmé. Aucun rafraîchissement forcé ne le fera bouger. | Une étape de build ou un CDN distribue un ancien fichier. Purgez le cache de la plateforme/du CDN, redéployez, puis rouvrez l'URL directe avant de vérifier l'onglet. |
| Bon fichier à l'URL, mauvaise icône dans l'onglet | L'URL directe est correcte mais l'onglet reste faux. Une seconde balise link (celle d'un thème, d'un plugin, ou le défaut du framework) passe devant la vôtre. | Affichez le code source et comptez les balises rel="icon". Le navigateur prend la dernière qu'il comprend, alors retirez la perdante plutôt que d'en ajouter une troisième. |
| OK dans un navigateur, absente dans un autre | Chaque navigateur, et chaque profil Chrome, garde son propre stockage de favicon, et certains conservent une entrée périmée pendant des jours. | Confirmez dans une nouvelle fenêtre privée ou un profil propre avant de conclure que le site est en cause. |
Parcourez ce tableau de haut en bas. Chaque ligne élimine une couche, si bien que vous cessez de deviner à propos du cache et commencez à lire ce que le serveur renvoie vraiment.
Les tailles qui comptent pour les cas en échec
Confirmez la solution avec un scan
Deviner, c'est lent. Lancez un scan automatisé qui récupère votre site en ligne, liste chaque balise de favicon qu'il trouve et signale celles qui sont manquantes ou cassées, pour que vous sachiez que la solution a réellement pris.
Vous voulez aussi tester manuellement sur navigateurs et appareils ? Voyez comment tester et vérifier votre favicon.
Questions fréquentes
Pourquoi mon favicon ne s'affiche-t-il pas ?
Les causes les plus fréquentes sont un cache navigateur agressif, un chemin de fichier erroné ou relatif, et des balises <link> manquantes ou mal formées dans le <head>. Forcez un rafraîchissement, confirmez que /favicon.ico se résout directement et vérifiez vos balises.
Comment forcer la mise à jour de mon favicon ?
Ajoutez une query string de version à l'URL de l'icône, par exemple /favicon.ico?v=2. Cela pousse le navigateur à le traiter comme un nouveau fichier. Puis forcez un rafraîchissement ou videz le cache du site.
Pourquoi mon favicon s'affiche-t-il sur ordinateur mais pas sur iPhone ?
iOS utilise l'apple-touch-icon, pas favicon.ico. Si ce lien PNG 180×180 est manquant, iOS se rabat sur une capture d'écran. Ajoutez un lien apple-touch-icon et rajoutez la page à l'écran d'accueil.
Combien de temps faut-il pour qu'un favicon se mette à jour dans la recherche Google ?
Google actualise les favicons quand il recrawle votre site, ce qui peut prendre de plusieurs jours à plusieurs semaines. Assurez-vous que l'icône fait au moins 48×48, qu'elle est référencée par une balise rel=icon valide et qu'elle est accessible à Googlebot.
Pourquoi affiche-t-il favicon introuvable, ou renvoie-t-il un 404 ?
Le navigateur a demandé l'icône par son chemin et le serveur n'avait rien à cet endroit. Ouvrez /favicon.ico directement dans un nouvel onglet : s'il renvoie un 404, le fichier n'a jamais été déployé à cette URL, en général un build de framework qui ne l'a pas copié dans la sortie, ou un mauvais chemin dans la balise link. Corrigez l'endroit où le fichier atterrit, pas le cache.
Mon favicon est manquant : où le fichier doit-il vraiment se trouver ?
Pour l'icône d'onglet classique, un vrai fichier à la racine du site pour que /favicon.ico se résolve. Les frameworks changent la manière dont il y arrive : Next.js lit app/favicon.ico, Vite et la plupart des SPA copient public/ vers la racine, et WordPress ou Shopify le servent via un réglage d'icône de site plutôt qu'un fichier. Si la balise pointe vers un endroit où le build n'a jamais écrit de fichier, l'icône est « manquante » même si votre source semble correcte.
J'ai essayé de vider le cache et c'est toujours pareil. Et maintenant ?
Arrêtez de vider les caches et lisez ce que le serveur renvoie. Ouvrez /favicon.ico directement : un 404 signale un problème de build ou de chemin, une ancienne image signale un fichier de build ou de CDN périmé, et le bon fichier avec la mauvaise icône dans l'onglet signale qu'une seconde balise link l'emporte. Chaque résultat pointe vers une solution différente. Voyez le tableau d'escalade ci-dessus.