doudonn WEB制作やサーバーの話とかいろいろ

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

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

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

1、ファビコンは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」を見てみてください。

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

何も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によって違ってくるので、調整ください。

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

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

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

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

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

--

管理人について
doudonn
名前:doudonn(どうどん)
ひたすらWEB制作な人。
一応社長です。音ゲー好き

<Twitterはこちら>
ゲーム垢
WEB制作垢
お知らせ

2022年11月30日に全記事削除しました。
まだ再開に向け作りかけ。


無駄にページ表示速度にこだわってます。

役立ちサイト
wiki
© 2022-2023 doudonn All Rights Reserved.