ブラウザのタブに小さく表示されているあのアイコン、当たり前のように「favicon」と呼んでいますがよく考えると変な名前ですよね。タブに出ているのになぜtabiconじゃないんだろうと思ったことがある方もいるんじゃないでしょうか。実はこの名前は生まれた当時の役割がそのまま残った結果だったりします。
名前の由来は「お気に入りのアイコン」
favicon（ファビコン）はfavorite（お気に入り）とicon（アイコン）を組み合わせた略語です。直訳すると「お気に入りアイコン」という意味になります。
現在はタブやブックマークなどでサイトを見分ける目印になっていますが、名前の由来はブラウザの「お気に入り」機能にあります。今よく見かける場所と名前が付いたときの用途が違うんですね。
生みの親はInternet Explorer 5
faviconが初めて登場したのは1999年に発売されたInternet Explorer 5です。当時はHTMLの標準仕様ではなくMicrosoftが独自に追加した機能でした。
仕組みはシンプルで、あるサイトをお気に入りに登録するとブラウザがそのサイトのルートディレクトリにあるfavicon.icoというファイルを自動で探しに行きます。見つかればそれをお気に入り一覧のアイコンとして表示する、という流れです。
.icoはWindowsでも使われているアイコンのファイル形式です。faviconという呼び名は用途を表し、ICOは画像の形式を表しています。現在はPNGなどもfaviconとして使えるのでfaviconは必ずICO形式ではないんですね。
いつのまにか主戦場はタブになった
faviconはIE以外のブラウザにも採用され、タブでもサイトを見分ける目印として使われるようになりました。タブをたくさん開いてページのタイトルが読めなくなっても小さなアイコンがあれば目的のサイトを探しやすくなりますね。
今では多くの人にとって「タブに出ているアイコン」というイメージの方が強いはずです。それでも名前だけは「お気に入り時代」のまま変わっていません。tabiconと呼ばれないのは単純に生まれた時の名前が定着してしまったから、といったカンジですね。
名前がそのまま定着した例にはBluetoothもあります。こちらは仮のコードネームだった「青い歯」が正式名称として残ったという話です。
検索結果にも表示される実用的な理由
faviconはGoogle検索の結果でもサイトを見分ける目印として使われます。見慣れたアイコンがあればサイト名とあわせて「前に読んだサイトだ」と気づきやすくなります。
Googleは検索結果に表示するためのガイドラインを公開していますが、条件を満たしても必ず表示されるわけではありません。小さなアイコンですが検索結果でどのサイトの情報かを伝える役割もあるんですね。
今のHTMLでは<link rel=”icon”>で指定する
HTMLでfaviconの場所を指定するにはheadタグ内に次のように書きます。この例はサイトのルートにfavicon.icoを置く場合です。
<link rel="icon" href="/favicon.ico">古いサンプルではrel="shortcut icon"という書き方も見かけます。現在のHTML仕様でも歴史的な理由からこの表記は認められていますが、shortcutを付ける必要はなく新しく書くならrel="icon"だけで十分です。
rel="icon"の指定がない場合、ブラウザがサイトのルートにあるfavicon.icoを探すこともあります。現在のHTML仕様でも認められている動作ですが、すべてのブラウザに必須の動作ではありません。
ちなみにこのブログのHTMLでもrel="icon"でJPEG画像を指定しています。faviconという名前でも実際のファイルはfavicon.icoとは限らないんですね。「お気に入り」から生まれた名前が画像形式や表示場所が変わった今も残っているわけです。
身近なIT用語の「なんで？」をもっと知りたい方はIT雑学・ぷちQAまとめからテーマ別に探せます。
