WWW ブラウザを Firefox 2 に変更してからブックマークなどで favicon.ico が表示される様になったのですが、自分のブログにも favicon.ico を設置したいと思いましたが、以下に示す様な JUGEM 側の制約があるので、ちょっと考えてみました

• サーバーにアップできるのはフォームから入力する記事とテンプレート、それと画像ファイル
• アップできる画像ファイルは PNG, JPEG, GIF の 3つの形式のみ

この件で検索すると、かなりの対策案がヒットするのですが、どれも同じような対策案ばかりで捻りがありません。結局のところ、他のレンタルサーバーを借りてそこを参照するという方法ばかり…実際の所、どの様な仕組みで UA は favicon.ico を読み込んでいるのか？ 多分以下のような方法だと思うが…

• ドメインのルートディレクトリから favicon.ico を取得
• HTML の link 要素の href 属性の値から favicon.ico を取得

読み込む順番などは調べてないので解りません…('A`)

HTML に記述する場合は以下の様に head 要素の直接の子要素として記述します。XHTML の場合は以下の様に記述します

<link rel="icon" type="image/vnd.microsoft.icon" href="favicon.ico の URI" />

HTML の場合は以下の様に記述します

<link rel="icon" type="image/vnd.microsoft.icon" href="favicon.ico の URI">

rel 属性の値は icon, shortcut icon どちらでもいい様です

ん？ href 属性の値は URI…URI だから URL も含んでるよな…んじゃぁ URL スキームだと何でもいいんじゃないか？だったら data: スキーム ¹ でも表示できなければオカシイんじゃないか？

そう思い、早速、適当に用意したアイコンを URL エンコード して HTML ヘッダの link 要素を以下の様に追加して記述

<link rel="icon" type="image/vnd.microsoft.icon" href="data:image/vnd.microsoft.icon,%00%00%00…(長ったらしいので省略)" />

CTRL + R を押してブラウザをリロード…

favicon.ico の例 ('A`)

ちょッ…コレ…ほんとに表示されたよ…('A`) このままではアレ <sup>2</sup> なんで表示できる事が確認できたので、取り敢えず削除しました。現在はまともなアイコンが表示されているはずです。以上の方法だと HTML に埋め込める事ができ、サーバーに対しても接続リクエストが増えないので良いと思います…が！しかし、困った事に IE は URL の data: スキームを理解しないので表示されません…('A`) 今の所、私が検索して調べてみたり、やってみて解った事を纏めてみました

• link 要素の rel 属性は shortcut icon よりも icon と記述したほうが良いらしい ³
• link 要素の type 属性に指定する MIME タイプは image/x-icon よりも IANA に登録されている image/vnd.microsoft.icon の方が良いらしい ³
• link 要素の href 属性の値のファイル名は favicon.ico でなくてもよい ³
• Firefox では ICO 形式に加えて PNG, GIF 形式も表示できるらしい ³
• IE は URL の data: スキームを解釈しない
• Opera (9.25 で確認しました) は URL の data: スキーム中の MIME タイプを image/x-icon としなければ表示しない

記事を書いている最中、確認作業なんかも行いながら気付いたんですが、最初に書いた JUGEM の制約もクリアできそうな感じですね…めんどくさくなってやってませんが…('A`) その内、暇を見つけて確認作業を行いたいなと思ってます…その前に favicon.ico の表示自体をやめそうですが…('A`)

もともと、この機能に関しては IE は一番最初に実装したのにも関わらず、現在の所は機能、実装においては Firefox 2 が最も良いという皮肉な事になっている様です…

1. RFC2397 を参照 (私的和訳らしい…)
2. 私のサイトにはこの様なファンシーかつキュートなアイコンは似合わないと思います…('A`)
3. Favicon - Wikipedia を参照