favicon.icoの404エラーの対処法
HTMLのheadタグ内に「<link rel="icon" href="data:," />」を入れます。
<link rel="icon" href="data:," />なぜこれを使うのか
ブラウザはHTML内にアイコンの指定がない場合、自動的にサーバーのルートディレクトリにある /favicon.ico を探しに行きます。
favicon.icoのファイルが存在しないと、サーバーは「404エラー」を返し、ブラウザのコンソールに赤字でエラーが表示されてしまいます。
これを防ぐために、「アイコンは空っぽです」と明示的に宣言しています。
好ましくない対処法
ネット上には好ましくない対処法がいくつか存在しているので、もし次に述べる対処法を使用している場合は「<link rel="icon" href="data:," />」を入れる対処法への変更を推奨します。
透明なfavicon.icoを読み込む
透明なfavicon.icoを読み込むとブラウザやGoogle検索結果で表示される地球のアイコンが表示されなくなります。
透明だと何も表示されていない状態になるのでアイコンが正しく読み込めていないという誤解を生む可能性もあります。
また、たとえ1pxの透過アイコンだとしてもサーバーへの無駄なリクエストと、各環境にアップロードする余計な手間が発生します。
サーバー側で制御する
HTMLをいじらず、サーバーの設定で「ファビコンのリクエストが来たら無視する（あるいは204 No Contentを返す）」ように設定しているケースがあります。
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule ^favicon\.ico$ - [R=204,L]
</IfModule>
SetEnvIf Request_URI "^/favicon\.ico$" dontlog
CustomLog /dev/null common env=dontloglocation = /favicon.ico {
log_not_found off;
access_log off;
return 204;
}これだとサーバーの設定権限が必要で、サーバー毎に設定しなければいけません。
また、favicon.icoを作って使うことになった際に設定を削除して戻す手間が発生します。
favicon.svgは404エラーにならないので注意
Viteなどでプロジェクトを作成すると、index.htmlにファビコンにfavicon.svgが設定されます。
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />このファビコンはViteのアイコンなので、作成するWebサイトでこれがそのまま使われることはほぼありません。
favicon.svgは差し替えるか、削除するかのどちらかの対応をすることになるのですが、前述の「type="image/svg+xml"」のファビコンの指定の場合はファイルが存在しなくても404エラーにはなりません。
favicon.svgファイルを削除したまま公開してしまい、ファビコン未設定になっているWebサイトもたまにありますので注意が必要です。
