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

    iPhoneの「選択項目の読み上げ」機能を使ってテキストやメモを音声で聞くやり方

    iPhoneでもテキストやメモを選択して音声で聞くことができるっていう…

  2. Macでcommand + Zを元に戻す

    Web Information

    Macでcommand + Zで戻ったものを再度元に戻すショートカットキー

    何気にこれは覚えておくべきだなーと思ったので、メモがてらご紹介します。…

  3. Web Information

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

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

  4. Evernoteでノートブック削減

    Web Information

    Evernoteでノートブックを削減する方法

    Evernoteのノートブック削減の仕方でちょっと戸惑ったのでメモがて…

  5. Responsive Inspector
  6. Web Information

    iPhone版Pocketで横スクロールした際に次の段落まで飛ぶ機能を無効にするやり方

    iPhoneのPocketが好きで、個人的に結構使ってるんですが、横ス…

コメント

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

  1. 2012年 6月 28日

最近の記事

  1. スタンスミス(EDIFICE/IENA別注)
  2. WI-1000XM2
  3. mill オイルヒーター
  4. Anker PowerWave 10 Pad & Stand セット

アーカイブ

PAGE TOP