Chromeを開いて自分のサイトを読み込むと、タブにアイコンではなく汎用の地球儀マークや空白の四角が表示される。HTMLを確認してもファイルは存在しているのに、Chromeはどうしても表示してくれない。これは開発者からよく聞くfaviconの悩みの一つです。良いニュースは、ほとんどの場合、修正にかかる時間は2分未満だということです。

簡単な修正: 強制リロードとNetworkタブの確認

コードに触る前に、最も単純な原因を除外しましょう。Chromeが古いfavicon（またはキャッシュされた404）を配信している可能性です。Chromeはfaviconを積極的にキャッシュし、数日間保持することもあります。

  1. Chromeでサイトを開きます。
  2. DevToolsを開きます（F12またはCmd+Option+I）。
  3. Networkタブに移動し、Disable cacheにチェックを入れます。
  4. ハードリロード（Ctrl+Shift+RまたはCmd+Shift+R）でページを再読み込みします。
  5. Networkのフィルターボックスにfaviconと入力します。

favicon.icoへのリクエストが404を返している場合、Chromeはデフォルトの地球儀を表示し続けます。200が返っているのにアイコンが更新されない場合は、キャッシュされた画像が問題です。通常、ハードリロードで解消します。それでもダメなら、chrome://settings/clearBrowserDataを開き、Cached images and filesを選択してクリアします。これでパスワードや履歴を消さずにChromeのfaviconキャッシュを消去できます。

根本原因1: Chromeがfavicon.icoを要求しているのにサイトに存在しない

<link rel='icon'>タグを一度も書いたことがなくても、Chromeはドメインルートの/favicon.icoを要求します。これはInternet Explorerにまで遡るレガシーな動作で、今もHTML仕様に残っています。そのファイルが存在しなければ404となり、デフォルトの地球儀が表示されます。

修正は簡単です。ドメインルートに実際のfavicon.icoを置くか、<head>内に明示的なlinkタグを追加します。

<link rel='icon' href='/favicon.ico' sizes='any'>
<link rel='icon' type='image/svg+xml' href='/favicon.svg'>

HTML仕様では、ページにアイコンを関連付ける標準的な方法としてrel='icon'が定義されています。Chromeは最初に見つけた有効なものを使用しますが、SVGとICOのフォールバックの両方を提供するのが最も安全なパターンです。

根本原因2: linkタグの場所が間違っている、または構文エラーがある

Chromeは<head>内のfavicon linkタグのみを読み取ります。タグが<body>内にある場合（テンプレートのパーシャルやCMSインジェクターでよくある）、Chromeはそれを黙って無視します。コンソールエラーも警告もなく、ただアイコンが欠落するだけです。

以下のよくある間違いを確認してください。

タグが有効かどうか不明な場合は、Chromeでページソースを表示し（Ctrl+U）、rel=を検索してください。タグはbodyコンテンツの前のheadブロック内に現れるはずです。

根本原因3: ファイルが間違ったMIMEタイプで配信されている、または破損している

Chromeは画像ファイルに厳格です。サーバーが.icoファイルをtext/plainやapplication/octet-streamとして返すと、Chromeはレンダリングを拒否することがあります。これはDevToolsで確認できます。Networkタブでfaviconリクエストをクリックし、Response Headersを確認してください。

正しいMIMEタイプは以下の通りです。

Apacheでは、.htaccessにAddType image/x-icon .icoを追加します。Nginxでは、サーバーブロック内でtypes { image/x-icon ico; }を使用します。マネージドホストやCDNを利用している場合は、そのドキュメントを確認してください。デフォルトでMIMEタイプを削除または上書きするものもあります。

根本原因4: 無効なマークアップのSVG favicon

SVG faviconは、きれいにスケールしダークモードをサポートするため、ますます一般的になっています。しかしChromeのSVGパーサーは容赦ありません。名前空間の欠落、閉じられていないタグ、迷子のHTMLエンティティがあると、ファイル全体が拒否され、Chromeはデフォルトの地球儀にフォールバックします。

SVGをブラウザタブで直接開いて検証してください。画像としてレンダリングされればマークアップは問題ありません。生のXMLやエラーが表示される場合は、faviconタグを心配する前にSVGを修正してください。また、SVGのルート要素にxmlns='http://www.w3.org/2000/svg'があることも確認してください。

予防策: Chromeが無視できないfaviconスタックを構築する

最も信頼できるセットアップは、Chromeが常に有効なフォールバックを持てるように複数のフォーマットを組み合わせることです。最小限のモダンなスタックは次のようになります。

これらはすべて、Mzu favicondlを使って単一のソース画像から生成できます。デプロイ後は、Networkタブで各ファイルが200ステータスで読み込まれることを確認してください。

Chrome特有のキャッシュやlocalhostの癖についてさらに詳しく知りたい場合は、favicon not showing in Chromeのガイドをご覧ください。また、faviconがそもそも配信されているか不明な場合は、favicon audit guideのチェックを実行してください。

何をしてもうまくいかない場合

キャッシュをクリアし、linkタグを修正し、MIMEタイプを確認してもChromeが空白のタブを表示する場合は、最後の手段を試してください。

  1. Chromeのシークレットウィンドウでテストする（拡張機能とプロファイルキャッシュがバイパスされます）。
  2. 別のブラウザ（FirefoxやEdge）でテストし、ファイルが正しく配信されていることを確認する。
  3. Service Workerがfaviconリクエストを傍受し、古いレスポンスを返していないか確認する。
  4. アイコンドメインのimg-srcをブロックするContent Security Policyヘッダーがないか確認する。

シークレットではアイコンが表示されるが通常のプロファイルでは表示されない場合、問題は100%ローカルキャッシュであり、サーバーではありません。どこでも失敗する場合、問題はHTML、ファイルパス、またはサーバー設定にあります。

Chromeがウェブサイトのfaviconを表示しないのは、ほとんどの場合、ルートのfavicon.icoの欠落、linkタグの配置ミスや不正な形式、間違ったMIMEタイプ、キャッシュされた404のいずれかです。この順番で対処すれば、コーヒーが冷める前にタブにアイコンが戻ります。