ブラウザのURL欄やお気に入り項目に使用される「FAVICON(ファビコン)」は、対応形式、作成方法とも乱立しています。

ここでは、とみっぺ調べで、新旧ほとんどの環境に対応し、かつ手順が比較的易しい、おすすめのFAVICON作成・設定方法をまとめました。

この方法では、

• ひとつの画像ファイルを準備するだけで、すべての利用シーンにアイコンサイズが対応したマルチアイコンを作成できる
• IEを含むほとんどのPC用ブラウザに対応
• iPhone(Mobile Safari)やAndroidブラウザ向けの「タッチアイコン」にも対応
• HTMLファイルに追加するタグが最小限(2行)

以上のような特徴を持っており、ひと通り覚えておく価値のあるものと考えます。

1. 256px × 256px 以上で正方形のPNG-24(透過)画像を作っておく

2. Macの場合

   作成画像をHobiconerで開き、ICO形式で「Export」

   Windowsの場合

   作成画像をToYconにドラッグ

   以上の操作で、ICOファイルが生成されます。

3. ICOファイルの名前を"favicon.ico"としてサイトルートに置く
4. 元画像の名前を"apple-touch-icon.png"としてサイトルートに置く
5. 全ページ(最低トップページのみ)のhead内に以下のタグを追加する
   

   <link rel="shortcut icon" href="/favicon.ico" type="image/vnd.microsoft.icon">
   <link rel=icon href="/favicon.ico" type="image/vnd.microsoft.icon">
   <link rel="apple-touch-icon" href="/apple-touch-icon.png">

• iPhoneでは透過部分が黒地なりますので、元画像をPhotoshop等で作成する際、「タッチアイコン」用の背景レイヤーを用意しておくか、黒地に埋没しないデザインにしておくことが必要です。