AboutデジタルIT・インターネットホームページ作成ホームページ作成テクニック、小技タブやブックマークに独自アイコンを表示する方法ホームページ作成/ホームページ作成テクニック、小技タブやブックマークに独自アイコンを表示する方法ブックマークのアイコンやタブのアイコンとして、ウェブサイト独自の画像を設定・表示する方法を解説。PC用ブラウザのタブやアドレスバー、スマホ用ブラウザのブックマークやホーム画面などに自作のアイコン画像を表示させてみましょう。favicon.icoやapple-touch-icon.pngなどのファイルを作成し、短いHTMLを書くだけの簡単な手順で独自アイコンを設定できます。Aboutのウェブサイトを代表的なブラウザで閲覧すると、タブに図のようなアイコンが表示されます。このように独自のアイコンを表示させているウェブサイトをよく見かけます。この独自アイコンは、favicon.icoなどのファイル名で用意される「ファビコン(Favicon)」と呼ばれる画像です。ブラウザのタブ以外にも、ブックマーク項目の画像にも使われます。icon)も使われます。■ブラウザのブックマーク(お気に入り)に独自のアイコンがあると選択しやすい気に入ったウェブページがあれば、ブラウザのブックマーク(お気に入り)に登録するでしょう。このとき、ブックマーク項目の端にそのウェブサイト独自のアイコンが表示されていれば、文字だけしかないよりも判別しやすくて便利です。ブックマークにウェブサイト独自のアイコンが表示されていると、判別しやすい「favicon.ico」や「apple-touch-icon.png」は、上図のようにブックマークアイコンとしても機能します。PCでは「favicon.ico」だけが使われ、モバイルではどちらか(ある方)が使われます。■ブラウザのタブに独自のアイコンが見えると見分けやすい複数のウェブページを並行して閲覧する際には、ブラウザのタブ機能を使います。このとき、そのウェブページ独自のアイコンがタブに表示されていれば、どのタブに何のウェブページが表示されているのかが見分けやすくて、使いやすくなります。タブにウェブサイト独自のアイコンが表示されていると見分けやすい「favicon.ico」や「apple-touch-icon.png」は、上図のようにタブアイコンとしても機能します。PCでは「favicon.ico」だけが使われ、モバイルではどちらか(ある方)が使われます。■デスクトップやホーム画面のショートカットアイコンも分かりやすくなるWindowsなどのPC用OSでは、ウェブサイトへのショートカットをデスクトップに置けます。スマートフォンやタブレットなどのモバイル用OSでも、ウェブサイトへのショートカットをホーム画面に置けます。ウェブサイトの独自アイコンが用意されていれば、下図のようにウェブサイトそのものが1つのアプリになったかのように見えて、とても分かりやすくなります。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」のアイコンファイルなので、一般の画像作成ソフトではたいてい作れません。ウェブ上で作成できるサービスがありますから、それを使えば簡単です。次のページからは、ウェブサイト独自のアイコン画像を作成する方法と、そのアイコン画像をブックマークアイコンやショートカットアイコンなどとして使えるようにする方法を解説いたします。About公式SNS日々の生活や仕事を楽しむための情報を毎日お届けします。