Astro でファビコンが表示されない？その解決法
Astro は public/ を手を加えず出力へコピーしますが、アイコンのタグは代わりに挿入してくれません。タブが空白なら、ページが使うレイアウトに link が無いか、ページが独自の html 要素をレンダリングしてレイアウトを省いています。
public/ は名前を保つが、リンクは自動でされない
public/ のファイルは出力のルートにそのままコピーされるので、/favicon.svg や /favicon.ico は実在の URL です。しかし Astro は public/ をスキャンしてタグを挿入することはしません。head に入れたいものは、ページが自ら包むレイアウトコンポーネントに書き込む必要があります。
落とし穴はレイアウトを省くページです。独自の html 要素を書くカスタム 404 や単発のランディングページは、そこにもタグを追加しない限りアイコンのタグを持ちません。
抜けを見つける
- 1
/favicon.ico（または /favicon.svg）を直接開く
404 なら、ファイルが public/ にありません。読み込めるならファイルは問題なく、link タグの欠落が原因です。
- 2
レイアウトが link をレンダリングしているか確認する
通常のページでソースを表示します。rel=icon タグが無ければ、Layout.astro にそれが含まれていません。レイアウトの head に link タグを追加してください。
- 3
レイアウトを省くページを確認する
カスタム 404 や、独自の html を書くスタンドアロンのページは、レイアウトの head を継承しません。そこにもアイコンのタグを追加するか、レイアウトで包んでください。
Astro でファビコンが表示されない：よくある質問
Astro のファビコンが表示されないのはなぜですか？
Astro はアイコンのタグを一切挿入しないため、レイアウトが link をレンダリングしていないか、対象のページがレイアウトを省いているかのどちらかです。まずファイルがその URL で読み込めることを確認し、次にレイアウトの head に実際に rel=icon タグが含まれているか確認してください。
すべてのページにタグを追加しなければなりませんか？
ページが包むレイアウトにだけです。落とし穴はそうしないページで、独自の html 要素を書くカスタム 404 やランディングページには、タグを直接追加する必要があります。
サイトがサブパス配下にあり、アイコンが 404 になります。
astro.config.mjs で base を設定してください。ただし Astro は自分のマークアップにハードコードされたパスを書き換えません。href の先頭に import.meta.env.BASE_URL を付け、デプロイ前にビルド後の HTML を確認してください。