2005年6月22日 20:43

ブックマークアイコン(favicon.ico)

今日は、移転とは直接関係ないですが、
移転のついでに設定したブックマーク用のアイコンについて、です。
移転後の当サイト内のページをブラウザのブックマークに入れたとき、
こんなアイコンが表示されているかもしれません。

favicon 16かける16 16×16 favicon 32かける32 32×32

また、ブラウザによっては、
ツールバーの、アドレスの横あたりにもこのアイコンが出ているかもしれません。
これが、「favicon.ico」というものです。

FF11を象徴する「タルタル♂」のシルエットの上に、
音楽を象徴する「音符(♪)」を重ねてみました。
シンプルなデザインを考えてみましたが、
なかなかつらいところです。
16×16ピクセルの世界では、シンプルな色調より、色を豊富に使ったほうが
見た目にわかりやすいのかもしれません。

作成と設置方法ですが、
自分の場合は、普通にBMPファイル(PNG,PSDなども可)として作成した16×16サイズの画像を、
@icon変換」でアイコン形式に変換して作成。
ファイル名を「favicon.ico」にして、
アイコンを使いたいサイトやページを含むいちばん上のディレクトリに設置すれば完了。
(例: http://minstrel.squares.net/photo/favicon.ico に置けば、
http://minstrel.squares.net/photo/ 以下のすべてのページに反映される)
ページごとに違うアイコンを使いたい場合は、<head>の中で、
<link rel="shortcut icon" href="http://minstrel.squares.net/使いたいアイコン.ico">
という感じで各々設定すればよいです。

また、アイコンファイルというのは、
1つのファイルに複数の画像を含むことができるので、
16×16ピクセルに加えて32×32ピクセルの画像(↑の画像がそれ)を含むことで、
大きなアイコンが使用される場面でもきれいに表示できたりします。

これ、もともとはWindowsでのInternet Explorer用の仕様だったのですが、
現在はFirefoxやOpera、Mac OSX用のブラウザなどでも一部対応しています。
今のところ、ブックマークアイコンを設定しているサイトはまだあまり多くないので、
設定しておくと、ブックマークがたくさん並んでいるときにも
自分のサイトを目立たせることができるかもしれません(笑)

それはそれとしても、
やっぱり文字のサイト名だけでなく、アイコンが並んでいたほうが、
ぱっと見に、目的のブックマークを見つけやすくて良いのではないかと。

参考文献:
Webビジネスコンサルタントのネタ帳: favicon.icoの解説と注意
Favicon Japan

トラックバック(0)

トラックバックURL: http://minstrel.squares.net/MT/mt-tb.cgi/1816

コメント(2)

またしても、遅ればせながらのコメントで恐縮です。
この機能は気づきませんでした。
この日記を読んでから、Winで調べてみたら、おいらのブックマークされてるサイトで多少このアイコンを使っているサイトがありました。ほぼ大手のサイトですが^^;
おいらも、MacでもOSXだと一部この機能使えますねヽ(´ー`)ノ

時間を見て、おいらもまねっこしてみます(☆∀☆)

そうですねー、大手のサイトなどは設定されているところも多いですが、
簡単に真似ができるのでやってみようかなーと。
Macの対応状況は微妙なのですが、
アイコンつきPooh:logさんも楽しみにしてますー。