Favicon Astro qui ne s'affiche pas ? Voici la solution
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.
public/ conserve les noms, mais rien ne fait le lien pour vous
Les fichiers dans public/ sont copiés à la racine de la sortie à l'identique, donc /favicon.svg ou /favicon.ico est une vraie URL. Mais Astro ne scanne pas public/ pour injecter des balises. Tout ce que vous voulez dans le head doit être écrit dans un composant layout dans lequel vos pages s'enveloppent.
Le piège, ce sont les pages qui contournent le layout. Un 404 personnalisé ou une landing page ponctuelle qui écrit son propre élément html n'a aucune balise d'icône à moins que vous ne les y ajoutiez aussi.
Trouver la faille
- 1
Ouvrez /favicon.ico (ou /favicon.svg) directement
Un 404 signifie que le fichier n'est pas dans public/. S'il se charge, le fichier est correct et c'est la balise link manquante qui pose problème.
- 2
Vérifiez que le layout rend le lien
Affichez le code source d'une page normale. Aucune balise rel=icon signifie que votre Layout.astro ne l'inclut pas. Ajoutez les balises link au head du layout.
- 3
Vérifiez les pages qui contournent le layout
Les 404 personnalisés et les pages autonomes qui écrivent leur propre html n'héritent pas du head du layout. Ajoutez-y aussi les balises d'icône, ou enveloppez-les dans le layout.
Favicon Astro qui ne s'affiche pas : FAQ
Pourquoi mon favicon Astro ne s'affiche-t-il pas ?
Astro n'injecte aucune balise d'icône, donc soit votre layout ne rend pas le lien, soit la page en question contourne le layout. Confirmez que le fichier se charge à son URL, puis vérifiez que le head du layout contient réellement les balises rel=icon.
Dois-je ajouter les balises à chaque page ?
Seulement au layout dans lequel vos pages s'enveloppent. Le piège, ce sont les pages qui ne le font pas : un 404 personnalisé ou une landing page écrivant son propre élément html nécessite d'ajouter les balises directement.
Mon site est sous un sous-chemin et les icônes renvoient un 404.
Définissez base dans astro.config.mjs, mais Astro ne réécrit pas les chemins codés en dur dans votre propre balisage. Préfixez les href avec import.meta.env.BASE_URL et vérifiez le HTML généré avant de déployer.