外部リンクにファビコンを表示させる超簡単な方法

外部リンクをする時、ファビコン（favicon）を表示したい時があります。
例えばこう「 Pixabay」。
自力でファビコンを保存したり、URLを探して直リンクにする方法もありますが、非効率。

１、ファビコンはGoogle経由で表示

次のURLへの直リンクでファビコンが表示されます。

//URL指定の場合
<img src="https://www.google.com/s2/favicons?domain=https://pixabay.com/ja/">

//ドメイン指定の場合
<img src="https://www.google.com/s2/favicons?domain=pixabay.com">

URLでもドメインでもファビコンを表示できます。
これにてGoogle経由でファビコンを表示でき、とても手軽。
特に制限もないようで、1日1万回表示させても全く問題ありません。

リンク集とかを作る時は特に便利なコードです。
知らないと大損。

サンプルとしては「日WEB」を見てみてください。

２、表示させる際のデザイン

何もCSSで指定しないと、次のように上にずれます。

Pixabay

だから、次のようにCSSを追加する。

<img style="vertical-align: text-top;" src="https://www.google.com/s2/favicons?domain=https://pixabay.com/ja/" alt="" /> <a href="https://pixabay.com/ja/" target="_blank" rel="noopener">Pixabay</a>

または

<img style="vertical-align: -8%;" src="https://www.google.com/s2/favicons?domain=https://pixabay.com/ja/" alt="" /> <a href="https://pixabay.com/ja/" target="_blank" rel="noopener">Pixabay</a>

・ text-top
Pixabay

・-8%
Pixabay

「style=”vertical-align: text-top;”」か、
「style=”vertical-align: -8%;”」にて綺麗に真ん中になります。
サイトのCSSによって違ってくるので、調整ください。

ここはもちろん、ブロック要素にしたりしても良い。
自由にデザインを。

３、当然、ブラウザキャッシュされる

ファビコンはブラウザにキャッシュされますので、
サイトがファビコンを変更しても、ブラウザのキャッシュを削除しないと反映されません。

Googleのサーバーなのでここのコントロールはできない。
キャッシュさせたくない場合は「?1234」など都度ランダムにパラメータを付けたり、
自分のサイトにキャッシュしてブラウザキャッシュの時間を1時間にするなど、
ちょっとした工夫が必要になります。

まぁ、気にしなくていいだろう。
一応知っておくのが大事。