Favicon Vue qui ne s'affiche pas ? Voici la solution
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.
Pourquoi ce n'est pas un composant
Le navigateur demande le favicon pendant qu'il analyse le head, avant que Vue ne monte quoi que ce soit. Tout ce que vous ajoutez depuis l'intérieur de l'application arrive trop tard, et c'est pourquoi l'icône appartient au HTML statique.
L'emplacement de ce HTML dépend de l'échafaudage. create-vue (Vite) garde index.html à la racine du projet et copie public/ vers la sortie sans y toucher. Vue CLI garde le template dans public/index.html et le passe par EJS, donc les URL ont besoin d'un placeholder.
Trouver la panne
- 1
Ouvrez /favicon.ico directement
Un 404 signifie que le fichier n'est pas servi à ce chemin. S'il se charge, le fichier est correct et c'est la balise link ou un cache qui pose problème.
- 2
Confirmez sur quel échafaudage vous êtes
Un index.html à la racine signifie Vite : utilisez /favicon.ico. Un template public/index.html signifie Vue CLI : utilisez le préfixe <%= BASE_URL %>.
- 3
N'importez pas l'icône depuis src
Une image importée est bundlée et hashée, donc /favicon.ico cesse de se résoudre. Gardez les icônes dans public/ avec leur nom intact.
Favicon Vue qui ne s'affiche pas : FAQ
Pourquoi mon favicon Vue ne s'affiche-t-il pas ?
La balise link dans index.html pointe là où le fichier n'est pas, ou (sous Vue CLI) le placeholder BASE_URL est manquant, si bien que le chemin casse hors de la racine du domaine. Ouvrez /favicon.ico directement pour voir si le fichier est servi du tout.
Puis-je définir le favicon depuis un composant Vue ?
Vous pouvez le remplacer à l'exécution avec useHead, et le navigateur suit le changement après le chargement. Mais la première requête utilise ce que index.html a déclaré, donc gardez-y une vraie valeur par défaut.
Pourquoi le favicon a-t-il disparu après que je l'ai importé ?
Importer une image depuis src la confie au bundler, qui émet un nom de fichier hashé. Plus rien n'est alors accessible à /favicon.ico. Placez le fichier dans public/ à la place.