まきこみ計画

URLの左側にアイコンを表示させました

ブラウザに表示されるURLの左側に，Faviconと呼ばれる画像（アイコン）を表示させるようにしてみました．Firefoxにだけ対応させるなら簡単なのですが，IEでも表示させようとすると工夫が必要です．ちなみにこれをやると，お気に入り登録されてあるサイト名の左側にもアイコンが表示されるようになります．もしあなたが「まきこみ計画」をお気に入りに入れていれば，その名前の左側に緑色のアイコンが表示されているはずです．

FaviconをIEでも機能させる方法を以下に簡単に書きます．というか自分用のメモですがw．メモ代わりのエントリーだし，僕もそんなに詳しいわけではないので，”基本的には”質問に答えない予定です．

1. 画像の作成
画像処理ソフトで自分の好きなデザインのアイコンを作成します．AdobeのPhotoshopなどでもいいのですがいちいち重いので，今回僕はフリーソフトのPictBearを使いました．「新規作成」で256×256のサイズを選択し，まず背景を緑色に塗りつぶしました．次にテキストモードで「ま」を描きました（新規レイヤーを選択）．

2. 画像の保存
IEでFaviconを表示させるには，実はここがポイントです（だと思います）．画像を保存する際に「ファイルの種類」で「Windows Icon」を選択します．ここでもし「png」や「jpg」を選択すると，後々うまくいかないみたいです（自信ないですが）．

3. 画像の変換
Windows Icon形式で保存したファイルをFaviconへ変換します．今回はムチャクチャ簡単な方法で行いました．FavIcon from Picsは，自作した画像ファイルをFavicon形式に自動変換してくれるサイトです．英語のサイトですが手順が簡単なので，英語が分からなくても変換作業が行えます（詳しくは後述）．このサイトを使用する一番のメリットは「作業の簡素化」が図れることですが，その他にも，1つの画像に16×16と32×32の2サイズの情報を埋め込んでくれるという点も魅力なのです（詳しくはこちら）．

具体的な変換の手順ですが，まず「参照」をクリックして変換したい画像を選択してください．その後「Generate FavIcon.ico」をクリックします．以上です．これで自作した画像がFavicon形式に変換されました．あとは切り替わった画面にある「Download FavIcon」をクリックすれば，zip形式でFaviconがダウンロードできます．

4. Faviconのアップロードとhtmlの設定
ダウンロードしたzipファイルを開くと，Faviconの他にextraというフォルダが1つあるはずです．しかしフォルダに入っているファイルは無視してかまいません．フォルダに入っていないFaviconを自分のサーバにアップロードしてください．アップロード先はルートディレクトリがいいです．html側の設定は簡単です．ファイルを開きheadタグの間に以下の一行を追加するだけです．

<link rel="shortcut icon" href="favicon.ico">

5. 設定の確認
ブラウザがすでに開かれている場合は，一度閉じてから自分のサイトを開いてください．URLの左側にFaviconが表示されているはずです．また「お気に入り」のサイト名の左横にもFaviconが表示されていると思います．ちなみに僕のブログは，IEの場合に限ってですが，個別エントリーのURLにはFaviconが表示されたりされなかったりします．この辺りの原因はよく分からないのですが，今のところはまあ良しとしています．