今日もガクリ('A`)
きっと明日もまたガクリ?('A`)
2008 / 02
« «  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29  » »
archive for 2008年02月03日(日)
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 を参照
softwareno commentsno trackbacks(5,205)
contents
most viewed (753303)
categories
archives
recent posts
recent updates
recent comments
  • muffa : Need for Speed SHIFT 2 UNLEASHED: Car Skin: BMW Z4 GT3 Racing HATSUNE MIKU Packs : 2013年04月11日(木)
  • كاميرات مراقبة جملة : Win Toolkit 使ってみた : 2013年09月21日(土)
  • brico : Need for Speed SHIFT 2 UNLEASHED: Car Skin: BMW Z4 GT3 Racing HATSUNE MIKU Packs : 2013年04月11日(木)
  • Alphaziel : PLEX PX-Q3PE (Spinel + BonCasLink + TVTest + TvRock) での録画PC 構築設定メモ : 2014年09月24日(水)
  • 泣き虫 : PLEX PX-Q3PE (Spinel + BonCasLink + TVTest + TvRock) での録画PC 構築設定メモ : 2014年09月24日(水)
recent trackbacks
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