jQueryでリンク先のファビコンをリンク脇にアイコンとして表示する方法

少し前にCSS-TricksにあったTipsを
見たんですが、利用している外部の
サイトがあまり信頼性があると思え
ないので代替案をいくつか書いてみ
ようと思います。

この記事を見たんですが、

Favicons Next To External Links

getFaviconっていうサービスを利用して短いコードでファビコンを取得する、っていう方法ですが、このサイトのサーバーが落ちたり、サービスが終了したら何も表示されません。GAE(Google App Engine)を使ってるみたいですけど、GAEはある程度無料だからどう、とかそういう意味ではなくてリスクの話。規模の大きな企業のサービスなら信頼できるんですけど・・海外サイトならgetFavicon.orgのほうがまだ信頼性はありそうですね。クライアントワークでは不安で使えない。と思った方も多いかと思います。

正直getFaviconっていうサイトがあんまり信用出来なかったので代替案を書いてみます。

という訳で、まずは外部サイト不要で取得します。

ファビコンを取得する

うまいことファビコン取れました。HTMLは以下のようになっています。

<a href=http://github.com>GitHub</a>
<a href=http://css-tricks.com>CSS-Tricks</a>
<a href=http://www.google.com>Google</a>
<a href=http://jsfiddle.net/chriscoyier/6Vg7t/3/>JSfiddle</a>
<a href=http://kachibito.net>kachibito</a>​

以下コードです。

コード

$('a[href^="http://"]').filter(function() {
    return this.hostname && this.hostname !== location.hostname;
}).each(function(){
    var l = $(this);
    var fu =
    l.attr('href').replace(/^(http:\/\/[^\/]+).*$/, '$1') + '/favicon.ico';
    var fi = $('<img src="favicon.png" alt="favicon" />')['prependTo'](l);
    var e = new Image();
    e.src = fu;
    if (e.complete) fi.attr('src', fu);
    else e.onload = function(){
        fi.attr('src', fu);
    };
});​

URLのホスト情報を取得して、それを元に正規表現でファビコンのURLを作ります。後はimgタグに含めれば表示できます。ファビコンが見つからない場合は「src=”favicon.png” alt=”favicon”」を表示させます。

ただ、上記のコードだけではexample.com/favicon.icoしか取得できませんので6行目をもう一工夫する必要がありそうです。

尚、この方法はjQueryスニペットに以前書きました。

Favicon Converterを使う

国産のファビコン取得サービス、Favicon Converterを利用した方法です。

$("a[href^='http']").each(function() {
    $(this).css({
        background: "url(http://favicon.qfor.info/f/" + this.href + ") left center no-repeat",
        "padding-left": "20px"
    });
});​

古いファビコンを取得したままみたいですね。もし利用するとしたらFavicon ConverterのAPIを使用したほうがまだ安心じゃないかなと思いますが、こちらも個人の方のサービスですので依存するわけにはいきません。

はてなのやつを使う

非公式APIみたいですけど、はてなFavicon APIを使う方法もあります。

$("a[href^='http']").each(function() {
    $(this).css({
        background: "url(http://favicon.hatena.ne.jp/?url=" + this.href + ") left center no-repeat"
    });
});​

これって、一度でもブックマークされていないとAPIで取得できないのかな。(試してない)

GoogleのAPIを使う

GoogleのAPIも非公式らしいです。

GoogleのはURLではなくドメインを使います。ですので、http://を抜いてあげる必要があります。

$("a[href^='http']").each(function() {
    var domainname = $(this).attr('href').replace('http:\/\/', '');

    $(this).css({
        background: "url(http://www.google.com/s2/favicons?domain=" + domainname + ") left center no-repeat",
        "padding-left": "20px"
    });
});​

ただ、下層ページへのURLのようにドメインの後に文字列が続くとうまくファビコンを取得してくれないようです。

どれもイマイチ。外部サービスを利用するなら、クライアントさんにはリスクも説明しないとですね。でも、案件でリンク先のファビコンつけてくれ、なんて要望めったに無さそう。