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. New Tab Redirect

    Web Information

    Chromeの最初の画面(新規タブ)をアプリ一覧にする設定方法

    Chromeで新規タブを開いた時などに表示される最初の画面をアプリ一覧…

  2. Responsive Inspector
  3. Web Information

    自分のGoogleアナリティクスコードが勝手に他人のサイトで使われていた時の対処方法

    昨日ふとGoogleアナリティクスを見ていたら、自分の知らないページが…

  4. Chromeで翻訳する方法

    Web Information

    Chromeで外国語のWebサイトのページを翻訳する方法

    Chromeで普段使用する言語以外の外国語のWebサイトにアクセスする…

  5. 常用漢字筆順辞典

    Web Information

    読み方がわからない漢字を手書きで調べれるiPhoneアプリ「常用漢字筆順辞典」

    常用漢字筆順辞典という読み方がわからない漢字を調べる際にとても役立つi…

  6. Googleブログ検索

    Web Information

    Googleブログ検索がなくなったと思ったらまだちゃんとあった

    Googleブログ検索を検索結果ページから絞り込んでよく利用していたん…

コメント

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

  1. 2012年 6月 28日

最近の記事

  1. 田沢湖
  2. ゴムの耳栓
  3. ライオンコーヒー(バニラマカダミア)
PAGE TOP