📝

備忘録:外部サイトのファビコン(favicon)を自分のページに表示する

2025/01/18に公開

あけましておめでとうございます!
株式会社イルシルでエンジニアしています、小川です。

先日、AIチャットでWeb検索しながら回答を出力させた場合に、そのソースとなるWebページをカード形式で一覧表示する機能を追加しました。

今回はこの機能のUI、カード内のWebサイトのファビコン表示に関するお話です。


「最新・検索・調べて」のいずれかを含めてチャットを投げると、Webの情報をもとにAIが返信してくれます

実装そのものは API を利用するだけでシンプルですが、初見では「どうやるんだ...?」となる内容だったので、備忘録としてまとめておこうと思います。

Favicon を返す Google API

Web サイトの favicon を png 形式 で返してくれる WebAPI を利用します。
(Google 提供らしいが、リファレンスなど公式情報が見当たらないので詳細は不明...)

// your_urlの部分を取得したいページのものに置き換える
https://www.google.com/s2/favicons?domain=your_url

// 以下でも取得可能(上記URLもリダイレクトされる)
// 画像サイズをpx単位で指定可能だが、元画像より大きサイズ指定した場合は最小サイズで返ってくる?
https://t0.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=your_url&size=16

弊プロダクトの LP で実験してみました。
アクセスすると、256 x 256 サイズの弊社アイコンがブラウザ上に表示されます。

https://t0.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=https://irusiru.jp/&size=256

画面に表示する

img タグの src 属性 に上記リンクをそのまま指定すれば、画面上にそのまま表示可能です。

<img
    src="https://t0.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=https://irusiru.jp/&size=16"
    alt="イルシルアイコン"
/>

活用例 ↓

まとめ

パラメータ指定した URL を img タグの src 属性に渡してあげるだけで簡単に favicon 表示できます!
活用できる場面はかなり限定的ですが、覚えておくと役に立つ時が来るかもしれません。

それではまた!

株式会社イルシル

Discussion