ブラウザのアドレスバーやタブに表示されるウェブサイト独自のアイコン

アドレスバーの端に表示される、サイト独自のアイコン「ファビコン」

アドレスバーの端に表示される、サイト独自のアイコン「ファビコン」

All Aboutのウェブサイトを代表的なブラウザで閲覧すると、アドレスバーの端などに右図のような独自のアイコンが見えます。今ご覧になっているこのページでも、右図のように表示されているでしょう。このように、ウェブサイト独特のアイコンをブラウザに表示させているサイトは、多くあります。

このアイコンは「ファビコン(Favicon)」と呼ばれ、ブラウザのアドレスバー以外にも、タブや、ブックマーク(お気に入り)項目に表示されるアイコンとしても使われます。


 
タブに独自アイコンが表示されると区別しやすい
サイト独自のアイコンがタブに表示されていると、区別しやすい

サイト独自のアイコンがタブに表示されていると、区別しやすい

ブラウザを使う際、タブ機能を使って複数のページを平行して閲覧することがあります。このとき、サイト独自のアイコン(ファビコン)がタブに表示されていると、右図のように「どのタブに何のウェブサイトが表示されているのか」が区別しやすくなります。このようにファビコンの存在は、閲覧者にとっても便利なものです。


 
ブックマーク(お気に入り)に表示されると、判別しやすい
ブックマーク項目にサイト独自のアイコンが表示されていると、判別しやすい

ブックマーク項目にサイト独自のアイコンが表示されていると、判別しやすい

気に入ったウェブページは、ブラウザのブックマーク(お気に入り)に登録しますね。このとき、ブックマーク項目の端にも、ファビコンが使われます。ここに独特のアイコンが表示されていれば、(文字だけしかないよりも)判別しやすいでしょう。

なお、この「favicon(ファビコン)」とは、「favorite(お気に入り)+icon(アイコン)」の造語で、元々はブックマーク項目の表示に使われるために作られた、Internet Explorerの独自仕様でした。今では多くのブラウザに同様の機能があります。


 
デスクトップのショートカットアイコンとしても使われる
ウェブサイトへのショートカットをデスクトップ上に置いた際にもファビコンが使われる

ウェブサイトへのショートカットをデスクトップ上に置いた際にもファビコンが使われる

WindowsなどのOSでは、特定のファイルを指し示す「ショートカット」をデスクトップ上などに配置できます。これと同様に、ウェブサイトへのショートカットも作成できます。このアイコンにも、右図のようにファビコンが使われます。

※ブラウザの「アドレス欄に表示されているアイコン」や「ブックマーク項目」を、デスクトップ上にドラッグ&ドロップするなどの操作で作成できます。


 
Windows+IEの「ピン留め」機能のアイコンとしても使われる
タスクバーに「ピン留め」

タスクバーに「ピン留め」 (All Aboutのウェブサイトを、タスクバーにピン留めしてみた例)

Windows用の標準ブラウザInternet ExplorerのVer.9以降には、「ピン留め」と呼ばれる機能があります。この機能を使うと、ウェブサイト1つが、まるで1つのアプリケーションのようにタスクバーに表示されます(右図)。このときにも、タスクバーに表示されるアイコンとしてファビコンが使われます。

なお、自身のウェブサイトを「ピン留め」機能に対応させる方法は、記事「サイトをWindows 7+IE 9の「ピン留め」対応にする方法」をご参照下さい。


 

ウェブサイトを示す分かりやすい目印になる独自アイコン「ファビコン」

上記でご紹介したように、ブラウザに表示されるウェブサイト独自のアイコン「ファビコン」は、様々な場所で活用され、ウェブサイトを示す分かりやすい目印になります。そのため、自身のウェブサイト用に独特のアイコンを用意しておけば、ウェブサイトの存在を強調でき、より閲覧者の印象に残りやすくなる効果が期待できるでしょう。

ファビコンは簡単に表示できる
この「ファビコン」は、とても簡単に作成・表示できますから、ぜひ、活用してみて下さい。本記事では、この「ファビコン」をブラウザに掲載(表示)する方法を解説致します。また、自分でファビコン(アイコンそのもの)を作成する方法についても、末尾でご紹介しています。

※本記事は、2007年3月2日に初版を公開し、2014年7月に内容を改訂しました。記事中の一部の画面イメージは、2007年時点のものです。

【目次】
1. ファビコンの正体とは? ファビコンを表示させるために記述するHTMLソース (p.2)
2. ファビコンをウェブサイト全体に一括適用する方法 (p.3)
3. ファビコン画像(アイコンファイル)の作成方法 (p.4)