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内に追加してあげるといいかと思います。

終わりに

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

jQueryでウィンドウサイズによって処理を変えるjQueryで要素を挿入できるメソッドがたくさんあるので整理してみた前のページ

VMware Fusion 4でWindows7をインストールしてみた次のページ

関連記事

  1. Feedlyでカテゴリーのフォルダ名を変更

    Web Information

    Feedlyでカテゴリーのフォルダ名を変更するやり方

    Feedlyでカテゴリーのフォルダ名を変更するやり方をメモしておきます…

  2. さくらレンタルサーバーからエックスサーバーへの移転手順

    Web Information

    さくらレンタルサーバーからエックスサーバーにWordPressを移転する手順

    自分が管理運営している、あるWordPressサイトのサーバー移転が無…

  3. CSSViewer

    Web Information

    特定の要素のCSSを手軽に確認できるChrome拡張機能「CSSViewer」

    CSSViewerというChrome拡張機能を使ってみました。特定の要…

  4. Web Information

    Google +1(プラスワン)ボタンを今更ながら設置してみた

    当ブログには現在Twitter、Facebook、はてなブックマークの…

  5. Web Information

    Yahoo!知恵袋もRSS登録することができるだっていうのを最近知った

    Yahoo!知恵袋もRSS登録することができるんですね。最近知りました…

  6. グラデーションクリエーター

    Web Information

    カラフルなグラデーションのCSSを作成できるChrome拡張機能「グラデーションクリエーター」

    グラデーションクリエーターというChrome拡張機能を使ってみました。…

コメント

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

  1. 2012年 6月 28日

最近の記事

  1. CAR-HLD12BK
  2. OWL-LPB6701LA
  3. cheero Power Mountain mini 30000mAh CHE-110

アーカイブ

PAGE TOP