ナレッジベース

とみっぺがこれまでのパソメンテサービスの中で
遭遇した顕著なトラブル例について、
現象や解決策などを記録し、
インターネットで共有しています。

TAGS

RECORDS

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

    概要

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

    インデックスに戻る