ファビコンについて

ブラウザのお気に入りに登録すると、サイトのタイトルの前にアイコンがついているサイトとついていないサイトがある事に気づき、ちょっと調べてみることにしました。

調べていると、そのアイコンはFaviconといい、「Favicon(ファビコン)とは、ウェブサイトやウェブページに関連づけられているアイコンの事であり、Favorite icon(お気に入りのアイコン)という英語の語句を縮約したものである(ウィキペディアより)」と書かれていた。

さて、語句はわかったが、どうすれば自分のサイトにもそのFaviconというアイコンが表示されるようになるのだろうと思い、色々調べた結果、やっと表示されるようになった。

その表示の方法をメモしておきたいと思います。

  1. まず、画像作成ソフトで16×16ピクセルの画像を作成します。
  2. 作った画像を適当なフォルダ(デスクトップでも可)に保存します。
  3. http://www.favicon.jp/favicon_create/のサイトにアクセスします。
  4. 真ん中あたりに「Favicon自動生成」という箇所があります。
  5. 選択ボタンをクリックし、先ほど作成した画像を選択します。
  6. 「Faviconを作成する」ボタンをクリック。
  7. 作成された「favicon.ico」をサイトのルートディレクトリにアップすれば、表示されます。
  8. 尚、特定のページだけに表示させたい場合は、表示させたいページの<head>タグの中に下記のタグを挿入すれば表示されます。
  9. <link rel=”shortcut icon” href=”ファビコンをアップしたパス(または、アドレス)/favicon.ico”>

※尚、設置方法の詳細は、http://www.favicon.jp/favicon_establishmentで確認してもらった方が正確だと思います。

WordPressには、Faviconを簡単に設置できるプラグインがいくつかあります。実際に導入して使い心地を試してみたいと思います。

  1. WordPressの管理画面からプラグイン→新規追加
  2. キーワードに「favicon」を入力して、検索
  3. Apple touch iconも表示できるAll in one Faviconをインストールし有効化
  4. 設定画面からAll in one Faviconを選択
  5. Frontend PNGのUpload Faviconボタンをクリック
  6. 選択箇所にICO、PNG、GIF及びApple touch icon等があるので、わざわざ.icoに変換しなくても使えるらしい。
  7. favicon用に作成した16×16画像をFrontend PNGにアップロード
  8. Frontend Apple tocuh iconのUpload Faviconボタンをクリック
  9. iphone用に作成した60×60の画像をFrontend Apple touch iconにアップロード
  10. 変更を保存ボタンをクリック

このプラグインは画像サイズを気にせず(四角形で作成した方がいいと思うが)、簡単にアップすることができる(iphone用に用意した60×60サイズの画像だけで可)ので、是非導入した方がいいと思います。

iphoneでも自分のサイトを確認しましたが、確かにiphoneのタッチアイコンも先ほどアップしたFaviconに変更されていました。

google Chorm、Fire Fox、OperaではFaviconは表示されましたが、IE(インターネットエクスプロー)では表示されませんでした。そのうち理由を見つけて修正したいと思います。

IEでの表示方法(2011/5/5追加)

IEで表示されない理由がわかりました。ChromeやFire FoxではPNGファイルやGIFファイルを自動的に変換して表示するみたいですが、IEではファビコンファイルでないと表示されないみたいです。

作成したPNGファイルやGIFファイルをICOファイルに変換して、「All in one Favicon」のFrontend ICOの箇所にアップロードして下さい。ICOファイルへの変換は、こちらのサイトで簡単にできます。

タグ

2011年4月9日 | コメント/トラックバック(0) |

カテゴリー:WordPress

このページの先頭へ