ファビコン、タッチアイコンの作り方と設定方法

ファビコンやタッチアイコンを表示することにより、
サイトを識別しやすくなり、サイトのブランディングアップにもなります。

ファビコン、タッチアイコンの作成方法と設定方法をご紹介します。

ファビコン、タッチアイコンに必要なサイズ

ファイル名	サイズ	ブラウザ
favicon.ico	16px x 16px（マルチアイコンにする）	各ブラウザのタブ
favicon.ico	32px × 32px（マルチアイコンにする）	Retinaの各ブラウザのタブ
apple-touch-icon.png	180px x 180px	iOS、Safariのホーム画面、Android Chromeのタブ、ホーム画面
touch-icon.png	192px x 192px	Android Chromeのブラウザタブ、ホーム画面

「マルチアイコン」とは
複数のサイズのアイコンをico形式で1つのファイルにまとめたものをいいます。

ファビコン、タッチアイコンの作り方

4つのpngを作成します
favicon_16.png（16px x 16px）
favicon_32.png（32px x 32px）
apple-touch-icon.png（180px x 180px）
touch-icon.png（192px x 192px）

favicon_16.png と favicon_32.pngをico形式に変換する
マルチアイコン作成 にアクセスします。

「画像ファイル1を選択」でfavicon_16.png
「画像ファイル2を選択」でfavicon_32.png
を選択し、「アイコン作成」をクリックします。

 

「ダウンロード」をクリックします。

icon.ico という名称でダウンロードされるので、
favicon.ico にリネームします。

ファビコン、タッチアイコンの設定方法

以下をhtmlのhead内に記述します。

ファビコンの場合は、ルートディレクトリに「favicon.ico」というファイル名でアップするだけでもファビコンがタブに表示されます。
ルートディレクトリ以外（/pic/など）にアップする場合は上記のようにファビコンファイルの場所を記述するようにしましょう。