Réparer un favicon qui ne s'affiche pas ou ne se met pas à jour

Dans l'App Router, Next.js construit les liens vers les icônes à partir des fichiers du répertoire app. Ratez le nom du fichier et il n'émet rien. Dans le Pages Router, il n'existe aucune convention. Déterminez à quel cas vous avez affaire et la solution devient évidente.

Le fichier a changé et l'onglet non. Sur Next.js, c'est l'un de trois caches : le stockage de favicon du navigateur, un build .next obsolète, ou un CDN servant les anciens octets. Écartez-les dans cet ordre.

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.

Vous avez remplacé le fichier et l'onglet a gardé l'ancienne icône. Dans une application React, c'est le navigateur qui met le favicon en cache, ou la sortie du build et le CDN qui servent encore la copie précédente depuis public/.

Vite copie public/ vers la racine de la sortie et réécrit index.html au moment du build. Un favicon qui fonctionne en dev et renvoie un 404 en production a presque toujours le segment public/ dans son chemin, ou a été importé depuis src et hashé.

Un composant monofichier Vue ne peut pas rendre une balise link dans le head, donc le favicon est déclaré dans index.html : à la racine du projet sous Vite, à l'intérieur de public/ sous Vue CLI. Un onglet vide signifie que la balise de ce fichier est incorrecte.

Angular ne copie les fichiers statiques que si la configuration de build le lui indique. Une icône non prise en compte par l'entrée assets dans angular.json n'atteint jamais dist. Le build réussit et le fichier n'est pas là.

Astro copie public/ vers la sortie sans y toucher mais n'injecte jamais de balises d'icône pour vous. Un onglet vide signifie que le lien n'est pas dans le layout utilisé par vos pages, ou qu'une page a rendu son propre élément html et contourné le layout.

WordPress ne sert pas de favicon à partir d'un fichier que vous déposez dans le thème. Il affiche les balises d'icône à partir d'un unique réglage Icône du site, et un onglet vide signifie presque toujours que ce réglage n'a jamais été appliqué, ou qu'un thème s'y oppose.

Vous avez défini une nouvelle Icône du site et l'ancienne ne bouge pas. Sur WordPress, c'est presque toujours une couche de cache (une extension de cache de page ou un CDN servant du HTML obsolète), avec le cache de favicon propre au navigateur comme second suspect.

Sur Shopify, le favicon est un réglage de thème, pas un fichier sur un serveur. Le thème rend un unique lien d'icône à partir d'une image que vous choisissez dans l'éditeur, donc un onglet vide signifie qu'il n'est pas défini, que vous avez modifié le mauvais thème, ou que le format a été refusé.

Vous avez choisi un nouveau favicon et la boutique en ligne affiche toujours l'ancien. Sur Shopify, c'est presque toujours un thème brouillon jamais publié, ou le CDN d'images et le navigateur qui mettent l'icône précédente en cache.