想在网站中使用其它站点的 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 简单 遇到自定义地址就躺
脚本 ⭕️ 不依赖于外部服务,自食其力 需要开发成本,需要后端开发去获取


相关文章
浅谈基于openresty(nginx+lua)开发轻量级,按流量控制的灰度模块(下)
浅谈基于openresty(nginx+lua)开发轻量级,按流量控制的灰度模块
241 0
|
Android开发
解决圆形进度条ProgressBar的几个问题
Android自带的Progressbar默认就是圆形的,可以通过设置style属性 style="?android:attr/progressBarStyleHorizontal" 复制代码 这样就能变成条状进度条,如下: <ProgressBar android:layout_width="match_parent" android:layout_height="wrap_content" style="?android:attr/progressBarStyleHorizontal"/>
1490 0
|
Web App开发 域名解析 缓存
如何在 Ubuntu 20.04 上安装 Node.js 和 npm
本文我们主要为大家介绍在 Ubuntu 20.04 上安装 Node.js 和 npm 的三种不同的方式。
162434 7
如何在 Ubuntu 20.04 上安装 Node.js 和 npm
|
数据采集 缓存 前端开发
获取任意网站 icon 这件事并没那么简单
本文源自开发者Pony在创作“标签星球”过程中遇到的一个需求:如何高效获取并展示网站的Logo。为此,他深入研究并自建了一套图标获取与托管服务。标签星球是一款基于浏览器收藏夹的启动页应用,能将收藏夹转换为导航页形式,并支持模糊搜索及收藏夹分享等功能。在寻找合适服务时,Pony发现现有解决方案要么受限于技术壁垒,要么覆盖范围有限,这促使他着手搭建自己的服务。文章详细介绍了该服务的设计思路和技术实现过程,包括对多种网站图标设置方法的分析、链接处理策略、获取流程、缓存机制以及错误处理方案等。
317 2
|
4月前
|
算法 Java 测试技术
Java 从入门到实战完整学习路径与项目实战指南
本文详细介绍了“Java从入门到实战”的学习路径与应用实例,涵盖基础、进阶、框架工具及项目实战四个阶段。内容包括环境搭建、语法基础、面向对象编程,数据结构与算法、多线程并发、JVM原理,以及Spring框架等核心技术。通过学生管理系统、文件下载器和博客系统等实例,帮助读者将理论应用于实践。最后,提供全链路电商系统的开发方案,涉及前后端技术栈与分布式架构。附代码资源链接,助力成为合格的Java开发者。
140 4
|
安全 Linux 网络安全
【工具使用】几款优秀的SSH连接客户端软件工具推荐FinalShell、Xshell、MobaXterm、OpenSSH、PUTTY、Terminus、mRemoteNG、Terminals等
【工具使用】几款优秀的SSH连接客户端软件工具推荐FinalShell、Xshell、MobaXterm、OpenSSH、PUTTY、Terminus、mRemoteNG、Terminals等
117717 0
|
数据可视化 数据挖掘
SmartPLS 4.0
SmartPLS 4.0
1565 3
|
Ubuntu 安全 网络协议
|
资源调度 前端开发
微前端-qiankun:nuxt2 接入 nuxt2
微前端-qiankun:nuxt2 接入 nuxt2
297 0
|
存储 缓存 网络协议
CDNJS/UNPKG/JSDelivr 太慢用不了,换成这些国内高速镜像
npm cdn, cdnjs, unpkg, jsdelivr, zstatic, zstatic.net, s4.zstatic.net
15353 4