ファビコンとapple-touch-iconとandroid-icon設定、作り方

ファビコン(favicon)とは?

ファビコンとは「favorite icon」つまり、日本語に訳すと「お気に入りアイコン」のことです。なお、縦横同じ長さの正方形になります。一昔前までは、「favicon.ico」というファイルを一つだけ用意すれば事足りていたのですが、iPhoneやAndroindが登場してからは複数のアイコン画像を用意しなくてはならないようようになっています。さらにie11以降のピン留機能に使用する「browserconfig.xml」も必要となりました。 以下、順を追って説明していきます。

用意する画像の種類

大きく分けて4種類です。
favicon.png(favicon.icoは旧式の記述なので必要ありません。)
apple-touch-icon.png
iPhoneやMac用のアイコンです。
android-icon.png
AndroidのChrome用のアイコンです。
必要なサイズは192pxです。
ms-icon.png
windows用のアイコンです。
ピン留用に「browserconfig.xml」も必要となります。

Favicon & App Icon Generatorの使い方

アイコンのサイズは、基本的にそれぞれの最大サイズを用意すれば縮小して補完表示されます。(apple-touch-iconはiPhone6/7Plus用の180px、Androidの192pxなど)
しかし、面倒くさがって最低限の画像サイズだけを用意するよりジェネレーターを利用し、一括設定することをおすすめします。 ここでは、以下のサイトのGeneratorで全てのサイズを複製する方法をご紹介します。

①まずファビコンにする画像を準備する

260pxの正方形の画像を一つだけ用意してください。

②ページの設定

Include your favicon.ico in the public gallery.」のチェックマークを外してください。 ※チェックマークをいれると、作成したファビコンがギャラリーで紹介されてしまうのでご注意ください。
次に、用意した画像を選択し、「Create Favicon」をクリックしてください。

③ダウンロード

Download the generated favicon」をクリックしてください。あなたのパソコンのzipファイルがダウンロードフォルダに保存されます。

④サーバーにアップロードしてください。

zipファイルを解凍後、あなたのサーバーのrootディレクトリにアップロードしてください。
※WordPressの場合は、themeディレクトリのimages/faviconにアップロードしてください。(ディレクトリ名は任意ですのでご自分で設定してください。)

htmlのhead内に以下を追記してください。

WordPressの場合

※WordPressの場合で、themeディレクトリのimages/faviconにアップロードした場合は、header.phpに以下追記してください。 また「browserconfig.xml」がrootディレクトリにない場合は、個別に以下のmeta要素を追加してください。 参照:https://msdn.microsoft.com/ja-jp/library/dn455106(v=vs.85).aspx WordPress版のhead内の追記内容をまとめると、こんな感じです。

このページの関連ワード