HTML
favicon（ファビコン）が表示されない
faviconのパス・形式・キャッシュの問題
こんな症状
ブラウザのタブにアイコンが表示されない。faviconを設置したのに反映されないときに起きるよ。原因の多くはパスのミスかブラウザのキャッシュだよ。
まず試す
<link rel="icon" href="..."> の href が実ファイルの場所と合っているか確認し、URLを直接開いて存在を確かめる。
html
<link rel="icon" href="/images/favicon.ico">
<!-- 反映されないときはクエリで強制更新 -->
<link rel="icon" href="/images/favicon.ico?v=2">これで直らなければ、下の「自分のケース」を確認。
🔍 自分のケースはどれ？
- ✓href のパスが違う
→ 実際のファイルの場所に合わせる。URLを直接開いて存在確認する。 - ✓直したのに反映されない（キャッシュ）
→ シークレットウィンドウで確認。href="favicon.ico?v=2" のようにクエリで強制更新する。 - ✓GitHub Pagesのプロジェクトページ
→ /favicon.ico はリポジトリ外を指すことがある。./favicon.ico か /リポジトリ名/favicon.ico を使う。
なぜ起きる？
<link rel="icon">タグのhrefパスが間違っている、ファイル形式がブラウザに対応していない、またはキャッシュが残っていて古い状態が表示されているよ。faviconはブラウザが特に強くキャッシュするので、正しく直しても反映されにくいんだ。GitHub Pagesのプロジェクトページ（URLが /リポジトリ名/ で始まる）では、href="/favicon.ico" がリポジトリの外を指してしまい表示されないこともあるよ。
✕ エラーが起きるコード
<!-- パスが間違っている例 -->
<link rel="icon" href="/favicon.ico">
<!-- 実際のファイルは /images/favicon.ico にある -->✓ 直したコード
<!-- ファイルの実際の場所に合わせる -->
<link rel="icon" href="/images/favicon.ico">
<!-- 変更が反映されないときはクエリで強制更新 -->
<link rel="icon" href="/images/favicon.ico?v=2">✅ 直ったか確認
ブラウザのタブにアイコンが表示されればOK（キャッシュ対策にシークレットウィンドウで確認）。
この解決法は役立ちましたか？
🔗 関連するエラー
- 外部CSSが読み込まれない — link要素のrel="stylesheet"の書き忘れ
- 画像が表示されない — 画像パスが間違っている
- 拡張子が表示されない（.html が見えない） — OS の設定で拡張子が非表示
- iframeが表示されない — 埋め込み先がiframeを拒否している
- videoタグで動画が再生されない — ファイルパスまたはフォーマットの問題
🔗 別カテゴリの関連エラー
📖 この問題を学べるレッスン
✏️ 手を動かして練習
📝 関連ブログ記事
- プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説
- HTMLとは？初心者向けにわかりやすく解説 — タグの書き方・ページ構造の基本
- HTMLのパス（相対パス・絶対パス）の書き方 — パスの書き方を初心者向けに解説