ブラウザのブックマークメニューや、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サイトを制作したときには、ファビコンも一緒に作成して設置すると良いでしょう。

ファビコンを作る方法

それでは実際にファビコンを作る方法をご紹介します。

ファビコンになる画像を作成する

ファビコンは画像ファイルなので、PhotoshopやIllustratorなどのグラフィックソフトを使って作成します。まずは512ピクセル×512ピクセル程度の大き目のサイズで作成して、小さく縮小すると良いでしょう。

縮小して制作するサイズとしては、最低限この記事の最初で紹介した4サイズは用意しましょう。

・favicon_16x16.png（16ピクセル × 16ピクセル）

・favicon_32x32.png（32ピクセル × 32ピクセル）

・apple-touch-icon.png（180ピクセル × 180ピクセル）

・android-chrome-192×192.png（192ピクセル × 192ピクセル）

これらの4つサイズの画像ファイルを作成して、それぞれをpng画像として保存します。

マルチアイコンに変換する

作成した4つのサイズのpng画像をマルチアイコンに変換します。マルチアイコンを作成するには、「マルチアイコン作成」のWebサイトで変換できます。

マルチアイコン作成

上記Webサイトでは、あらかじめ4つのサイズのpng画像を作成しておく必要がありますが「Favicon Generator. For real.」では、一つの画像ファイルから、複数サイズの画像ファイルを一括で作成できます。

ファビコンを作るときの注意点

ファビコンを作るときには、以下の点に注意しましょう。

・Basic認証が設定されているWebサイトでは、ファビコンがうまく表示されないときがある

・Androidではfavicon.icoとapple-touch-iconの両方があるときに、機種によってどちらが表示されるか異なる

・iOSではapple-touch-icon.pngの透過を設定した場所が黒背景になる。

・フマートフォンのホーム画面のアイコンにすると、自動的に角が丸くなる

ファビコンを思い通りに表示させるためには、これらの注意点を頭に入れておくと良いでしょう。

ファビコンをWebサイトに設置する方法

Webサイトにファビコンを設置するには、ソースコードのヘッダーに以下のように記述します。

<link rel=”shortcut icon” href=”/favicon.ico”>　← 通常のファビコン <link rel=”apple-touch-icon” href=”/apple-touch-icon.png”>　← iOS用のファビコン <link rel=”icon” type=”image/png” href=”/android-chrome-192×192.png”> ← Android用のファビコン

実際に設定する場合は、href属性のパスを環境に応じて書き換えてください。

また「Favicon checker」のWebサイトでは、ファビコンが適切に設定されているか確認できます。

Favicon checker

Webサイトにファビコンを設定したら、Favicon checkerを使って適切に設定されているか確認しましょう。

おしゃれなファビコンの素材サイト

Webサイトにファビコンを設定する場合、できればオリジナルの画像を使用するのが望ましいでしょう。しかし自分ではおしゃれなファビコンを作成できない場合は、フリーのファビコン素材サイトの画像を使うのも、一つの方法です。

無料でダウンロードできる、おしゃれなファビコン素材サイトを3つご紹介します。なおファビコンをダウンロードしてWebサイトで使用する前に、素材サイトの利用規約を必ず確認しましょう。基本的には再配布や販売はNGですので、注意が必要です。

ICOON MONO

ICOOON MONOは、商用利用できるモノトーンのアイコン画像をダウンロードできる素材サイトです。対応している画像フォーマットは「JPG・PNG・SVG・AI・EPS」の5種類です。

モノトーンの画像に特化しているため、複雑で派手な画像はありませんが、ファビコンのようにシンプルで分かりやすいデザインのアイコンが必要な方にとっては、真っ先に検討すべき素材サイトです。

ICOOON MONO：https://icooon-mono.com/

Material Icons

Material Iconsは、Googleが公開しているフォントのサービスです。フォントなので本来は文字情報なのですが、モノクロの画像として「SVG・PNG」形式でダウンロード可能です。ダウンロードする前に、画像の色や解像度、サイズなどのカスタマイズが可能です。

Material Icons：https://fonts.google.com/icons?selected=Material+Icons

iconmonstr

Iconmonstrは、4500種類以上のアイコン画像がダウンロードできるアイコン素材サイトです。「SVG・PNG」形式でダウンロードできます。また300以上の画像を含んだアイコンフォントも配布されています。

iconmonstr：https://iconmonstr.com/

Icônes

Icônesは、モチーフを同じとしている複数のアイコン画像をセットでダウンロードできるアイコン素材サイトです。SVG形式でダウンロード可能です。同じテイストで複数のアイコン画像が必要なときに、非常に役に立つアイコン素材サイトです。

Icônes：https://icones.js.org/

まとめ

一口にファビコンと言っても、さまざまなサイズや用途があることをお分かりいただけたかと思います。作成するためのツールやソフトウェアも多く、無料で使える素材サイトも充実しています。Webサイトに個性を与えて印象づけられるファビコンを設置して、訪問者アップを目指しましょう！