Webサイトを作成していると、ブラウザがどのようにサイトアイコンを取得しているのか気になることがあります。特にInternet Explorer(IE)では、HTMLにアイコン指定を書いていなくても「favicon.ico」というファイルが表示されるケースがありました。
この記事では、Internet Explorerがfavicon.icoを自動的に探しに行く仕様だったのか、なぜそのような仕組みが広く使われるようになったのか、現在のブラウザとの違いについて詳しく解説します。
Internet Explorerはfavicon.icoを自動的に探していた
結論からいうと、Internet ExplorerにはWebサイトのルートディレクトリにある「favicon.ico」を自動的に取得しようとする動作がありました。
例えば、WebサイトのURLが「https://example.com/」の場合、IEは特別な指定がなくても「https://example.com/favicon.ico」というファイルを確認し、存在すればお気に入り(ブックマーク)やアドレスバー付近に表示していました。
そのため、昔のWebサイトではHTML内にの記述がなくても、サーバーの公開フォルダ直下にfavicon.icoを置くだけでアイコン表示が可能でした。
favicon.icoが広く普及した理由
favicon.icoが普及した大きな理由は、初期のInternet Explorerがお気に入り機能と連携してサイトアイコンを表示していたためです。
当時は現在のようにHTML5や各ブラウザ向けのアイコン指定方法が一般的ではなく、16×16ピクセル程度の小さなICO形式ファイルを用意する方法が標準的な対応でした。
Web制作者は「favicon.icoをサイトのルートに置く」という対応を行えば、多くの利用者のブラウザでアイコンを表示できたため、この方法が事実上の慣習になりました。
HTMLで指定するfaviconとの違い
現在では、HTML内でfaviconの場所を明示的に指定する方法が一般的です。例えば、以下のような記述をhead要素内に追加します。
<link rel=”icon” href=”/favicon.ico”>
この方法では、favicon.ico以外にもPNG形式やSVG形式の画像を指定でき、複数サイズのアイコンを用意することも可能です。
一方、IE時代の自動検索方式では、基本的にサイトのルートにある決められたファイル名「favicon.ico」を探す仕組みだったため、自由なファイル名や場所を指定することはできませんでした。
Internet Explorer以外のブラウザでも自動取得は行われたのか
favicon.icoをルートディレクトリから探す仕組みは、Internet Explorerだけでなく、多くの後発ブラウザでも互換性のために採用されました。
現在のChrome、Edge、Firefoxなどでも、HTMLでアイコン指定がない場合にfavicon.icoを確認する動作が残っています。ただし、現在はHTMLによる明示的な指定が推奨されています。
例えば企業サイトやブログでは、「/favicon.ico」を配置したうえで、HTMLにもを記述しておくことで、古い環境と新しい環境の両方に対応できます。
favicon.icoを設置するときの注意点
favicon.icoを利用する場合は、通常Webサイトの一番上の階層(ドキュメントルート)に配置します。下層フォルダに置いただけでは、自動検索では発見されない場合があります。
また、ブラウザはfaviconをキャッシュするため、変更してもすぐに反映されないことがあります。確認するときはキャッシュ削除や別ブラウザでの表示確認を行うと原因を切り分けやすくなります。
現在のWeb制作では、ICO形式だけでなくPNGやSVG形式も利用されるため、対応する端末やブラウザに合わせて適切なアイコン設定を行うことが重要です。
まとめ
Internet Explorerには、HTMLでfaviconを指定していなくても、Webサイトのルートにある「favicon.ico」を自動的に探しに行く仕組みがありました。
この仕様によってfavicon.icoはWeb制作における長年の標準的なファイル名となり、多くのブラウザでも互換目的で利用され続けています。
現在はによる明示的な指定が推奨されていますが、favicon.icoをルートに配置する方法も依然として互換性対策として有効な手段です。


コメント