Favicon Vite qui ne s'affiche pas ou 404 ? Voici la solution
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é.
Deux pipelines d'assets, un seul vous convient
Tout ce qui est importé depuis src fait partie du graphe de modules : Vite l'inline ou l'émet avec un hash de contenu et réécrit la référence. C'est le bon comportement pour les images d'interface et le mauvais pour un favicon, qui doit répondre à une URL fixe.
public/ est l'échappatoire. Les fichiers qui s'y trouvent ne sont jamais résolus, hashés ni inlinés. Ils sont copiés à la racine de la sortie avec leur nom intact. Ainsi public/favicon.ico est servi à /favicon.ico, et le href doit être exactement cela.
Les balises link correctes
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />Chemins racine-absolus, sans segment public/. Elles vivent dans index.html à la racine du projet, pas à l'intérieur de public/.
Favicon Vite qui ne s'affiche pas : FAQ
Pourquoi mon favicon Vite ne renvoie-t-il un 404 que dans le build de production ?
Parce que le chemin est passé par public/ ou par un import, deux choses qui changent entre le dev et le build. Ouvrez l'index.html généré et le répertoire de sortie et confirmez que le href et le fichier concordent.
Dois-je importer le favicon quelque part ?
Non. Les fichiers dans public/ sont délibérément hors du graphe de modules. En importer un et Vite émet une seconde copie hashée, laissant deux fichiers là où vous en vouliez un et rien à /favicon.ico.
Le favicon renvoie un 404 quand je déploie sous un sous-chemin.
Définissez base dans vite.config.ts. Vite réécrit les URL des assets dans index.html au moment du build, donc ouvrez le fichier généré ensuite et confirmez que les href des icônes portent le préfixe avant de déployer.