ファビコンをまだ設置していなかったので設置してみました。当サイトはまだまだ細かい部分まで手が行き届いてないので、少しづつでも手を加えて改善していければいいなと思っています。あと今日で今年が終わりですね。今年は時間が経つのがとても早かったのであっという間に終わってしまいました。そういえば前に働いていた会社の上司から、「時間が経つのが早いって感じるのは頑張っている証拠だ」って言われたことを思い出しちゃいました。来年は今年以上に時間の経つスピードを早く感じれるように努力していきたいです。
[ads_center]
favicon.icoを作成
通常ファビコンで使うファイルの形式はicoを使用します。今回は以下のサイトで作成しました。
ファビコン作成。favicon.ico 無料で透過マルチアイコンが作れます。
こちらのサイトでは16px、32px、48pxと各種サイズで作成できます。ブラウザで表示されるサイズは16pxなのですが、デスクトップにショートカットを置いた場合は32pxになるみたいなので、今回は32pxを作成してみました。ちなみにファビコンは正式名称「Favorite icon(フェイバリット・アイコン）」というみたいです。翻訳すると「お気に入りアイコン」です。
設置の仕方
ファビコンを設置するのはとても簡単です。icoファイルをアップロードしたらhead内に以下のコードを記述します。
<link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/vnd.microsoft.icon" /> <link rel="icon" href="http://example.com/favicon.ico" type="image/vnd.microsoft.icon" />
WordPressでimagesフォルダに画像を入れた場合はこんな感じですかね。
<link rel="icon" href="<?php echo get_template_directory_uri(); ?>/images/favicon.ico" type="image/vnd.microsoft.icon" /> <link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/favicon.ico" type="image/vnd.microsoft.icon" />
また、アイコンのMIMEタイプは正しく指定する必要があるみたいです。以下引用です。
ウェブサーバ側ではアイコンのMIMEタイプを正しく指定する必要がある。なお、ICO形式ではimage/vnd.microsoft.iconである（代わりとして、また互換性問題としてimage/x-iconを指定する場合もあるが、IANAに登録された標準的なMIMEタイプを用いることが望ましい）。
引用元：Favicon – Wikipedia
これで簡単にファビコンを設置できました。
ファビコンを設置してくれるプラグイン
自分で弄るのがめんどくさい場合はプラグインもあるのでそれを使えばとても楽に設置できます。
Multicons
こちらのプラグインを使えば管理画面やiPhoneのホーム画面にブックマークした時なんかにも簡単にファビコンを設置することもできます。
使い方
プラグインをダウンロード、または管理画面からインストールして有効化します。管理画面の「設定」の中に「Multicons」という項目が追加されているのでそれをクリックします。Website FaviconというところがあるのでそこのFavicon URLにファビコンの画像を置いてあるURLを入力します。
管理画面でもファビコンを表示させたい場合は下にあるDashboard Favicon URLにも同じように入力すれば、表示されるようになります。
また、Apple Touch Icon URLという項目があるんですが、ここにもURLを入れるとiPhone等でサイトをホーム画面に追加した時に自分のファビコンが表示されます。例えば、普通にここのURLを空にした場合ホーム画面に登録してみるとこのようなアイコンで表示されます。
そして、URLを入力してもう一度ホーム画面に登録してみると。
このように指定したURLのファビコンがアイコンになります。これは結構いいですね。まあこのブログは奇跡が起こらない限り追加されることはないかと思いますが…w
吐き出してるソースを見てみると以下のようなコードが追加されています。
<link rel="apple-touch-icon" href="http://example.com/favicon.ico" />
なので、もしプラグインを使いたくなければこれをhead内に追加してあげるといいかと思います。
終わりに
こんな感じで色々とファビコンを設置する方法があるので、まだ設置していない人はこれを機会に設置してみるのもいいかもしれません。ということで今年一年ありがとうございました。来年もよろしくお願いいたします。
