WordPressでサクッとファビコン(favicon)設定するなら「favikon」+「All in one Favicon」が楽で良いです。

WordPressでサクッとファビコン(favicon)設定するなら「favikon」+「All in one Favicon」が楽で良いです。

Favicon(ファビコン)は、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。Favorite icon(フェイバリット・アイコン:お気に入りアイコン)という英語の語句を縮約したものである。

出典 : Favicon – Wikipedia

ファビコン(favicon)というのは、ウェブサイトにアクセスしたときや、ブックマークしたときにタイトルの横に表示される小さい(16px×16px)アイコンのことです。知らず知らずのうちによく目にしているのでファビコンでウェブサイトを識別してることもあり、意外と重要な役割を担っています。

さっきkazzwata.beのファビコンを設定するのを忘れていたことに気づいて、急遽作ったんですが、ファビコン作成→設定をすごく簡単にやる方法が見つかったのでメモがてら記事にしておくことにしました。

まずはファビコンをつくろう

上に書いたように、ファビコンは16px×16pxの正方形です。しかし、このサイズのアイコンをつくるのって意外と難しいんですね。なにかを表現しようとするには小さすぎるからです。色の濃淡を上手く使わないと、簡単な文字もカクカクした感じになってしまいます。本職のデザイナーさんでも不得手な人には嫌な作業だと思います。

これを解決してくれるのが、「favikon」という無料で使えるファビコンジェネレーターです。フロリダにあるA Beautiful Siteという会社が提供しています。

favikonfavikon · A favicon generator

これを使うと、大きいサイズの画像を正方形に切り抜いて、自動的に16px×16pxに縮小することができ、縮小した画像は.icoもしくは.pngでダウンロードすることができます。僕はIllustratorで200px×200pxでつくったpng画像を使ってファビコンをつくりました。

手順は本当に簡単で、

  1. 「ファイルを選択」から使いたい画像をアップロード
  2. アップロードされた画像が表示されるので、切り抜く範囲を選択
  3. 「Download ICO」もしくは「Download PNG」をクリックして好きな形式でダウンロード

たったこれだけです。

つくったファビコンを設定する

次に、つくったファビコンを設定しましょう。本来はHTMLのhead内に下記のように記述することで設定を行います。

<link rel=”shortcut icon” href=”favicon.ico”>

まぁこれでも大して面倒ではないんですが、すごく簡単に設定ができて、ついでに管理画面のファビコンも変更できるプラグインがあったのでご紹介します。それがAll in one Faviconです。

All in one Favicon

WordPress › All In One Favicon « WordPress Plugins

こちらも手順は簡単で、

  1. 上記プラグインをインストールして、有効化する
  2. 管理画面で「設定>All in one Favicon」にアクセス
  3. ウェブサイト(Frontend)、管理画面(Backend)それぞれのアイコン(ICO)をアップロードして、設定する。僕は同じのにしてます。

ファビコンの設定についてはこれで完了です。ウェブサイトと管理画面をリロードしてみて、反映されているか確認してください。

ちなみにこのAll in one Faviconでは、ついでに「Apple Touch Icon(iOSデバイスでホーム画面に保存したときのアイコン)」も設定することができます。こちらは144px×144pxのものを設定しておけば、最新のiPadからiPhoneまで対応することができます。

touchicon

こんな感じです。

まとめ

元になる画像をひとつ用意しておけば、「favikon」+「All in one Favicon」を使えば5分もかからず設定を終えることができます。こりゃ楽です。

ファビコンってそのウェブサイトを識別してもらう上でけっこう大事な要素なので、なるべく設定するようにしましょう!


このブログに掲載されている写真は2013/05/24以降はRICOH GR、それ以前はRICOH GR DIGITAL IIIで撮影されています。


カテゴリ : BLOG WEB WORDPRESSこのブログをRSSで購読する