Favicon React qui ne s'affiche pas ? Voici la solution
React s'affiche dans un nœud du DOM et ne touche jamais au head, donc le favicon vit dans un fichier HTML statique. Un onglet vide signifie que la balise link de ce fichier est incorrecte, ou que l'icône a été importée depuis src et ne se trouve plus à un chemin fixe.
Le head est un fichier statique, pas un composant
Le navigateur demande le favicon pendant qu'il analyse le head, bien avant que React ne soit monté. Le lien d'icône doit donc figurer dans le squelette HTML : index.html à la racine du projet sous Vite, ou public/index.html sous Create React App.
Deux choses le cassent. Sous Create React App, un href qui omet le placeholder %PUBLIC_URL% fonctionne en local puis renvoie un 404 hors de la racine du domaine. Dans n'importe quel projet React, importer l'icône depuis src la confie au bundler, qui la renomme avec un hash de contenu, si bien que plus rien ne répond à /favicon.ico.
Remontez à la source
- 1
Ouvrez /favicon.ico directement
Un 404 signifie que le fichier n'est pas servi à ce chemin : un problème de build ou de chemin. S'il se charge, le fichier est correct et c'est la balise link ou le cache qui pose problème.
- 2
Lisez l'index.html généré
Regardez dans la sortie du build, pas dans votre source. Confirmez que le href de l'icône se résout vers un vrai chemin et, pour CRA, que %PUBLIC_URL% a bien été substitué plutôt que laissé littéral.
- 3
Cessez d'importer l'icône depuis src
Les fichiers dans public/ conservent leur nom et répondent à des chemins fixes ; les imports depuis src/ sont hashés. Un favicon doit se trouver dans public/.
Favicon React qui ne s'affiche pas : FAQ
Pourquoi mon favicon React ne s'affiche-t-il pas ?
Presque toujours parce que la balise link dans index.html pointe vers un endroit où le fichier n'est pas, ou parce que l'icône a été importée depuis src et a reçu un nom de fichier hashé. Ouvrez /favicon.ico directement pour voir si le fichier est seulement servi à ce chemin.
Pourquoi mon favicon renvoie-t-il un 404 après un déploiement sous un sous-chemin ?
Le href s'est résolu par rapport à la racine du domaine au lieu de votre sous-répertoire. Sous Vite, définissez base dans vite.config.js ; sous Create React App, renseignez le champ homepage et utilisez %PUBLIC_URL% dans le template, puis vérifiez l'index.html généré.
Dois-je importer le favicon dans mon code React ?
Non. Les fichiers dans public/ sont copiés tels quels dans la sortie du build et ne font pas partie du graphe de modules. En importer un produit une seconde copie hashée et casse le chemin fixe /favicon.ico.