タブやブックマークに独自アイコンを表示する方法(2ページ目)

タブやブックマークに表示される独自アイコンの実体

ブラウザのタブやブックマークに表示されたり、PCのデスクトップやスマホなどのホーム画面に表示されるウェブサイト独自のアイコン画像には、以下の2種類のファイルが使われます。
 

• (1) ファビコンとも呼ばれる「favicon.ico」ファイル (PCでもモバイルでも使われる)
• (2) PNG形式の画像「apple-touch-icon.png」ファイル (モバイルだけで使われる)

これらについて、順に紹介します。

 

(1) ファビコンとも呼ばれる「favicon.ico」ファイル

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

■「.ico」形式のファイルは、Windowsで一般的に使われているアイコンファイル
これはウェブ用の特殊なデータ形式というわけではありません。ファイル拡張子が「.ico」のアイコンファイルは、Windowsで一般的に使われているアイコンファイルです。

※備考：ファビコンとしては他の画像形式でも使える
ファビコンとしてはGIF・PNG・JPEG形式の画像ファイルを指定することもできます。しかし、HTMLソースに何も追記することなく1つのファビコンをウェブサイト全体に一括適用するためには、ファイル名が「favicon.ico」である必要があります(詳細は後述)。

■「.ico」形式のアイコンファイルにはメリットもある
この「.ico」形式には、複数サイズのアイコンデータを1ファイル内にまとめて収録できるという大きなメリットがあります。

ファビコンは、表示箇所によって大きさが異なります。ブラウザ側が表示サイズを自動調整するとはいえ、複数サイズのアイコンをあらかじめ用意しておく方が画像が変に潰れたりせずに済み、きれいに表示できます。

「.ico」形式のアイコンファイルを作成する方法

ファビコンとしても利用できる「.ico」形式のアイコンファイルを作るには、任意の画像をアイコンファイルに変換してくれるサービスを利用するのが簡単です。ここでは、ウェブ上のアイコン作成・変換サービスを使う方法として、以下の2サイトをご紹介いたします。

■複数サイズのアイコンをブラウザ上だけで簡単に作成できる「x-icon editor」
ブラウザ上で動作するアイコン作成ツール「x-icon editor」では、複数サイズのアイコンを簡単に作成できます。既存の画像を読み込んで加工できるほか、1から描くこともできます。ファビコンとしてどのように見えるのかを示すプレビュー機能もあって便利です。
 
この「x-icon editor」の使い方は、記事「ファビコンの簡単な作り方と設置方法」で詳しく解説していますので、ご参照下さい。

■任意の画像ファイルをアイコンファイルに変換してくれる「FavIcon from Pics」
既存の画像ファイルをアップロードすることで、その画像をそのままアイコンファイルに変換してくれるウェブサイト「FavIcon from Pics」もあります。下図に赤丸で示したとおり、

1. 「Image to Use」欄で望みの画像ファイルを指定し、
2. 隣の「Generate Favicon.ico」ボタンをクリックする

……というシンプルな操作だけで、アイコンファイル「favicon.ico」が得られます。
 
※「Generate Favicon.ico」ボタンをクリックしてしばらくするとページが移動します。移動したページの中程に「Download FavIcon Package」というリンクが見えます。それをクリックするとZIPファイルがダウンロードできます。そのZIPファイルを展開すると「favicon.ico」ファイルが得られます。

(2) PNG形式の画像「apple-touch-icon.png」ファイル

スマートフォンやタブレットなどのモバイル環境で、ウェブサイト独自のアイコンとして使われる画像ファイルが「apple-touch-icon.png」です。モバイル環境であっても、ブックマークアイコンやタブアイコンとしてはファビコン(favicon.ico)も使われます。しかし、ホーム画面に表示するショートカットアイコンとしては「apple-touch-icon.png」だけが使われます。
 
もし、PC環境を一切考慮しないモバイル専用サイトなのであれば、「favicon.ico」は不要で、「apple-touch-icon.png」だけを用意しておけば充分です。
 

スマホなどのモバイル用アイコンファイルの作り方

「apple-touch-icon.png」ファイルは、ただのPNG形式の画像ですから特別な作成方法は必要ありません。一般的な画像作成ソフトで作り、ファイル名を「apple-touch-icon.png」にしてPNG形式で保存すれば良いだけです。
 
作成上の注意点は、以下の2点です。

• 必ず正方形で作成すること。
• 実際に表示される際には、四隅が丸くカットされる可能性がある点に留意すること。

面積はあまり大きくする必要はありませんから、192×192pxで作成しておけば充分でしょう。実際の表示時には、適宜縮小されて使われます。なお、このサイズはGoogleが推奨している最大のアイコンサイズです。

さて、アイコン画像ができたらそれをウェブサイトに適用しましょう。次のページで、作成した独自アイコンをウェブサイト全体に一括適用する方法をご紹介いたします。