スタジオとみっぺ


ほぼカンペキなFaviconと「タッチアイコン」の作成・設定方法

投稿者 とみっぺ : 2013年06月08日 | トラックバック (0)

概説

ブラウザの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等で作成する際、「タッチアイコン」用の背景レイヤーを用意しておくか、黒地に埋没しないデザインにしておくことが必要です。