這段時間因為發文章，會在文章底部附上相關連結，所以注意到了一個蠻有趣的 Google API，就是【favicon API】。
這個 API 可以抓取網域的 favicon，讓我們在寫文章時，多數時候不用再去手動抓連結的 favicon。
那麼今天我們就來跟大家簡單介紹一下，如何使用這個 API。
如何使用 favicon API
favicon API 的使用格式如下:
1
|
https://www.google.com/s2/favicons?sz={大小}&domain={域名}
|
大小: 16~256 之間的 2^n 次方(ex. 16、32、64、128)
域名: 目標網址的域名(ex. the-walking-fish.com)
這邊以套用在 html 的 img 中為例子，使用起來格式如下:
1
2
3
4
5
|
<img src="https://www.google.com/s2/favicons?sz=16&domain=facebook.com">
<img src="https://www.google.com/s2/favicons?sz=32&domain=github.com">
<img src="https://www.google.com/s2/favicons?sz=64&domain=cloudflare.com">
<img src="https://www.google.com/s2/favicons?sz=128&domain=google.com">
<img src="https://www.google.com/s2/favicons?sz=256&domain=the-walking-fish.com">
|
這邊是範例:
使用注意事項
在使用時要注意，如果目標網域的 favicon 本身大小不夠大，即便設定 256 的大小，API 也只會回傳最大的 favicon 圖片大小。
以下拿 cloudflare 以及 google 作為範例
1
2
3
4
5
6
7
|
<img src="https://www.google.com/s2/favicons?sz=64&domain=cloudflare.com">
<img src="https://www.google.com/s2/favicons?sz=128&domain=cloudflare.com">
<p>此處 cloudflare favicon 圖片皆為 64×64</p>
<img src="https://www.google.com/s2/favicons?sz=128&domain=google.com">
<img src="https://www.google.com/s2/favicons?sz=256&domain=google.com">
<p>此處 Google favicon 圖片，左圖為 128×128，右圖為 144×144</p>
|
此處 cloudflare favicon 圖片皆為 64×64
此處 Google favicon 圖片，左圖為 128×128，右圖為 144×144
