faviconを付けてみた
favicon って↑みたいにブラウザの検索ウィンドウに出るアイコンのことね。
ほとんど更新しないのに favicon もねーだろと思いながらも付けてみようと思ったのですが・・・
さすがココログ。
一筋縄ではうまくいきません。
Opera、Netscape、FireFoxでも表示できましたが、IEでハマりました。
症状は、「お気に入りのリストに favicon が出ない」 の一言。
普段はIEは使わないし、ましてや更新してないくせにブックマークしてもらえるなどと思い上がってもいないのですが、納得が行かないのでいろいろ試してみました。
- cocolog上に置いたアイコンを favicon に指定するhtml
- @nifty上に置いた同じアイコンを favicon にするhtml
この2つを@nifty上に置いて、それぞれをIEでブックマークしてみると・・・
@nifty上のアイコンを favicon に指定した html はお気に入りリストに favicon が出る。
cocolog上のアイコンを favicon に指定すると favicon が出ない。
パケットモニタで調べてみると、cocologからアイコンファイルを取得する際、サーバが Vary ヘッダを付けて返してる。
どうもそれが理由でキャッシュされていないような感じ。
ちなみに私はHTTPサーバの設定に関しては全く分からないので、Vary の本来の意味・目的や、Vary を付ける設定にしていることの是非は全然分からないのでそこは放っておきます。
IE側の問題なのかも知れないし、自分側の設定かも知れないしね。
で、他のパケットを見てみると、jpeg や gif だと cocolog のサーバーが Vary を付けて返してない。
試しに favicon.ico を favicon.jpg に名前だけ変え (中身はアイコン) favicon に favicon.jpg を指定すると Vary を付けずに返し、しかもお気に入りのリストにもアイコンが出るようになった。
でも問題がもう一つ。
ココログのベーシックを使っているんだけど、<head></head> 間に link タグを埋められない。
そのためIEでは、headタグの外にlinkタグを入れても、結局はルートの favicon.ico を探しに行き、ファイルはあってもお気に入りリストにアイコンは出ない。
で、簡単ながら JavaScript を作って回避しました。
サブタイトルの編集で、
<script type="text/javascript" src="http://xxx/enableFaviconIE.js"></script>
<script>
enableFavicon('http://xxx/images/xxx.jpg');
</script>
といった具合に中身はアイコンでも拡張子だけjpgにしたfaviconを指定。
これでIEでもOKになったぞぉ～。
そうして記事の更新は再び途絶える・・・・・
Recent Comments