想在网站中使用其它站点的 favicon,看这篇就够了

简介: 最近在开发一个 chrome 插件,其中需要读取到对应网站的 favicon 图标,遇到一些问题记录一下。

几种常用方案

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.comgoogle 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 简单 遇到自定义地址就躺
脚本 ⭕️ 不依赖于外部服务,自食其力 需要开发成本,需要后端开发去获取


目录
打赏
0
0
0
0
5
分享
相关文章
|
11月前
静态网页html+css的真ikun网站
静态网页html+css的真ikun网站
|
24天前
简约的域名主页HTML源码带暗黑模式
简约的域名主页HTML源码带暗黑模式
56 17
|
7月前
个人博客新引导主页html源码
个人博客新引导主页html源码,随机背景,字体颜色变换,记事本打开自己动手修改一下就可以啦。
56 1
|
9月前
WordPress插件介绍页源码单页Html源码
WordPress插件介绍页源码单页Html源码
114 2
WordPress插件介绍页源码单页Html源码
WordPress SEO:选择 WordPress 帖子还是页面?
WordPress SEO:选择 WordPress 帖子还是页面? 很多客户关心WordPress SEO问题,是应该以帖子或页面的形式为您的 WordPress 网站创建最新的作品,还是取决于对WordPress SEO理解。然而,分类确实很重要,无论是出于 SEO 目的还是组织目的。
WordPress SEO:选择 WordPress 帖子还是页面?
Hugo 网站优化(6): 博客图片不能显示, 全怪 Adblock 给我屏蔽了
Hugo 网站优化(6): 博客图片不能显示, 全怪 Adblock。 Referrer Policy: no-referrer-when-downgrade
290 0
Hugo 网站优化(6): 博客图片不能显示, 全怪 Adblock 给我屏蔽了
网站增加一个ICO站点小图标教程
对于网站的管理员来说,网站的ICO图标更准确的应该叫做站标,是仅次于网站LOGO的标志之一。高品质的ico图标设计更容易使站点获取良好的用户体验。制作ICO图标的工具尽管有很多,但做出一款漂亮的ICO图标,并非是一件容易的事情。
378 0
网站增加一个ICO站点小图标教程
5分钟站点生成神器——Docusaurus
Docusaurus 是 Facebook 专门为开源项目开发者提供的一款易于维护的静态网站创建工具,使用 Markdown 即可更新网站。构建一个带有主页、文档、API、帮助以及博客页面的静态网站,只需5分钟。
2089 0
5分钟站点生成神器——Docusaurus
DEDECMS织梦系统全站链接txt格式网站地图的制作教程
网站地图的制作三种格式:xml格式、txt格式、以及html格式,这在浏览器地址栏输入 “主域名/sitemap.xml” 的方式,尝试查看对应网站的xml格式的网站地图。把 输入内容改成 “主域名/sitemap.html” 就可以查看html格式的网站地图了。网站地图的命名方式默认是sitemap,但是网站管理者(站长)可以自由修改。
DEDECMS织梦系统全站链接txt格式网站地图的制作教程