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


相关文章
|
人工智能 Java API
Google Gemini API 接口调用方法
Google 最近发布的 Gemini 1.0 AI 模型通过其升级版,Gemini,标志着公司迄今为止最为强大和多功能的人工智能技术的突破。
|
3月前
|
安全 Go
GoLand 2026.1 EAP无缝迁移:Go 1.26 语法更新实战指南
GoLand 2026.1 推出“语法更新”功能,将 Go 1.26 新特性(如 `errors.AsType` 安全解包、`new()` 支持表达式)无缝融入日常编码。蓝色下划线智能提示,Alt+Enter 一键安全升级,支持逐行修复或全项目批量迁移,让代码现代化成为自然、渐进、无痛的开发习惯。(239字)
288 2
|
5月前
|
人工智能 自然语言处理 前端开发
24小时15.3K安装量稳坐王座!老金愿称之为元Skill!
find-skills是AI Agent的“技能搜索指南”,装上后可自然语言指令(如“搜个数据分析skill”)自动查找、安装skills.sh生态技能。上线4天安装超5.2万次,遥遥领先。原版存在触发不稳定、Windows不兼容两大坑,老金已修复并开源Windows兼容版。
|
数据采集 缓存 前端开发
获取任意网站 icon 这件事并没那么简单
本文源自开发者Pony在创作“标签星球”过程中遇到的一个需求:如何高效获取并展示网站的Logo。为此,他深入研究并自建了一套图标获取与托管服务。标签星球是一款基于浏览器收藏夹的启动页应用,能将收藏夹转换为导航页形式,并支持模糊搜索及收藏夹分享等功能。在寻找合适服务时,Pony发现现有解决方案要么受限于技术壁垒,要么覆盖范围有限,这促使他着手搭建自己的服务。文章详细介绍了该服务的设计思路和技术实现过程,包括对多种网站图标设置方法的分析、链接处理策略、获取流程、缓存机制以及错误处理方案等。
564 2
|
12月前
|
算法 Java 测试技术
Java 从入门到实战完整学习路径与项目实战指南
本文详细介绍了“Java从入门到实战”的学习路径与应用实例,涵盖基础、进阶、框架工具及项目实战四个阶段。内容包括环境搭建、语法基础、面向对象编程,数据结构与算法、多线程并发、JVM原理,以及Spring框架等核心技术。通过学生管理系统、文件下载器和博客系统等实例,帮助读者将理论应用于实践。最后,提供全链路电商系统的开发方案,涉及前后端技术栈与分布式架构。附代码资源链接,助力成为合格的Java开发者。
460 4
|
人工智能 API 开发者
狂揽7.5k星!这款开源API网关彻底解放开发者:一键聚合GPT-4、Suno、Midjourney,还能在线充值!
New API 是一款基于 One API 二次开发的 AI 模型接口管理与分发系统,支持多种大模型(如 GPT-4、Suno、Midjourney 等)统一封装为 OpenAI 格式接口调用。其核心功能包括多模型统一网关、企业级权限管控、“推理力度”分级、无魔法访问全球 AI 服务、灵活计费体系及开发者友好设计。技术架构采用 Golang + Gin 框架,支持高并发低延迟,适用于企业内部 AI 中台、多模型 SaaS 平台、学术研究协作及个人开发者工具等场景。项目开源地址:https://github.com/kingbug/new-api。
10807 10
|
数据采集 存储 前端开发
Python爬虫自动化:批量抓取网页中的A链接
Python爬虫自动化:批量抓取网页中的A链接