この記事を読むのに必要な時間:01分31秒
ファビコン（favicon）って知ってますか？
ファビコンとは…
Favorite icon(フェイバリット・アイコン）の略で、IEやGoogle Chromeなどのブラウザのアドレスバーに出るアイコンのことです。
みなさんも見たことあると思います。
こういうのです。
ちなみにこのファビコンは、ブックマークのアイコンにも使われます。
ファビコンのメリット
ファビコンを設定するメリットは単純に目立つから。最近は、タブブラウザが増えてきました。
ですので、いくつもタブを開いて、あっちのサイトに行ったり、こっちのサイトに戻ってきたりと、複数のタブを行ったり来たりしながらネットサーフィン（最近言わない？）する方が増えていると思います。
たくさんタブを開くので、戻りたいのに戻って来れない方もたくさんいます。
そんなときの目印になるんですね。
ブックマークも一緒です。
ファビコンを設定しておくことで、見つけてもらいやすくなります。
ファビコンの画像はシンプルなものを
まず、設定する画像ですが、ファビコンは16ピクセル✕16ピクセルと、とても小さいので、あまり細かい画像は向いていません。僕も最初は、似顔絵イラストを設定する予定だったのですが、細かすぎてなんだかよくわからないものになってしまいました。
ですので、ファビコンには単純な画像を用意してください。
GoogleやYahoo!、Bingを見ると、とてもシンプルです。
作成サイズは、32ピクセル✕32ピクセルで
ファビコンの表示サイズは、16✕16ですが、IEでショートカットを作成されたときもこのファビコンが適用されるので、（まあショートカットが作成される可能性はあまりないかもですが…）32ピクセル✕32ピクセルで作っておきましょう。
保存形式はicoで
ファビコンは、gifやpngでも表示されるのですが、IE（インターネット・エクスプローラー）ではサポートされていないようで表示されません。IEのシェア率は、まだまだ相当ありますので、ここは、王道のicoでいきましょう。
png等で画像を用意したら、icoに変換してくれるサイトに行きましょう。
「ファビコン 作成」とかで検索すると、無料で変換してくれるサイトがたくさん出てきますが、僕はこのサイトを使わせてもらいました。
▶http://ao-system.net/favicon/index.php
※クリックで拡大
「ファイルを選択」で画像を選択したら、「favicon.ico作成」、「ダウンロード」これだけです。
favicon.icoをサーバーにアップロード
ダウンロードしたら、サーバーのルートディレクトリ（一番上の階層）にアップロードします。ブラウザで確認
ここまで完了したら、一度ブラウザで確認してください。IEでのチェックも忘れずに。
ルートディレクトリにファビコンを設置できない場合
ルートディレクトリに設置できない場合や、ディレクトリごとに違うファビコンを表示させたい場合は、<head>内に以下の記述をすればOKです。ルートディレクトリに設置したのにも関わらず表示されない場合も、こちらの方法を試してみてください。
<link rel="shortcut icon" href="http://www.example.com/image/favicon.ico" />※URL（http://www.example.com/image/favicon.ico）は適切なものに変更してください。
WordPress（ワードプレス）でアイコンを出す方法
favicon.icoを使用中テーマのメインディレクトリに設置します。ちなみに僕は、
「wp-content」→「themes」→「twentyten」内にアップロードしました。
そして、header.phpの<head>内に以下の記述を追加します。
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" />
これでアイコンが表示されると思います。
まあ、そこまで劇的な効果があるとは思いませんが、簡単に設定できるので、お遊び感覚でやってみてもいいかもしれません。
いつもありがとうございます！
Pingback: Favicon 設定 | A Skill
Pingback: 美しいfaviconを作成するために覚えておきたい10のコツ | NESTonline Blog
Pingback: 【作業時間10分】パワーポイントを活用したブログのファビコン作成方法 | まとめてランキング.jp
Pingback: 初心者の僕がホームページを作成！オススメの方法とデザイン紹介します - ムクッといこう