¿El favicon de Angular no se muestra? Aquí está la solución
Angular copia los archivos estáticos solo si la configuración del build se lo indica. Un icono que no coincide con la entrada assets de angular.json nunca llega a dist. El build tiene éxito y el archivo no está.
El array assets decide qué existe
Cualquier otro framework copia un directorio entero por convención. Angular lo hace por configuración: la entrada assets del target de build copia solo lo que coincide. Los andamiajes más nuevos la apuntan a un directorio public/ con un glob; los más antiguos enumeran rutas individuales, empezando por src/favicon.ico.
Nada te avisa cuando esto está mal. Añade apple-touch-icon.png junto a un favicon.ico que funciona en un proyecto antiguo y compila sin problemas, luego da 404 en producción: favicon.ico estaba enumerado por nombre y tu archivo nuevo no.
El glob de assets (andamiajes más nuevos)
"assets": [
{ "glob": "**/*", "input": "public" }
]Todo lo que hay en public/ se copia. En un proyecto antiguo el array contiene cadenas como "src/favicon.ico", y añades una línea por icono.
El favicon de Angular no se muestra: preguntas frecuentes
¿Por qué no se muestra mi favicon de Angular?
El icono no coincide con la entrada assets de angular.json, así que nunca llegó a dist. Busca en dist/ después de ng build. Si el archivo no está, añádelo al array assets (o al glob de public/) y vuelve a compilar.
¿Por qué da 404 bajo un subdirectorio?
Un href que empieza con barra se resuelve contra la raíz del dominio. Compila con --base-href apuntando a tu subdirectorio para que la etiqueta base en index.html sea correcta, y escribe los href del icono relativos, sin barra inicial.
¿@angular/pwa añade mis iconos?
Genera un manifest e iconos PNG de marcador de posición y conecta el service worker. Los iconos son marcadores de posición. Reemplaza los archivos de imagen en su sitio y conserva el manifest y las entradas de assets generados.