Web Information

今年(2011)最後に自分のWebサイトのファビコンを作成して設置してみる

ファビコンをまだ設置していなかったので設置してみました。当サイトはまだまだ細かい部分まで手が行き届いてないので、少しづつでも手を加えて改善していければいいなと思っています。あと今日で今年が終わりですね。今年は時間が経つのがとても早かったのであっという間に終わってしまいました。そういえば前に働いていた会社の上司から、「時間が経つのが早いって感じるのは頑張っている証拠だ」って言われたことを思い出しちゃいました。来年は今年以上に時間の経つスピードを早く感じれるように努力していきたいです。

[ads_center]

favicon.icoを作成

通常ファビコンで使うファイルの形式は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

これで簡単にファビコンを設置できました。

ファビコンを設置してくれるプラグイン

自分で弄るのがめんどくさい場合はプラグインもあるのでそれを使えばとても楽に設置できます。

こちらのプラグインを使えば管理画面やiPhoneのホーム画面にブックマークした時なんかにも簡単にファビコンを設置することもできます。

使い方

プラグインをダウンロード、または管理画面からインストールして有効化します。管理画面の「設定」の中に「Multicons」という項目が追加されているのでそれをクリックします。Website FaviconというところがあるのでそこのFavicon URLにファビコンの画像を置いてあるURLを入力します。

Multicons

管理画面でもファビコンを表示させたい場合は下にあるDashboard Favicon URLにも同じように入力すれば、表示されるようになります。
また、Apple Touch Icon URLという項目があるんですが、ここにもURLを入れるとiPhone等でサイトをホーム画面に追加した時に自分のファビコンが表示されます。例えば、普通にここのURLを空にした場合ホーム画面に登録してみるとこのようなアイコンで表示されます。

Multicons iPhone設定前

そして、URLを入力してもう一度ホーム画面に登録してみると。

Multicons iPhone設定後

このように指定したURLのファビコンがアイコンになります。これは結構いいですね。まあこのブログは奇跡が起こらない限り追加されることはないかと思いますが…w
吐き出してるソースを見てみると以下のようなコードが追加されています。

<link rel="apple-touch-icon" href="http://example.com/favicon.ico" />

なので、もしプラグインを使いたくなければこれをhead内に追加してあげるといいかと思います。

終わりに

こんな感じで色々とファビコンを設置する方法があるので、まだ設置していない人はこれを機会に設置してみるのもいいかもしれません。ということで今年一年ありがとうございました。来年もよろしくお願いいたします。

関連記事

  1. Web Information

    Google検索を英語だけの結果で表示させる簡単な方法

    Google検索をする時に日本であまり情報が少ないものを検索することが…

  2. Web Information

    上質なjQueryプラグインをカテゴリー別に探したい時に便利なサイト「jquer.in」

    とてもよさそうなサイトだったのでメモがてらご紹介します。jQueryの…

  3. 新刊チェッカー for Kindle

    Web Information

    Kindleの最新情報(セールや新刊)が分かるiPhoneアプリ「新刊チェッカー for Kindl…

    Kindle(キンドル)のセールや新刊などの最新情報をiPhoneから…

  4. RollPaper

    Web Information

    Webページのスクリーンショットを上から下まで全体を撮れるiPhoneアプリ「RollPaper」

    Webページのスクリーンショットを上から下までの全体を1枚の画像で保存…

  5. ブラウザをメモ帳にするやり方

    Web Information

    ブラウザのURL欄に一行入力するだけでメモ帳にすることができる

    とてもおもしろかったのでご紹介。ブラウザのURL欄にたった一行入力する…

  6. タブの順番を入れ替える

    Web Information

    iPhoneのSafariで複数あるタブの順番を入れ替える(並べ替え)やり方

    iPhoneのSafariでブラウジングしているといつの間にかタブがた…

コメント

  1. この記事へのコメントはありません。

  1. 2012年 6月 28日

最近の記事

  1. 梅の花
  2. 三菱ブレッドオーブン
  3. 浜離宮恩賜庭園

アーカイブ

PAGE TOP