ちょっとした理由があって、外部リソースにまったく依存しないページを作る必要があった。大抵のもののインライン化については知識があったのだけど、ファビコンをData URIでインライン化できるかはよく知らなかったため簡単なテスト・ページを作って調べてみたが、ChromeやFirefoxでは大丈夫なようだった。

Demo: Data URI Favicon

単色の緑の四角がファビコンとして表示されれば対応していることになる。表の通り、Chrome 39やFirefox 33では問題なく表示された。対してInternet Explorer 11(及び12)ではうまく読めなかった。ファビコンの参照はlink要素で行うため、読める方が好ましいはずだ。Internet Explorerの実装が行き届いていないと言って良い。

簡単に回避する手段もなさそうなので、ファビコンをインライン化するのは難しいと結論づけた。


ファビコンをもインライン化したい理由は、HTTPリクエストを0にすることに加えて同じドメイン配下のページとは違うファビコンにするという要件があったことだった。多くのブラウザーではファビコンが設定されていない場合にルートのfavicon.icoを見に行くという仕様になっているので、どうにかして別のファビコンを設定しなければならなかった。この仕様には悩ませられることがままある。もちろんapple-touch-icon.pngとかでも。

決め打ちで何かされたりしないストイックなブラウザーが良いな。