Retour aux tutoriels

Pourquoi mon favicon n’apparaît-il pas ?

Guide de dépannage quand le favicon n’apparaît pas ou s’affiche mal. Causes fréquentes et solutions, tous navigateurs et plateformes confondus.

Raisons fréquentes

Si le favicon n’apparaît pas, plusieurs causes sont possibles. Comprendre pourquoi il ne s’affiche pas aide à corriger le problème plus vite. Les raisons les plus courantes :

  • Chemin de fichier incorrect : La cause la plus fréquente est un chemin incorrect dans la balise link HTML
  • Cache du navigateur : Les navigateurs mettent fortement en cache les favicons : même après correction, l’icône peut ne pas se mettre à jour tout de suite
  • Balises link HTML manquantes : Sans balises link correctes dans le head, le favicon ne s’affiche pas
  • Mauvais format ou mauvaise taille : Un format non pris en charge ou des dimensions incorrectes peuvent empêcher l’affichage
  • Configuration serveur : Des types MIME ou des réglages serveur incorrects peuvent bloquer les requêtes
  • Mélange HTTPS/HTTP : Le contenu mixte peut empêcher le chargement du favicon

Comment corriger l’affichage

1. Vérifier les balises link HTML

La première étape consiste à vérifier que le head contient les bonnes balises link. Sans elles, ou si elles sont incorrectes, le favicon ne s’affiche pas.

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

Les chemins href doivent correspondre à l’emplacement réel des fichiers. Si rien n’apparaît, revérifiez les chemins par rapport à la racine du site.

2. Vider le cache du navigateur

Les navigateurs mettent fortement en cache les favicons, d’où un affichage parfois inchangé après correction du code. Pour contourner le cache :

  • Rechargement forcé (Ctrl+Shift+R sous Windows/Linux, Cmd+Shift+R sous Mac)
  • Vider le cache et les cookies du site
  • Ouvrir le site en navigation privée
  • Attendre 24 à 48 heures que le cache expire

Si le favicon n’apparaît toujours pas après ces étapes, le cache n’est probablement pas en cause.

3. Vérifier les chemins et l’emplacement

Vérifiez que les fichiers existent au bon endroit. S’ils manquent ou sont dans le mauvais dossier, rien ne s’affiche.

Emplacements courants :

  • Racine du site : /favicon.ico or /favicon.png
  • Dossier public : /public/favicon.ico (générateurs de sites statiques)
  • Dossier assets : /assets/favicon.ico

Les chemins dans le HTML doivent correspondre à l’emplacement réel sur le serveur.

4. Vérifier le format et la taille

Un format non pris en charge ou une taille incorrecte peut aussi empêcher l’affichage :

  • Format ICO : Format traditionnel, tous navigateurs (16×16 ou 32×32 pixels)
  • Format PNG : Les navigateurs modernes prennent en charge les favicons PNG (16×16, 32×32, 48×48, 96×96, 192×192, 512×512)
  • Format SVG : Pris en charge par les navigateurs modernes, scalable et indépendant de la résolution

Assurez-vous que les fichiers sont correctement formatés et dimensionnés. En cas de doute, commencez par un ICO ou un PNG standard.

5. Vérifier la configuration serveur

Une mauvaise configuration serveur peut aussi bloquer l’affichage :

  • Vérifier que les types MIME sont corrects pour .ico, .png et .svg
  • Vérifier que le serveur autorise les requêtes vers ces fichiers
  • Vérifier qu’aucune règle de redirection ne bloque les requêtes
  • Vérifier la cohérence HTTPS/HTTP (pas d’avertissement de contenu mixte)

Si le problème vient du serveur, contactez l’hébergeur ou inspectez les fichiers de configuration.

6. Tester plusieurs navigateurs

Parfois l’icône manque dans un navigateur et s’affiche ailleurs. Pour isoler le problème :

  • Tester dans Chrome, Firefox, Safari et Edge
  • Vérifier les navigateurs mobiles (Safari iOS, Chrome Mobile)
  • Vérifier l’affichage dans les favoris et l’historique
  • Tester en vue bureau et mobile

Si le problème est limité à certains navigateurs, vérifiez leurs exigences ou les bugs connus.

Liste de contrôle rapide

Utilisez cette liste pour identifier pourquoi le favicon n’apparaît pas :

  • Les balises link HTML sont présentes dans le head
  • Les chemins dans le HTML correspondent aux fichiers réels
  • Les fichiers existent et sont accessibles
  • Le format est pris en charge (ICO, PNG ou SVG)
  • Le cache a été vidé, ou le test a été fait en navigation privée
  • Aucune erreur de console liée au chargement du favicon
  • Les types MIME du serveur sont correctement configurés

Corriger avec un générateur

Si vous n’êtes pas sûr des formats et des tailles, un générateur peut éviter beaucoup d’erreurs d’affichage. Des outils comme logo87.com produisent automatiquement les tailles et formats nécessaires, pour un affichage correct dans tous les navigateurs et sur tous les appareils.

Un bon générateur fournit :

  • Toutes les tailles courantes (16×16, 32×32, 48×48, 96×96, 192×192, 512×512)
  • Plusieurs formats (ICO, PNG, SVG)
  • L’Apple touch icon pour iOS
  • Les balises link HTML prêtes à copier

Cela évite les causes fréquentes : mauvais format, mauvaise taille, ou fichier manquant.

Conclusion

Quand le favicon n’apparaît pas, le problème vient en général d’un chemin incorrect, du cache, de balises HTML manquantes, ou d’un format inadapté. Les étapes ci-dessus permettent d’identifier et de corriger le souci rapidement.

Les navigateurs mettent fortement en cache les favicons : même après correction, l’affichage peut rester inchangé un moment. Videz le cache ou testez en navigation privée. Si rien n’y fait, vérifiez la configuration serveur ou contactez l’hébergeur.

Un générateur fournit les bons fichiers et formats, ce qui réduit fortement le risque de non-affichage. C’est souvent le moyen le plus simple d’obtenir un favicon qui fonctionne partout.