ファビコンが表示されない理由

1. HTML の link タグを確認する

最初に、ドキュメントの head に正しい HTML link タグがあるかを確認してください。タグが無い、または誤っていると表示されません。

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

href のパスが、実際のファイル位置と一致していることを確認してください。表示されないときは、ルートからの相対パスが合っているかを見直してください。

2. ブラウザキャッシュを消す

ブラウザはファビコンを強くキャッシュするため、コードを直してもすぐ出ないことがあります。キャッシュが原因のときは次を試してください。

• 強制再読み込みする（Windows/Linux は Ctrl+Shift+R、Mac は Cmd+Shift+R）
• 対象サイトのキャッシュと Cookie を削除する
• シークレット（プライベート）ウィンドウで開いてみる
• キャッシュの自然な期限切れを待ち、24〜48 時間様子を見る

これでも出ないなら、原因はキャッシュ以外の可能性が高いです。

3. ファイルパスと配置を確認する

ファビコンファイルが正しい場所にあるかを確認してください。ファイルが無い、またはディレクトリが違うと表示されません。

よくある配置場所：

• ルートディレクトリ： /favicon.ico or /favicon.png
• public フォルダ： /public/favicon.ico （静的サイトジェネレーター向け）
• assets フォルダ： /assets/favicon.ico

表示されないときは、HTML のパスとサーバー上の実ファイル位置が一致しているかを確認してください。

4. 形式とサイズを確認する

未対応の形式や誤ったサイズだと、表示されないことがあります。次を確認してください。

• ICO 形式： 従来形式。どのブラウザでも動きます（16x16 または 32x32 ピクセル）
• PNG 形式： 現行ブラウザが対応（16x16、32x32、48x48、96x96、192x192、512x512）
• SVG 形式： 現行ブラウザが対応。拡縮でき、解像度に依存しません

ファイルの形式とサイズが正しいことを確認してください。表示されないときは、まず標準の ICO または PNG を試してください。

5. サーバー設定を確認する

サーバー設定の誤りで表示されないことがあります。次を確認してください。

• .ico、.png、.svg の MIME タイプが正しく設定されているか
• ファビコンファイルへのリクエストがサーバーで許可されているか
• ファビコンへのリクエストを止めるリダイレクトが無いか
• HTTPS / HTTP が揃っているか（混合コンテンツの警告が無いか）

サーバー側が原因なら、ホスティング事業者に問い合わせるか、サーバー設定ファイルを確認してください。

6. ブラウザを変えて確認する

あるブラウザでは出ないが、別のブラウザでは出る、ということもあります。次を試してください。

• Chrome、Firefox、Safari、Edge で確認する
• モバイルブラウザ（iOS Safari、Chrome Mobile）でも確認する
• ブックマークと閲覧履歴にも出るかを確認する
• デスクトップとモバイルの両方で確認する

特定のブラウザだけで出ないときは、そのブラウザ固有の要件や既知の問題を確認してください。