ファビコン favicon

ブラウザのお気に入りやブックマークのリストのアドレスの前に付いているマークの「ファビコン」、英語読みなら「ファヴアイコン」とはFAVORITE ICON(お気に入りアイコン)のことです。

「 もともとはInternet Explorer(IE)の独自拡張として実装されたのですが、Firefoxなど他ブラウザでもこれに倣ったので現在は標準となっている。 」そうですが、IE6で表示されるファビコンはIE6.0では表示されません。

ブラウザはIE以外にFirefoxも使用している私は、ものは試しと映画と音楽のブログ「Audio-Visual Trivia」のアドレスの前にアイコンを付けてみることにしました。

作り方を参照してみると、
「 独自のico形式の画像ファイルを用意して、ページのあるディレクトリかその上位のディレクトリに「favicon.ico」というファイル名で置く 」
とあるので先ずはアイコンを作りました。

「Audio-Visual Trivia」のマークに使用している画像を縮小してみました。カンで適当に20ピクセルにしたのですが最適は16ピクセルだそうです。
が、ファイル名は”.ico”ではなく”.jpg”です。”.gif”の方が綺麗だったなと後から後悔。
いやそんなことじゃなくて、「 最近のブラウザではGIF形式もサポートするようになった 」とあるではないか! 私は”.jpg”のままなんだからどうなる?

その縮小画像をサーバーにアップして置いてから、テンプレートにHTMLタグを書き込みます。
タグは<>内に、link rel="shortcut icon" href="icoファイルのアドレス"とか、link rel="shortcut icon" href="画像ファイル名.ico"と書くそうなので、それをhead/headの中に入れます。

私はファビコンなのにサイズも中途半端な20ピクセルの”.jpg”のまま、取り合えず<>の中にlink rel="shortcut icon" type="image/hana_s" href="http://www.audio-visual-trivia.com/hana_s.jpg" /と入れてheadの後に書き加えてみました。 なんと、私にはFireFoxでは見えていますよ! サーバーに負担がかかってるのかな?
「 hrefで指定するときはアイコン名がfavicon.icoでなくても構わない 」とも記されていますが、Internet Explorerは駄目らしいです。
適切な解像度と色数を用いる必要があるとか、やはり16pxelにしてgifファイルにした方がどのブラウザでも通用するので最適でしょうね。 後で直します。
テンプレートはメインページからアーカイブページと漏れなく書き込んだつもりだったのですが、あれ?検索結果のページにはファビコンが表示されていません。後で直します。

Audio-Visual Triviaのファビコン
b0002123_11132181.jpg
(クリックで拡大)


☆ところが作った後から知ったのですが、ファビコン用にファイル形式を変換してくれるサービスがあるそうです。 なんでぃ、なんでぃ! こりゃ便利だわい! 後でやり直してみましょう。


FavIcon from Pics - html-kit.com
”Source Image”のボックスで参照をクリックすると自分の画像フォルダが開くので適当な画像を選び”Generate FavIcon.ico”ボタンをクリック。”Preview”画像が左下に出ますがさらに”Test in Browser”ボタンで実際のアドレスバーでのマークを確認できます。それで納得したらダウンロードするそうです。

※ちなみにエキサイトブログには全てエキサイトのファビコンが付いていますから自分のファビコンは使えません。第一、今ではエキサイトのテンプレートを書き直すことも出来ません。

favicon.icoのサイトを見つけました。実験的に「Yahoo!カテゴリ」を例にたとえていますが、エンターテインメント>映画>評論、レビュー>に私のブログ「Audio Visual Trivia」もあるのですがファビコンは表示されていません。やはりまともに制作してないからでしょう。
Faviconico.Net

追記:
その後、jpgの画像を20ピクセルから正規の16ピクセルに変更し拡張子も”ico”でやり直しました。するとFirefoxでは表示されるのにIEでは駄目になりました。画像の拡張子がjpgの時は両方で表示されたのに。タグを両方書けば良いかも。

今回のトップページのタグは一つ↓
<link rel="shortcut icon" type="image/hana_s" href="http://www.audio-visual-trivia.com/画像.jpg" />

アーカイブページのタグは二つ↓
<link rel="icon" href="http://www.audio-visual-trivia.com/画像.ico" type="image/vnd.microsoft.icon" />
<link rel="shortcut icon" href="http://www.audio-visual-trivia.com/画像.ico" type="image/vnd.microsoft.icon" />

にしてみましたが、Firefoxでのみ表示されます。


その後、
<link rel="shortcut icon" type="image/hana_s" href="http://www.audio-visual-trivia.com/画像名.ico" />
<link rel="shortcut icon" type="image/hana_s" href="http://www.audio-visual-trivia.com/画像名.jpg" />
に変更してみました。Firefoxでのみ表示されます
(注! 上記の<>はあえて全角にしてあります。)
[PR]
by koukinobaaba | 2008-02-20 00:01 | 面白記事
<< かぐら坂 うなぎの志満金 グラハム・カーの<世界の料理シ... >>