ファビコン画像を取得する便利なWebサービス（API）

Web

2015.05.22

この記事は約3分で読めます。

自分のホームページやブログを紹介する際に、ただのリンクを貼るだけだとあまり目立ちません。

なので、目立って、かつ覚えてもらいやすい良い方法はないかなと考えていました。

そんな時にふと目に留まったのが、こちら。

「Googleウェブマスターツール」のサイト選択のところなんだが、どうもファビコンを取得して画像を表示しているようです。

こんな感じで、リンクの前にファビコン画像を表示できたら、目立って覚えてもらいやすくて良さそう！

ということで、その方法を調べてみました。

ファビコン画像取得API
ファビコン画像取得APIを使用する
参考サイト

ファビコン画像取得API

先ほどの表示されている画像のURLを見てみると、以下のようになっていました。

https://s2.googleusercontent.com/s2/favicons?domain_url=https://itmemo.net-luck.com/

どうやらファビコン画像を取得するAPIが存在するようです。

調べてみると、いろいろとありました。

Favicon Converter（公式サービス）

＜URL書式＞

http://favicon.qfor.info/f/

[URL]

＜サンプルURL＞
http://favicon.qfor.info/f/http://www.google.co.jp/
＜サンプル画像＞

＜取得できなかった場合の画像＞

Google API（非公式サービス）

＜URL書式＞

Error 404 (Not Found)!!1

[ドメイン]

＜サンプルURL＞
http://www.google.com/s2/favicons?domain=www.google.co.jp
＜サンプル画像＞

＜取得できなかった場合の画像＞

Hatena::Favicon（非公式サービス）

＜URL書式＞

https://cdn-ak.favicon.st-hatena.com/?url=

[URL]

＜サンプルURL＞
https://cdn-ak.favicon.st-hatena.com/?url=http://www.google.co.jp/
＜サンプル画像＞

＜取得できなかった場合の画像＞

ファビコン画像取得APIを使用する

上記の「Favicon Converter」以外は、APIドキュメントにも特に載っておらず、非公式サービスのようなので、いつ使用不可になるか分からないのが少しネックです。

しかし、3つとも試してみたところ、目的のサイト全てのファビコン画像を取得できたのが、「Hatena::Favicon」だったので、こちらを使用することにしました。

実際のソースは、こちら。

<img src="http://favicon.hatena.ne.jp/?url=https://itmemo.net-luck.com/" style="float:left;margin:5px 5px 0px 5px"><a href="https://itmemo.net-luck.com/">俺の開発研究所</a><br style="clear:both;">
<img src="http://favicon.hatena.ne.jp/?url=http://sneaker-book.com/" style="float:left;margin:5px 5px 0px 5px"><a href="http://sneaker-book.com/">スニーカー図鑑</a><br style="clear:both;">
<img src="http://favicon.hatena.ne.jp/?url=http://ganbanyoku.net/" style="float:left;margin:5px 5px 0px 5px"><a href="http://ganbanyoku.net/">岩盤浴.net</a>

で、こんな感じで完成！

ファビコン画像取得APIを使用して、簡単に目立たせることができました。

参考サイト

リンク先のFaviconを取得・表示できるWebサービス(API)とJavaScript・プラグインまとめ : Web Memo.SE
Faviconを取得する : すぐに忘れちゃうので覚書