せっかくデプロイしたサイトのコンソールを開いて、赤い 404 エラーが表示されているほどガッカリすることはありません。GET /favicon.ico 404 (Not Found)。これは、プロの開発者にとって「靴の中の小石」のような、小さくても非常に気になる存在です。

1分でできるクイックフィックス

最も手っ取り早い favicon 404 error fix は、favicon.ico という名前のファイルをウェブサイトのルートディレクトリ（例：https://yourdomain.com/favicon.ico）に直接配置することです。HTML 内で SVG などを指定していても、Chrome や Safari などのブラウザはフォールバックとしてルートディレクトリを自動的に探しに行きます。そこにファイルがないと、容赦なくエラーを吐き出します。

ブラウザがルートを探す理由

これはブラウザの古い慣習によるものです。GitHub や Stripe のような大手サイトも、コンソールのノイズを減らし、サーバーログを綺麗に保つために、必ずルートにアイコンを置いています。もしサーバーがカスタム 404 ページを返す設定になっている場合、たった 1KB のアイコンがないだけで、アクセスごとに重い HTML ページが裏で読み込まれ、パフォーマンスに悪影響を与える可能性すらあります。

フレームワーク特有のパスの問題

Next.js や Vue を使っている場合、アセットは /public フォルダに置かれますが、相対パスで記述するとサブディレクトリでリンクが切れることがあります。常に絶対パスを使用するようにしましょう。

<!-- ルートディレクトリに置くべき「安全策」 -->
/favicon.ico

<!-- head内での明示的な宣言 -->
<link rel='icon' href='/favicon.ico' type='image/x-icon'>

もしファイルはあるのに表示されない場合は、アイコンが表示されない時のトラブルシューティングを確認してください。結論として、ルートに favicon.ico を置くのが最も確実な解決策です。アイコンの作成には Mzu favicondl を使うと、必要なサイズがセットになったパッケージをすぐに作成できます。