リンクに自動でファビコンを付ける
Result
jQuery
//リンクをセレクタに指定
$('a[href^="http://"]').filter(function() {
//URLのホスト名を取得する
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);
};
});
css
img{width:15px;height:15px;}
a{text-decoration:none;color:green;margin-bottom:5px;display:inline-block;}
html
<a href="http://kachibito.net/">kachibito</a><br />
<a href="http://www.facebook.com/">facebook</a><br />
<a href="http://twitter.com/">twitter</a><br />
<a href="http://www.youtube.com/">youtube</a><br />
<a href="http://www.flickr.com/">flickr</a><br />
<a href="http://b.hatena.ne.jp/">hatena</a><br />
via
Add favicon to external links with jQuery – Snipplr