Favicon Angular qui ne s'affiche pas ? Voici la solution
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à.
Le tableau assets décide de ce qui existe
Tous les autres frameworks copient un répertoire entier par convention. Angular le fait par configuration : l'entrée assets de la cible de build ne copie que ce qu'elle prend en compte. Les échafaudages récents la pointent vers un répertoire public/ avec un glob ; les plus anciens listent des chemins individuels, en commençant par src/favicon.ico.
Rien ne vous avertit quand c'est incorrect. Ajoutez apple-touch-icon.png à côté d'un favicon.ico fonctionnel dans un projet plus ancien et il se compile proprement, puis renvoie un 404 en production : favicon.ico était listé par son nom et votre nouveau fichier ne l'était pas.
Le glob assets (échafaudages récents)
"assets": [
{ "glob": "**/*", "input": "public" }
]Tout ce qui se trouve dans public/ est copié. Dans un projet plus ancien, le tableau contient des chaînes comme "src/favicon.ico", et vous ajoutez une ligne par icône.
Favicon Angular qui ne s'affiche pas : FAQ
Pourquoi mon favicon Angular ne s'affiche-t-il pas ?
L'icône n'est pas prise en compte par l'entrée assets dans angular.json, donc elle n'a jamais atteint dist. Cherchez dans dist/ après ng build. Si le fichier n'y est pas, ajoutez-le au tableau assets (ou au glob public/) et reconstruisez.
Pourquoi renvoie-t-il un 404 sous un sous-chemin ?
Un href commençant par un slash se résout par rapport à la racine du domaine. Construisez avec --base-href réglé sur votre sous-répertoire pour que la balise base dans index.html soit correcte, et écrivez les href des icônes en relatif, sans slash de tête.
Est-ce que @angular/pwa ajoute mes icônes ?
Il échafaude un manifest et des icônes PNG d'exemple et câble le service worker. Les icônes sont des exemples. Remplacez les fichiers image sur place et conservez le manifest et les entrées assets générés.