今日もガクリ('A`)
きっと明日もまたガクリ?('A`)
favicon.ico の怪

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 属性の値は URIURI だから URL も含んでるよな…んじゃぁ URL スキームだと何でもいいんじゃないか?だったら data: スキーム 1 でも表示できなければオカシイんじゃないか?

そう思い、早速、適当に用意したアイコンを 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`)
favicon.ico の例 ('A`)

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

  • link 要素の rel 属性は shortcut icon よりも icon と記述したほうが良いらしい 3
  • link 要素の type 属性に指定する MIME タイプは image/x-icon よりも IANA に登録されている image/vnd.microsoft.icon の方が良いらしい 3
  • link 要素の href 属性の値のファイル名は favicon.ico でなくてもよい 3
  • Firefox では ICO 形式に加えて PNG, GIF 形式も表示できるらしい 3
  • 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 を参照
softwarecomments (0)trackbacks (0) – pingbacks(0) – (7,647)
feel free of the comment please.

trackback URL of this article
QRcode of this article
qrcode:article
more information of this article

post date

2008年02月03日(日) 01:23:43

update

2008年02月08日(金) 03:21:34

tags

contents
most viewed (1213886)
categories
archives
recent posts
recent updates
recent comments
recent trackbacks
912T ASUSTeK ASUSTeK Crosshair IV Extreme blog CSS DARK SOULS DARK SOULS 3 Darksouls3 DarksoulsIII DARK SOULS III DISM Euro Truck Simulator 2 Everquest II firefox foobar2000 game Install internet KB2990941 KB3087873 mod panels ui PCゲーム PHP PX-Q3PE Raid skin SoftBank software SpeedFan Spinel Steam TPS trailer truck TvRock TVTest Windows Windows 7 Win Toolkit WordPress インストール ダークソウルズ 初音ミク 窓辺ななみ
mobile
qrcode:home
profile
曇り札幌市中央区 ‘ 曇り
気温: 10℃ ‘ 湿度: 66%
recommends
Valid XHTML 1.0 Transitional Valid CSS X.X
RSS 2.0 RSS 0.92
RDF/RSS ATOM
get Firefox 2 get Opera
ie