📝
備忘録:外部サイトのファビコン(favicon)を自分のページに表示する
あけましておめでとうございます!
株式会社イルシルでエンジニアしています、小川です。
先日、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 サイズの弊社アイコンがブラウザ上に表示されます。
画面に表示する
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