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

    タイポグラフィを向上させるjQueryプラグイン15

    テキストやタイポグラフィに関する機能を向上させてくれる15のjQuer…

  2. Amazon.co.jpのほしい物リストに追加

    Web Information

    Amazon以外のサイトからでもAmazonのほしい物リストに追加できるChrome拡張機能

    ちょっと便利そうだったのでインストールしてみました。普段Chromeを…

  3. Web Information

    iPhone版Chromeアプリで自動で飛ばされるスマホ専用ページをPCページで表示させるやり方

    個人的にとても便利な機能だったのでメモがてらご紹介します。iPhone…

  4. 常用漢字筆順辞典

    Web Information

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

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

  5. Adobe Creative Cloud Cleaner Tool

    Web Information

    AdobeのCreative Cloudでインストールトラブルが起きた時は「CS Cleaner T…

    AdobeのCreative Cloudでインストールトラブルが起きた…

  6. Web Information

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

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

コメント

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

  1. 2012年 6月 28日

最近の記事

  1. 久保田城
  2. ハードサイド CS80
  3. ACC-TRBX
  4. ピスタチオ クリスマス ツリー フラペチーノ

Instagram始めました

Facebookページ

PAGE TOP