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

本文涉及的产品
.cn 域名,1个 12个月
简介: 最近在开发一个 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 简单 遇到自定义地址就躺
脚本 ⭕️ 不依赖于外部服务,自食其力 需要开发成本,需要后端开发去获取


相关文章
静态网页html+css的真ikun网站
静态网页html+css的真ikun网站
|
7月前
|
Web App开发 API
通过html页面方式访问www.iximo.com的方式(原创)
通过html页面方式访问www.iximo.com的方式(原创)
51 2
|
3月前
个人博客新引导主页html源码
个人博客新引导主页html源码,随机背景,字体颜色变换,记事本打开自己动手修改一下就可以啦。
21 1
|
7月前
【最全最详细】publiccms其他常用代码片段(内容、站点)
【最全最详细】publiccms其他常用代码片段(内容、站点)
|
搜索推荐 SEO
WordPress SEO:选择 WordPress 帖子还是页面?
WordPress SEO:选择 WordPress 帖子还是页面? 很多客户关心WordPress SEO问题,是应该以帖子或页面的形式为您的 WordPress 网站创建最新的作品,还是取决于对WordPress SEO理解。然而,分类确实很重要,无论是出于 SEO 目的还是组织目的。
WordPress SEO:选择 WordPress 帖子还是页面?
|
区块链 UED
网站增加一个ICO站点小图标教程
对于网站的管理员来说,网站的ICO图标更准确的应该叫做站标,是仅次于网站LOGO的标志之一。高品质的ico图标设计更容易使站点获取良好的用户体验。制作ICO图标的工具尽管有很多,但做出一款漂亮的ICO图标,并非是一件容易的事情。
342 0
网站增加一个ICO站点小图标教程
|
存储 JavaScript 前端开发
【网站搭建】Docsify+Gittalk的配置过程记录分享。原创!
【网站搭建】Docsify+Gittalk的配置过程记录分享。原创!
233 0
【网站搭建】Docsify+Gittalk的配置过程记录分享。原创!
|
存储 Web App开发 前端开发
5分钟站点生成神器——Docusaurus
Docusaurus 是 Facebook 专门为开源项目开发者提供的一款易于维护的静态网站创建工具,使用 Markdown 即可更新网站。构建一个带有主页、文档、API、帮助以及博客页面的静态网站,只需5分钟。
2001 0
5分钟站点生成神器——Docusaurus
个人博客,个人网页(上)
项目成品演示地址:博客地址 1、个人首页效果图+代码