Favicon не отображается в Angular? Вот решение
Angular копирует статические файлы, только если конфигурация сборки прямо об этом говорит. Иконка, не попавшая под запись assets в angular.json, никогда не доходит до dist. Сборка проходит успешно, а файла нет.
Массив assets решает, что существует
Любой другой фреймворк копирует целый каталог по конвенции. Angular делает это по конфигурации: запись assets целевой сборки копирует только то, что ей соответствует. Новые каркасы направляют её на каталог public/ через glob; старые перечисляют отдельные пути, начиная с src/favicon.ico.
Ничто не предупредит вас, когда это настроено неверно. Добавьте apple-touch-icon.png рядом с работающим favicon.ico в старом проекте — и он соберётся без ошибок, а потом даст 404 в продакшене: favicon.ico был перечислен по имени, а ваш новый файл — нет.
Glob для assets (новые каркасы)
"assets": [
{ "glob": "**/*", "input": "public" }
]Всё, что в public/, копируется. В старом проекте массив содержит строки вроде "src/favicon.ico", и вы добавляете по одной строке на иконку.
Favicon не отображается в Angular: частые вопросы
Почему мой favicon в Angular не отображается?
Иконка не попадает под запись assets в angular.json, поэтому она не дошла до dist. Загляните в dist/ после ng build. Если файла там нет, добавьте его в массив assets (или glob для public/) и пересоберите.
Почему он даёт 404 под подпутём?
href, начинающийся со слэша, разрешается относительно корня домена. Собирайте с --base-href, указывающим на ваш подкаталог, чтобы тег base в index.html был правильным, и пишите href иконок относительными, без ведущего слэша.
Добавляет ли @angular/pwa мои иконки?
Он создаёт манифест и PNG-иконки-заглушки и подключает service worker. Иконки — это заглушки. Замените файлы изображений на месте и сохраните сгенерированный манифест и записи assets.