Faviconが表示されない？7つの原因と修正方法

ウェブサイトに favicon を追加したのに、ブラウザのタブに表示されない。イライラしますよね？最も可能性の高いものから低いものへと順に、7つのよくある原因とその解決策を見ていきましょう。

1. ブラウザのキャッシュ (最も一般的)

favicon は、ブラウザで他のほとんどのものよりも積極的にキャッシュされます。ファイルを更新した後でも、ブラウザは数時間から数日間、古いもの (またはアイコンなし) を表示することがあります。

解決策:

最もよくあるコーディングエラーです。パスが間違っているため、ブラウザが favicon ファイルを見つけられません。

解決策:

/ で始まる絶対パスを使用する: href="/favicon.ico"
ブラウザで https://yoursite.com/favicon.ico を直接開いてみる — アイコンが見えますか？
ファイル名のタイプミスを確認する (例: favicon.ico と Favicon.ico — Linux サーバーでは大文字と小文字が区別されます)

<link> タグが欠落しているか、形式が間違っているか、<head> の外に配置されている可能性があります。

解決策: このコードが <head> タグ内に含まれていることを確認してください:

<link rel="icon" type="image/x-icon" href="/favicon.ico">

よくある間違い:

ファイルはあなたのコンピューター上では問題なく見えるかもしれませんが、破損しているか、間違った形式である可能性があります。

解決策:

一部のサーバーは .ico ファイルを認識せず、間違った Content-Type ヘッダーで配信することがあります。

解決策: DevTools (Network タブ) でレスポンスヘッダーを確認してください。MIME タイプは次のようになっているはずです:

Apache の場合、.htaccess に以下を追加します:

AddType image/x-icon .ico

Nginx の場合:

location ~* \.ico$ {
    add_header Content-Type image/x-icon;
}

サイトが HTTPS で運用されているのに、favicon の URL が HTTP を使用している場合、ブラウザはそれをサイレントにブロックします。

解決策:

ブラウザのタブには favicon が表示されるのに、Google 検索結果には表示されない。これは別の問題です。

Google の favicon 要件:

解決策: Google Search Console の URL 検査ツールを使用して、ホームページの再クロールをリクエストしてください。