Faviconを表示しよう

tech

リンクを張るときにそのページのFaviconを一緒に表示できたらかっこいいですよね。こんな感じに。
Google
※IEではFaviconを表示しないようにしています


で少しググってみるとjavascriptで作成/紹介してる人がいました。


しかし、はてなダイアリーではjavascriptが使えない。う〜む困った。ここは手動で貼り付けるしかない。
でもいちいちFaviconのパスを探して、タグを手で書くのはすごく面倒くさい。なので自動でFaviconを探してタグを作成するブックマークレットを作成してみました。*1

javascript:(function(){
var url = document.URL;
var favicon = "";
var links = document.getElementsByTagName("link");
for(var i = 0; i < links.length; i++){
  if(links[i].rel.toLowerCase() == "shortcut icon" || links[i].rel.toLowerCase() == "icon"){
    favicon = links[i].href;
    break;
  }
}

if(favicon == ""){
  var domain = url.replace(/^http:\/\// , "").replace(/\/.*/ , "");
  favicon = "http://" + domain + "/favicon.ico";
}

var src = '<img class="Favicon" src="' + favicon + '">' + '[' + url + ':title]';
prompt(src , src);
}())

これをfavicon.jsという名前にしてブックマークレットとして保存します。そして目的のページを表示してfavicon.jsを実行。そうするとダイアログが表示され以下のようなタグが入力されています。

<img class="Favicon" src="http://www.google.co.jp/favicon.ico">[http://www.google.co.jp/:title]

favicon.jsの注意点としては

  • 動作確認したのはFirefox3だけ
  • はてな記法に特化してるのではてなダイアリー以外で使う場合はカスタマイズが必要
  • Faviconが設置されていないページの場合を判断できない
    • XMLHttpRequestを使えば解決できるかもしれませんが、何かいい方法があれば教えてください


で、後はこのタグをはてなダイアリー内に書けば万事OKといきたいところなんですが、ここでも問題があります。
それはIEでは表示できないFaviconがあるということです。本当に何をするにもIEは厄介です。(予想ですが、透過処理が入っているicoは表示できないのかも)


なのでIEではFaviconを表示させないということで対応します。どうやって対応するかというとIEは属性セレクタをサポートしていないので、それを使ったCSSハックで対応します。

/* for favicon */
img.Favicon{
 vertical-align:middle;
 width:0;
 height:0;
}
/* visible with Firefox */
img[class="Favicon"]{
 width:16px;
 height:16px;
}
/**/

簡単に解説すると

  1. img.Faviconをwidth , heightを0としてFaviconを非表示にします
    • この時点では全てのブラウザでFaviconが非表示になります
  2. 次に属性セレクタを指定して、width , heightを16pxとしてFaviconを表示します
    • この時点で属性セレクタに対応しているFirefoxではFaviconが表示されるようになります
    • 参考:worldending.jp


というわけでIEのおかげで問題はありますが、とりあえず完成。僕がFirefoxを使っているのと、このページを見に来てくれる人のブラウザがIEよりFirefoxのほうが多いのでこれで良しとします。
(Firefox:49% , IE:37%)


一応動作確認の結果を書いておきます

  • Favicon表示可
    • Firefox2 (Mac OS X)
    • Firefox3 (Windows Vista)
    • Safari1.3.2 (Mac OS X) ※表示できないFaviconもあるかも
  • Favicon表示不可
    • IE6 (Windows Server 2003 R2)
    • IE7 (Windows Vista)


改善点とか何かあればコメントください。


#正月早々、引きこもってプログラム書いてるなんて。
#でもたまにはプログラムのことも書かないとね。

*1:relを小文字に変更して比較 rel.toLowerCase()