faviconを自動で取得する方法

ブラウザのお気に入り機能のように、リンク先のサイトのfavicon(ファビコン)を表示することがサイト内でも実現できれば使いやすいデザインが作れそうですよね。

今回はfaviconを自動で取得して表示する方法をご紹介します。

まずは普通にfaviconを表示する

faviconを表示するにはこのように書きます。

<img  src=”http://www.google.com/s2/favicons?domain=”ここにリンク先URLを書く””>

もしYahooのfaviconを表示するならこのようになります。

<img  src=”http://www.google.com/s2/favicons?domain=https://www.yahoo.co.jp/”>

JavaScriptで自動化する

<a>タグに書いたリンク先のfaviconを自動的にそのリンク部分に表示するというものを作ってみます。

function faviconSetting(){
	var item = $('a.link_has_favicon');
	item.each(function(){
		var faviconUrl = $(this).attr('href');
		$(this).prepend('<img src="http://www.google.com/s2/favicons?domain=' + faviconUrl + '">')
	});
}
faviconSetting();

単純なコードですがこんな感じで、class=”link_has_favicon”を持った<a>からhrefの値であるリンク先のURLを取得し、そこからfaviconにアクセスし、<img>タグとして出力します。

これだけでリンクに常にfaviconが表示されるようになります。faviconの無いサイトの場合にはnoImageになってしまいますが、ポータルなどリンク集を作るときには重宝すると思います。