煩わしい「404 favicon.ico Not Found」エラーの修正方法

May 31, 2026 · 3 min read

ブラウザのコンソールを開くと、真っ先に目に飛び込んでくるメッセージがあります。Failed to load resource: the server responded with a status of 404 (Not Found) — favicon.ico。faviconを参照した覚えはないし、要求した記憶もない。それでも、ログを開くたびに必ずそこにある。

ここでは、実際に何が起きているのか、そして適切な修正方法を解説します。

まとめ

ブラウザ、クローラー、監視ツールは、HTMLで参照されていなくても、サイトのルートに対して自動的に /favicon.ico をリクエストします。
この404エラー自体に害はありませんが、サーバーログを汚染し、本当の問題を見えにくくします。
最も確実な修正方法は、実際の favicon.ico ファイルをサイトのルートに配置することです。
モダンな構成では、HTMLの <head> 内で <link rel="icon"> を使って、SVG・PNG・Apple Touch Iconの各バリアントも宣言しておくべきです。
Next.jsなどのフレームワークはファイルの命名規則によってfaviconの配置を処理しますが、ルートレベルへのリクエストへの対応は依然として必要です。

ブラウザが指示なしにfavicon.icoをリクエストする理由

ブラウザは、HTMLがfaviconの場所を教えてくれるまで待ちません。WHATWG HTML標準の仕様により、ページに明示的な <link rel="icon"> タグがない場合、ブラウザはサイトのルートに対して /favicon.ico へのGETリクエストを自動的に送信します。これは「暗黙的なfavicon探索」と呼ばれるブラウザ組み込みの動作であり、コードのバグではありません。

この動作はブラウザだけに限りません。RSSリーダー、Slackのリンクプレビュー、検索エンジンのクローラー、稼働監視ツールなども同様に自動リクエストを送信します。そのため、ブラウザが <link rel="icon"> タグを正しく認識していても、他のクライアントが /favicon.ico に直接アクセスしてくる可能性があります。

このエラー自体は無害ですが、ノイズが多い。 サイトが壊れることはありませんが、サーバーログを汚染し、監視ダッシュボードを見づらくし、本当のエラーを発見しにくくします。

正しい修正方法：サイトのルートに実際のfavicon.icoを配置する

最も確実な解決策は、実際の favicon.ico ファイルをサイトのルートに配置し、自動リクエストが404ではなく200を返すようにすることです。

ファイルは favicon.io や realfavicongenerator.net で生成できます。以下の場所にファイルを配置してください。

/favicon.ico   ← ブラウザとクローラーが自動的にリクエストするパス

この方法は、HTMLに他のfavicon宣言があるかどうかに関わらず有効です。

モダンなfaviconの設定：HTMLでの完全な宣言

ルートの favicon.ico を用意したら、モダンブラウザ向けに <head> 内で明示的な宣言を追加しましょう。MDN Web Docs（rel=“icon”）では、古い rel="shortcut icon" ではなく rel="icon" の使用を推奨しています。

<!-- サイトのルートにある /favicon.ico は自動的に配信されます — HTMLタグは不要です -->

<!-- PNG favicon --> 
<link rel="icon" type="image/png" sizes="32x32" href="/favicon.png"> 

<!-- SVG favicon（対応ブラウザ向け） -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

<!-- Apple Touch Icon（iOSのホーム画面ブックマーク用） -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- Web App Manifest（インストール可能なPWA用） -->
<link rel="manifest" href="/manifest.webmanifest">

いくつか補足事項があります。

SVG favicon はどのサイズでも完璧にスケールし、SVG内のCSS prefers-color-scheme を使ったダークモード対応も可能です。
Apple Touch Icon は、ユーザーがサイトをホーム画面に保存する際のiOS専用アイコンです。faviconとは別のファイルで、通常は180×180ピクセルのPNGを使用します。
Web App Manifestのアイコン は用途が異なり、インストール済みPWAのアイコンを定義するものです。faviconの代替にはならず、/favicon.ico の404を防ぐこともできません。

フレームワークを使用している場合

フレームワーク固有のツールが、この処理の一部を自動的に行ってくれる場合があります。たとえば Next.jsのApp Router では、app/ ディレクトリに配置した favicon.ico ファイルを特別なファイル規約として扱い、正しいメタデータを自動生成します。他のフレームワークにも同様の規約があります。詳細は各フレームワークのドキュメントを参照してください。faviconの設定方法に関わらず、ブラウザ・クローラー・その他のクライアントが /favicon.ico に直接アクセスしてくる可能性があるため、このパスへのリクエストが適切に処理されるよう確認しておくことをお勧めします。

簡易診断：ブラウザのDevToolsで確認する

DevToolsの Networkタブ を開き、ページをリロードして favicon でフィルタリングします。favicon.ico に対して404が表示されている場合、ルートファイルが存在しないか、正しく配信されていません。200レスポンスが返っていれば、対応完了です。

まとめ

サイトのルートに実際の favicon.ico を配置するだけで、ブラウザ・クローラー・監視ツールからの自動的な404を一度に解消できます。さらに、SVG favicon・PNGフォールバック・Apple Touch Iconの <link rel="icon"> 宣言を追加することで、モダンブラウザに最適なフォーマットを提供できます。ログはクリーンになり、アイコンも正しく表示され、小手先の回避策も不要です。

よくある質問

コンソールでフィルタリングすることは可能ですが、リクエスト自体はサーバーに届き続け、ログ・アナリティクス・監視ツールにも記録されます。実際の favicon.ico ファイルを配置することは一度きりの作業で、問題を隠すのではなく根本から解決できます。複数のツールにわたってフィルターを設定するよりも、はるかに手間がかかりません。

はい、必要です。古いクローラー・RSSリーダー・リンクプレビューボットなど多くのクライアントは、HTMLのlinkタグを無視してサイトのルートから直接 /favicon.ico をリクエストします。そのパスにファイルがなければ、それらのリクエストは404を返します。ルートの favicon.ico とモダンなlink宣言の両方を用意することで、あらゆるクライアントに確実に対応できます。

16×16・32×32・48×48ピクセルの3サイズを含むマルチ解像度のICOファイルであれば、ほぼすべてのユースケースに対応できます。ほとんどのfaviconジェネレーターはこの形式を自動的に生成します。単一サイズのみ必要な場合は、32×32が最も無難なデフォルトです。主要なプラットフォームのブラウザタブやブックマークバーで適切に表示されます。

ブラウザはfaviconを積極的にキャッシュするため、数日間古いキャッシュが残ることがあります。強制リフレッシュを試みるか、ブラウザのキャッシュをクリアするか、プライベートウィンドウでテストしてみてください。また、ファイルが実際にサイトのルートから配信されており、正常なレスポンスを返しているかも確認してください。そこで正しく読み込まれていれば、キャッシュが期限切れになると404は解消されるはずです。

Gain control over your UX

See how users are using your site as if you were sitting next to them, learn and iterate faster with OpenReplay. — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.