favicon.ico とは何か、今も必要か
favicon.ico は、ページが自身のアイコンを一切宣言していないときに、ブラウザがドメインのルート /favicon.ico からリクエストするアイコンファイルです。ICO コンテナなので、一つのファイルに複数のビットマップ（通常は 16x16、32x32、48x48）を同時に保持でき、クライアントは必要なサイズを選びます。今も用意しておくべきなのは、クローラー、フィードリーダー、リンクプレビュー用ボットが、HTML を読まずにその正確なパスをリクエストするからです。
規格ではなく慣例
/favicon.ico というパスは、誰かが仕様として定めたものではありません。Internet Explorer 5 がそれをリクエストし、ウェブの残りが後に続いたのです。だからこそマークアップが一切なくても機能します。ページに icon の link タグを見つけないブラウザは、単にそのパスをサーバーに要求し、返ってきたものを何であれ使います。
その副作用として、ファイルがあってもなくてもリクエストは発生します。ファイルが無ければ、サーバーは訪問者ごとに 404 を記録し、そのパスだけを確認するツールはサイトに空白のプレースホルダーを表示します。
典型的な favicon.ico の中身
| エントリ | 用途 |
|---|---|
| 16x16 | アドレスバー、ブックマーク一覧、履歴の項目 |
| 32x32 | 標準密度ディスプレイのブラウザタブ |
| 48x48 | Windows のショートカットと高密度のタブ |
ファイルの置き場所
- public/
- favicon.icoaddServed at /favicon.ico
- favicon-32x32.pngPrimary tab icon
- apple-touch-icon.pngiOS Home Screen
サブディレクトリではなく、サイトのルートで解決される必要があります。ほとんどのフレームワークは、まさにこのために public や static ディレクトリをルートにマッピングします。最近の Next.js を含む一部は、app/favicon.ico も受け付けてタグを配線してくれます。
明示的に宣言する
<link rel="icon" href="/favicon.ico" sizes="any">パスは何もしなくてもリクエストされるため任意ですが、追加する価値はあります。マークアップの中でアイコンセットが見えるようになり、アイコンを変更したときにクエリ文字列でキャッシュバスティングできます。
favicon.ico に関するよくある質問
favicon.ico は実は PNG でもいいのですか？
ブラウザは拡張子を信用せず中身を判別するので、/favicon.ico で配信された PNG はたいてい機能します。それでも悪い考えです。このパスを使う唯一の理由であるマルチサイズの挙動が失われ、より厳格な利用側は拒否することがあります。
ログの 404 を止めるには？
ファイルを出荷することです。ログ行を抑制しても症状を隠すだけで、そのパスをリクエストするすべてのツールは依然として何も受け取れません。
ファイルはルートに置かないといけませんか？
自動リクエストのためには、はい。クライアントは /favicon.ico を名指しで要求します。link タグで指し示せば任意のパスからアイコンを配信できますが、HTML を決して解析しないクライアントをカバーするのはルートのファイルです。