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

Web Web

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

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

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

ファビコン画像取得API

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

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

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

スポンサーリンク

ファビコン画像取得API

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

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

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

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

Favicon Converter(公式サービス)

<URL書式>

[URL]

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

<取得できなかった場合の画像>

Google API(非公式サービス)

<URL書式>

[ドメイン]

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

<取得できなかった場合の画像>

Hatena::Favicon(非公式サービス)

<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

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

参考サイト

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

スポンサーリンク
スポンサーリンク
Web
えふめんをフォローする
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
俺の開発研究所

コメント

タイトルとURLをコピーしました