Notes sur les favicons

Guide · 3 min de lecture

Pourquoi votre favicon ne se met pas à jour — et comment l'y forcer

Vous avez changé le favicon, déployé, rafraîchi — et l'ancien est toujours là. C'est la plainte la plus fréquente au sujet des favicons, et ce n'est presque jamais un problème de code. Les navigateurs mettent les favicons en cache bien plus agressivement que les pages ou les images, et le cache des favicons survit souvent à un rechargement normal.

Procédez dans cet ordre :

• Forcez le rechargement. Ctrl+Shift+R (Windows) ou Cmd+Shift+R (Mac) recharge en contournant le cache de la page.
• Rouvrez l'onglet. Le cache des favicons est fréquemment lié à l'onglet ouvert. Fermez-le complètement et ouvrez-en un nouveau.
• Cassez le cache avec un paramètre. Pendant vos tests, faites pointer le lien vers une « nouvelle » URL : <link rel="icon" href="/favicon.ico?v=2">. Incrémentez le numéro à chaque changement.
• Vérifiez que le fichier est bien présent. Chargez directement yourdomain.com/favicon.ico — s'il renvoie une erreur 404, le navigateur affiche une icône en cache pour un fichier qui n'existe plus.

Google Search est un cas à part. Il met votre favicon en cache indépendamment de vos pages et l'actualise selon le calendrier de Google, si bien qu'une nouvelle icône dans les résultats de recherche peut accuser un retard de plusieurs jours ou semaines même une fois votre site correct. Il n'existe aucun bouton pour accélérer les choses — assurez-vous que /favicon.ico renvoie un code 200 à Googlebot, et patientez.

Opinion · 4 min de lecture

Arrêtez de générer 20 fichiers de favicon — l'ensemble minimal de 2026

Beaucoup d'outils de favicon vous remettent encore un ZIP contenant seize PNG, un browserconfig.xml et des images de tuiles Microsoft. Presque tout cela est du poids mort. Les tuiles Windows ont été abandonnées avec l'interface Live Tiles ; l'amoncellement de tailles de PNG intermédiaires résolvait un problème de navigateur qui n'existe plus.

Voici l'ensemble qui couvre tout ce qui est utilisé aujourd'hui :

• favicon.ico — multi-taille (16/32/48), pour les navigateurs anciens et Google Search.
• icon.svg — un fichier vectoriel que les navigateurs modernes préfèrent, compatible avec le mode sombre.
• apple-touch-icon.png — 180×180 pour les écrans d'accueil iOS.
• les PNG android-chrome-192 et -512 — référencés depuis votre manifeste d'application web pour Android et les PWA.

Cinq fichiers, quatre références <link>/manifeste, et c'est terminé. Moins de fichiers signifie moins de choses à garder synchronisées, un déploiement plus léger, et pas de browserconfig.xml obsolète pointant vers des images que vous avez supprimées. Si un outil insiste sur le fait qu'il vous en faut vingt, c'est qu'il cherche à paraître exhaustif, pas à correspondre à ce que demandent réellement les navigateurs.

Technique · 3 min de lecture

Favicons SVG et mode sombre : une icône qui s'adapte

Un logo sombre est net sur une barre d'onglets claire et disparaît presque sur une barre sombre. Livrer deux fichiers et les permuter est laborieux. Avec un favicon SVG, vous pouvez laisser un seul fichier réagir au thème du navigateur, car le navigateur applique le CSS contenu dans le SVG lorsqu'il affiche l'icône.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .glyph { fill: #111; }
    @media (prefers-color-scheme: dark) { .glyph { fill: #fff; } }
  </style>
  <path class="glyph" d="…"/>
</svg>

Référencez-le avec <link rel="icon" href="/icon.svg" type="image/svg+xml"> et conservez un favicon.ico simple comme solution de repli — les navigateurs anciens et Google Search n'évaluent pas la requête média, ils ont donc besoin d'une icône statique eux aussi. Résultat : sur un système clair le glyphe est sombre, sur un système sombre il bascule en clair, depuis un seul petit fichier.