自分のホームページやブログを紹介する際に、ただのリンクを貼るだけだとあまり目立ちません。
なので、目立って、かつ覚えてもらいやすい良い方法はないかなと考えていました。
そんな時にふと目に留まったのが、こちら。
「Googleウェブマスターツール」のサイト選択のところなんだが、どうもファビコンを取得して画像を表示しているようです。
こんな感じで、リンクの前にファビコン画像を表示できたら、目立って覚えてもらいやすくて良さそう！
ということで、その方法を調べてみました。
ファビコン画像取得API
先ほどの表示されている画像のURLを見てみると、以下のようになっていました。
どうやらファビコン画像を取得するAPIが存在するようです。
調べてみると、いろいろとありました。
Favicon Converter（公式サービス）
＜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＞
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を取得する : すぐに忘れちゃうので覚書
コメント