リンク先のFavicon（ファビコン）を表示して、文字だらけのブログにおさらばしよう

久しぶりにiPhoneに関係ない話です。
ブログの中で他のサイトへのリンクを表示することって、よくありますよね？

これまでに、みはら.comであったものだと、

手作り風はんこ作成ツール | 郵便年賀.jp

とか、

お名前.com

とか、

かちびと.net

とか、リンクだということはなんとなくわかってもらえるとは思うんです。
しかし、文字しかないので、とても味気ないですね。

ということで、だらだらと前置きしましたが、今回は、リンク先のFavicon（ファビコン）を表示して、ブログにちょっと華をもたせようっていう記事です。
こんな風になります。

手作り風はんこ作成ツール | 郵便年賀.jp
お名前.com
かちびと.net

リンク先のファビコンを表示する方法

おおまかな流れは、

ファビコンを取得する
ファビコンを表示する
CSSを調整する

の3ステップです。

ファビコンを取得する方法

では、早速、ファビコンを取得する方法です。
おススメなのが2つありますので、それぞれ紹介します。

Googleのファビコン取得するやつ（仮称）

まことに申し訳ありませんが、正式名称がわかりません。
ですが、提供元はあのGoogleです。
Googleのファビコン取得APIです。

使い方はカンタン。
[cc lang=”HTML”] http://www.google.com/s2/favicons?domain=[domain name] [/cc] [domein name]のところに、ファビコンを取得したいドメイン名を入れます。

たとえば、Googleのファビコンは、
[cc lang=”HTML”] http://www.google.com/s2/favicons?domain=www.google.co.jp
[/cc] としてやるだけです。
で、取得したファビコンがこれです。

注意しなきゃいけないポイントとしては、

URLは加工してドメイン形式にしないと表示してくれません。
「http://～」としても、デフォルトアイコン（地球みたいなやつ）が表示されるだけです。
取得先はドメインなので、サブフォルダ形式のサイトのファビコンは取得できません。
非公式サービスなので、突然使えなくなる可能性があります。

Hatena::Favicon

こちらははてなが提供しているファビコン取得サービスです。
こっちもGoogleのと同様にカンタンです。
miha5的には、こちらのはてなのほうがカンタンかなと思っています。

使い方は、
[cc lang=”HTML”] http://favicon.hatena.ne.jp/?url=[URL] [/cc] の[URL]のところに、ファビコンを取得したいサイトのURLを入れます。

例えば、はてなブックマークのファビコンは、
[cc lang=”HTML”] http://favicon.hatena.ne.jp/?url=http://b.hatena.ne.jp/
[/cc] で、取得できます。
取得したファビコンがこちら。

注意しなきゃいけないポイントとしては、

取得できなかったときのアイコンはファイルみたいなやつです。
Googleのと同様に非公式サービスなので、突然使えなくなる可能性があります。

また、このはてなのファビコン取得サービスは、
[cc lang=”HTML”] https://favicon.st-hatena.com/?url=[URL] [/cc] でも、同様に機能します。

ファビコンを表示する方法

ファビコンの取得はできたので、表示するのはカンタンです。
[cc lang=”HTML”]
[/cc] でOKです。

むずかしく考える必要はないのに、いろいろ考えてしまったかたもいらっしゃるんじゃないでしょうか？
なるべくシンプルに行きたいと思います。

CSSで調整する方法

みなさんのWebサイトでも、img要素に対してプロパティを指定していると思います。
みはら.comでは、こんな風に指定していました。
[cc lang=”CSS”] img {
margin: 15px 0;
height: auto;
max-width: 610px;
}
[/cc] このまま、ファビコンを表示しようとすると、おかしなカンジになります。

みはら.com | 基本的にみはらのメモ用

ということで、ファビコン用に新たにclassを設けます。
miha5は、クラス名を「fav」としました。
そして、CSSも
[cc lang=”CSS”] img.fav {
margin:0 5px 0 0;
vertical-align: middle;
}
[/cc] といじってやることで、ちゃんと表示されます。