2022年3月25日　|　TOE

ファビコンに必要なサイズ一覧と作る方法

ブラウザのブックマークメニューや、URL欄に表示される小さな画像のことを「ファビコン（favicon）」と言います。これは「favarite icon（お気に入りアイコン）」という言葉が元になっています。

このファビコンは表示される場所によって必要なサイズが決められていることをご存じでしょうか。この記事では、ファビコンに必要なサイズの一覧とファビコンが必要な理由、そしてインターネットで公開されているファビコンの素材サイトをご紹介します。

ファビコンに必要なサイズ

ファビコンとは正方形のアイコン画像のことであり、表示される場所によって最適なサイズが異なります。ファビコンのサイズと表示される場所の関係を表にすると、次のようになります。

サイズ	表示場所	ファイル名
16ピクセル × 16ピクセル	・ブラウザのタブ・ブラウザのお気に入り・iOSのタブ	favicon.ico
32ピクセル × 32ピクセル	・Retinaディスプレイ環境のブラウザタブ	favicon.ico
180ピクセル × 180ピクセル	・iOSのホーム画面	apple-touch-icon.png
192ピクセル × 192ピクセル	・Androidのホーム画面	android-chrome-192×192.png

主要なファビコンサイズと表示場所はこの表の通りですが、実際には48ピクセルや128ピクセルの大きさのファビコンを使う環境もあります。

また、この表の「iOSのホーム画面」と「Androidのホーム画面」に表示されるアイコンは、正確には「ウェブクリップアイコン」と言います。スマートフォンで特定のWebサイトをホーム画面に設置した時に表示されるアイコンのことです。

icoファイルとは？

ファビコンは通常「favicon.ico」というファイル名で作成します。この拡張子「ico」ファイルとは、ファビコンに限らず、Windowsのアプリケーションソフトウェアで使われている、汎用的なアイコンファイルに使われている画像形式です。

icoファイルを作成するためには、専用のソフトウェアが必要です。しかしインターネット上では、PNG画像をicoファイルに変換するコンバータが公開されていますし、Windows上で動作するフリーソフトもあります。そのため、icoファイルを作るときは、PhotoshopやIllustratorのようなグラフィックソフトでデザインを作り、PNG画像として保存してから、icoファイルに変換する方法をおすすめします。

マルチアイコンとは？

一つのicoファイルに複数のサイズのアイコン画像が含まれているファイルをマルチアイコンと言います。例えば、16ピクセルと32ピクセルの2つの大きさのアイコン画像を、一つのicoファイルに含めて作成されたicoファイルが、マルチアイコンということになります。

ファビコンがマルチアイコンの場合、ブラウザやデバイスによって自動的に最適なサイズが選択されて、表示されるようになります。

Webサイトにファビコンが必要な理由

Webサイトに設置できるファビコンですが、ファビコンがなくてもWebサイトの閲覧には何ら支障はありません。しかしファビコンはできるだけ設置した方が良いでしょう。なぜならファビコンが設置されているWebサイトは、ブックマークメニューの項目やブラウザのタブにもファビコンが表示されるようになり、一目でそのWebサイトがどこなのか分かるからです。

自社のWebサイトを目立たせて、訪問者に分かりやすくアピールするためにも、Webサイトを制作したときには、ファビコンも一緒に作成して設置すると良いでしょう。