Angular でファビコンが表示されない?その解決法
Angular は、ビルド設定が指示した場合にのみ静的ファイルをコピーします。angular.json の assets エントリに一致しないアイコンは dist に届きません。ビルドは成功し、ファイルはそこにありません。
何が存在するかを決めるのは assets 配列です
他のフレームワークはどれも規約でディレクトリまるごとをコピーします。Angular はそれを設定で行います。ビルドターゲットの assets エントリは、一致したものだけをコピーします。新しいスキャフォールドはグロブで public/ ディレクトリを指し、古いものは src/favicon.ico を筆頭に個々のパスを列挙します。
これが誤っていても何も警告してくれません。古いプロジェクトで、動作している favicon.ico の隣に apple-touch-icon.png を追加すると、クリーンにビルドされたあと本番で 404 になります。favicon.ico は名前で列挙されていて、新しいファイルはそうではなかったからです。
assets のグロブ(新しいスキャフォールド)
"assets": [
{ "glob": "**/*", "input": "public" }
]public/ にあるものはすべてコピーされます。古いプロジェクトでは配列に "src/favicon.ico" のような文字列が入り、アイコンごとに 1 行追加します。
Angular でファビコンが表示されない:よくある質問
Angular のファビコンが表示されないのはなぜですか?
アイコンが angular.json の assets エントリに一致しておらず、dist に届いていないからです。ng build のあと dist/ の中を見てください。ファイルが無ければ、assets 配列(または public/ のグロブ)に追加して再ビルドします。
サブパスで 404 になるのはなぜですか?
スラッシュで始まる href はドメインルートを基準に解決されます。--base-href をサブディレクトリに設定してビルドし、index.html の base タグが正しくなるようにして、アイコンの href は先頭スラッシュ無しの相対パスで書いてください。
@angular/pwa はアイコンを追加してくれますか?
マニフェストとプレースホルダーの PNG アイコンをスキャフォールドし、サービスワーカーを配線します。アイコンはプレースホルダーです。画像ファイルをその場で差し替え、生成されたマニフェストと asset エントリはそのまま残してください。