« ホームページが・・・消えた (T_T) | トップページ | テラノ15万km到達! »

2009/11/28

ブックマークに専用アイコンを表示させよう

ブックマークさせて頂いている色々な方のホームページへアクセスした際、ブックマークやブラウザのアドレス欄に見かけるアイコンを、自分のページにも付けてみたい。と言うことで、Favicon(Favorite Icon)の設置にチャレンジしてみました。

手順は以下のとおりです。
1.画像を用意する
私の場合は愛車CBR1000Fの96'年式の画像ファイルを用意しました。出来上がるIconは正方形ですので、用意する画像もその辺りを考慮して用意します。ただし、長方形の画像であっても、正方形に変換されるので、意外とデフォルメされて面白い画像になる事もあります。今回の場合も、横長の長方形の画像を用意しました。

2.Icon形式に変換
用意した画像ファイルを、Iconへ変換してくれるページで変換します。そうしたサイトやプログラムはいくつかあるようですが、私は『FavIcon from Pics』を利用しました。通常、faviconは16×16ピクセルで作成・表示されますが、ここでは32×32ピクセルや48×48ピクセルで作成してくれる他、動画のIconも一緒に作成してくれます。その他、利用できる画像の大きさは150kBまでですが、『FavIcon Generator』なども操作が簡単でお勧めです。

3.faviconをアップロードする
Iconへ変換したfavicon.icoを、FTPからバイナリモードで、ホームページトップと同じ場所(階層)にアップロードします。

4.HTMLのヘッダ部分(テンプレート)にタグを書き込む
ホームページトップのヘッダ部分の<head>から</head>の間に以下のタグを書き込みます。

<link rel="shortcut icon" href="favicon.ico" />
  ※ 上記の「<>」は半角の「<>」へ変更してください。

なお、ホームページトップ以下のページは、全て同じIconが表示されます。ページによって違うIconを表示させたい場合は、それぞれのページへタグを書き込みます。もちろん、ダクの「favicon.ico」の部分とiconの名前は一致させてください。

以上です。内容的にはとっても簡単です。うまく表示されると、以下の通りに表示されるはずです。
Photo


ただし、IEでは正常に表示されない事があるらしいです。IEのキャッシュ機能が邪魔をしているらしいので、そんな方は以下の手順を試してみてください。
 1.Faviconを表示させたいサイトをお気に入り(ブックマーク)から消す
 2.キャッシュファイル(インターネット一時ファイル)をすべて削除する
 3.履歴をすべて消す
 4.IEを起動し直す
 5.サイトにアクセスし直して、お気に入りに再度入れる
 6.もう一度IEを起動し直して、お気に入りから目的のサイトにアクセス

自分でもとってもお気に入りのFaviconが出来ました。私のホームページにはバイクの他にテラノや写真のページもありますので、それぞれ別々のFaviconを用意するのも楽しいかもしれません。でも、とりあえず今はこれで大満足です。

今度はブログでもチャレンジする予定です。

|

« ホームページが・・・消えた (T_T) | トップページ | テラノ15万km到達! »

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/86953/46883186

この記事へのトラックバック一覧です: ブックマークに専用アイコンを表示させよう:

« ホームページが・・・消えた (T_T) | トップページ | テラノ15万km到達! »