几种常用方案
chrome favicon
格式: chrome://favicon/
chrome://favicon/
可以获取到对应网站在 当前 chrome 中 的使用 favicon 图标,对应着该网站在书签栏的图标或上次打开时的图标。图标使用的是 chrome 本地的缓存,所以速度很块。
但是该方案无法使用在网页中,chrome 会提示 Not allowed to load local resource
。只可用于 chrome 插件中,并且需要为 v2 版本的 manifest 添加 permissions: ["chrome://favicon/"]
,v3 版本 目前还没有替代方案。
google favicons
格式:https://www.google.com/s2/favicons?domain=&size=
www.google.com/s2/favicons
可使用 google 服务来获取对应网站的 favicon 图标,url 是网页的完整 URL 地址,无需转化为域名,并且如果同域名网站有多个 favicon,可以获取到对应的 icon,还可自定义 icon 尺寸。
不过由于某些不可说的原因,对网络存在要求。
duckduckgo icons
格式:https://icons.duckduckgo.com/ip3/.ico
icons.duckduckgo.com
和 google favicons
服务类似,不过只能获取域名下的 favicon,无法精确到 url。
直接获取域名对应的 favicon 图标
格式:https:///favicon.ico
由于大部分的网站都会使用 favicon 的默认路径,所以可以直接拼接获取域名对应的 favicon 图标。只是简单的场景可以尝试使用。
脚本
get url 对应的 html,然后 parse 出 url 中的 favicon 配置的 url,即可获取到对应的 favicon 图标。
const html = await fetch(url).then(res => res.text()); const favicon = html.match(/<link rel="icon" href="(.*?)"/)[1]; 复制代码
代码只是举例说明,并不严谨。
方案总结
方案 | 预览 | 格式 | 自定义大小 | 支持任意 URL(无需转换为域名) | 优势 | 劣势 |
chrome://favicon/ |
无法预览 | chrome://favicon/<url> |
❌ | ⭕️ | 本地缓存,速度快 | 使用场景过于局限,只适用于使用 v2 manifest 的 chrome 插件 |
www.google.com/s2/favicons |
https://www.google.com/s2/favicons?domain=<url>&size=<size> |
⭕️ | ⭕️ | 精确到 url、支持修改大小 | 国内访问受限 | |
icons.duckduckgo.com |
https://icons.duckduckgo.com/ip3/<domain>.ico |
❌ | ⭕️ | 可用性高 | 使用场景过于局限,只适用于使用 v2 manifest 的 chrome 插件 | |
直接获取域名对应的 favicon 图标 | https://<domain>/favicon.ico |
❌ | ❌ | 简单 | 遇到自定义地址就躺 | |
脚本 | 无 | 无 | ❌ | ⭕️ | 不依赖于外部服务,自食其力 | 需要开发成本,需要后端开发去获取 |