最近在开发一个 Chrome
插件,其中需要读取到对应网站的 favicon 图标,遇到一些问题记录一下。
太长不看的可以直接跳到最后总结部分。
几种常用方案
Chrome favicon
格式: chrome://favicon/<url>
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=<url>&size=<size>
www.google.com/s2/favicons
可使用 google 服务来获取对应网站的 favicon 图标,url 是网页的完整 URL 地址,无需转化为域名,并且如果同域名网站有多个 favicon,可以获取到对应的 icon,还可自定义 icon 尺寸。
不过由于某些不可说的原因,对网络存在要求。
duckduckgo icons
格式:https://icons.duckduckgo.com/ip3/<domain>.ico
icons.duckduckgo.com
和 google favicons
服务类似,不过只能获取域名下的 favicon,无法精确到 url。
直接获取域名对应的 favicon 图标
格式:https://<domain>/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];
代码只是举例说明,并不严谨。