タブやブックマークに独自アイコンを表示する方法

タブやブックマークにサイト独自のアイコンが表示されると分かりやすい

All Aboutのウェブサイトを代表的なブラウザで閲覧すると、タブに図のようなアイコンが表示されます。このように独自のアイコンを表示させているウェブサイトをよく見かけます。

この独自アイコンは、favicon.icoなどのファイル名で用意される「ファビコン(Favicon)」と呼ばれる画像です。ブラウザのタブ以外にも、ブックマーク項目の画像にも使われます。なお、スマートフォンやタブレットでは、apple-touch-icon.pngなどのファイル名で用意される画像(apple touch icon)も使われます。

■ブラウザのブックマーク(お気に入り)に独自のアイコンがあると選択しやすい
気に入ったウェブページがあれば、ブラウザのブックマーク(お気に入り)に登録するでしょう。このとき、ブックマーク項目の端にそのウェブサイト独自のアイコンが表示されていれば、文字だけしかないよりも判別しやすくて便利です。
 
「favicon.ico」や「apple-touch-icon.png」は、上図のようにブックマークアイコンとしても機能します。PCでは「favicon.ico」だけが使われ、モバイルではどちらか(ある方)が使われます。

■ブラウザのタブに独自のアイコンが見えると見分けやすい
複数のウェブページを並行して閲覧する際には、ブラウザのタブ機能を使います。このとき、そのウェブページ独自のアイコンがタブに表示されていれば、どのタブに何のウェブページが表示されているのかが見分けやすくて、使いやすくなります。
 
「favicon.ico」や「apple-touch-icon.png」は、上図のようにタブアイコンとしても機能します。PCでは「favicon.ico」だけが使われ、モバイルではどちらか(ある方)が使われます。

■デスクトップやホーム画面のショートカットアイコンも分かりやすくなる
WindowsなどのPC用OSでは、ウェブサイトへのショートカットをデスクトップに置けます。スマートフォンやタブレットなどのモバイル用OSでも、ウェブサイトへのショートカットをホーム画面に置けます。ウェブサイトの独自アイコンが用意されていれば、下図のようにウェブサイトそのものが1つのアプリになったかのように見えて、とても分かりやすくなります。
 
これらのアイコンには、PCでは「favicon.ico」などのファビコンだけが使われ、スマートフォンやタブレットでは「apple-touch-icon.png」などのapple touch icon画像だけが使われます。

■Windows＋IEの「ピン留め」機能のアイコンとしても使われる
Windows7以降のIE9～11には「ピン留め」と呼ばれる機能があります。この機能を使うと、ウェブサイト1つがまるで1つのアプリケーションになったかのようにタスクバーに留められます。このとき、ウェブサイト独自のアイコン(favicon.ico)が用意されていれば、タスクバーに留められるアイコンとして使われます。

■古いブラウザでは、アドレスバーの端に独自アイコンが表示された
IEなどの古いブラウザでは、タブだけでなくアドレスバーの端にもウェブサイト独自のアイコンが表示されていました。

「favicon.ico」を作成できるウェブサービスやソフトウェアの中には、プレビューとしてアドレスバーの端に表示された場合の見え方を表示するものがあります。それは、このためです。

ウェブサイトを示す分かりやすい目印になる独自アイコンの用意方法

上記でご紹介したように、「favicon.ico」や「apple-touch-icon.png」などの画像ファイルとして作るウェブサイト独自のアイコンは、ブラウザのブックマークやタブ、デスクトップ(ホーム画面)など様々な場所に表示され、ウェブサイトを示す分かりやすい目印になります。自身のウェブサイトに独自のアイコンを用意しておけば、閲覧者の印象に残りやすいウェブサイトになるでしょう。

■ファビコン(favicon.ico)も簡単に作成できる
「apple-touch-icon.png」はファイル拡張子「.png」を見て分かるとおり、PNG形式の画像ファイルですから作成するのは簡単です。「favicon.ico」はファイル拡張子が「.ico」のアイコンファイルなので、一般の画像作成ソフトではたいてい作れません。しかし、ウェブ上で作成できるサービスがありますから、それを使えば簡単です。

次のページからは、ウェブサイト独自のアイコン画像を作成する方法と、そのアイコン画像をブックマークアイコンやショートカットアイコンなどとして使えるようにする方法を解説いたします。

【目次】

1. タブやブックマークに表示されるファビコンの正体と、その作成方法 (p.2)
2. 独自のアイコン画像を、ウェブサイト全体に一括適用する方法 (p.3)
3. ウェブページごとに異なる独自アイコンを表示するためのHTMLソース (p.4)