ファビコンや各種アイコンの作成と設定方法

タブの左上に表示されるファビコンや、iOSやAndroidでホーム画面に保存した時に表示される画像など、サイトを公開する上で設定しておきたいアイコンがたくさんあります。

今回はその作成方法と設定方法についてまとめておきます。

ファビコン

ファビコン（favicon）はタブの左に表示されたり、ブックマークした時などに表示される小さいアイコンのことです。

作成方法

形式は「.ico」の拡張子で保存するのがオススメです。

ファイルが1つで済む（色んなサイズを用意する必要がない）
それぞれの環境で最適なサイズで表示してくれる
IE10以前のバージョンでは対応していない（現在はIE10以下はサポートされていないため、対応していなくてもOK）

画像をアップロードすると「.ico」に変換してくれるサイトがあるので、そちらを利用して画像の準備をしましょう。

もし、PNGで設定したい場合は下記のサイズの画像を用意する必要があります。

サイズ	使われる場所
16px × 16px	IEタブ
24px × 24px	IE9
32px × 32px	モダンブラウザのタブ
48px × 48px	Windows ページアイコン
64px × 64px	高解像度のWindows ページアイコン

ファビコンだけでこれだけの数の画像を用意するのは面倒なので、できれば「.ico」で用意しましょう。

設置方法

<head>内に下記のタグを入力するだけです。

<link rel="icon" href="/favicon.ico">

ちなみに、「favicon.ico」という名前で保存してルートディレクトリに保存しておけば、記述しなくてもファビコンが表示されます。

スマホ用アイコン

iOSやAndroidで「ホーム画面に追加」した時に表示されるアイコンです（正式名称はapple-touch-icon）。

作成方法

サイズは180px × 180pxで、画像形式はPNGにしておきましょう。
apple-touch-iconの場合は特殊な画像形式は不要です。

設置方法

<head>内に下記のタグを入力します。

<link rel="apple-touch-icon" href="apple-touch-icon.png" />

ちなみに、変更した際はSafariのキャッシュをクリアしないと、すぐ変更が反映されないときがあるので注意しましょう。

Windowsアイコン

Windows8から追加されたスタート画面のタイル状のレイアウト。
そこにWebサイトをピンどめした時のアイコンです。

作成方法

Microsoftが提供している「Build My Pinned Site」から作成しましょう。
必要情報を入力して、画像をアップロードするだけです（透過部分は真っ黒になってしまうため注意が必要）。

www.buildmypinnedsite.com

Build My Pinned Site

http://www.buildmypinnedsite.com

設置方法

画像とコードも生成されるので、それをそのまま<head>タグ内に入力すれば完了です。

<meta name="application-name" content="Webrandum"/>
<meta name="msapplication-square70x70logo" content="small.jpg"/>
<meta name="msapplication-square150x150logo" content="medium.jpg"/>
<meta name="msapplication-wide310x150logo" content="wide.jpg"/>
<meta name="msapplication-square310x310logo" content="large.jpg"/>