parudou
parudou
parudou
更新日:2018/11/12

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

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

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

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

https://www.google.com/s2/favicons?domain=https://pixabay.com/ja/

最後のURLはファビコンを表示したいサイトのURLに変更してください。
これにてGoogle経由でファビコンを表示でき、とても手軽。
特に制限もないようで、1日1万回表示させても全く問題ありません。

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

表示させる際のデザイン

何も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>

Pixabay

「style=”vertical-align: text-top;”」にて綺麗に真ん中になります。
ここはもちろん、ブロック要素にしたりしても良い。
自由にデザインを。

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

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

Googleのサーバーなのでここのコントロールはできない。
キャッシュさせたくない場合はやはり、各サイトのファビコンへ直リンクするか、
自分のサイトにキャッシュしてブラウザキャッシュの時間を1時間にするなど、
ちょっとした工夫が必要になります。

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

是非ご感想・ご指摘等をください。

プロフィール

管理人:parudou
単なるWEBサイト作成マニアです。
底辺法人アフィリエイター。
Twitterはこちら

日記はパルどうSEOブログ

Copyright (c) parudou All Rights Reserved.