获取任意网站 icon 这件事并没那么简单

本文涉及的产品
多模态交互后付费免费试用,全链路、全Agent
简介: 本文源自开发者Pony在创作“标签星球”过程中遇到的一个需求:如何高效获取并展示网站的Logo。为此,他深入研究并自建了一套图标获取与托管服务。标签星球是一款基于浏览器收藏夹的启动页应用,能将收藏夹转换为导航页形式,并支持模糊搜索及收藏夹分享等功能。在寻找合适服务时,Pony发现现有解决方案要么受限于技术壁垒,要么覆盖范围有限,这促使他着手搭建自己的服务。文章详细介绍了该服务的设计思路和技术实现过程,包括对多种网站图标设置方法的分析、链接处理策略、获取流程、缓存机制以及错误处理方案等。


本篇文章是我在做独立开发作品「标签星球」的时候而产生的一个需求,这个需求看似不难,但是很难找到完全契合的服务,于是决定自己研究一下,搞一套完整的 icon 获取托管服务解决方案。

标签星球,是一个基于浏览器收藏夹的起始页,可以将收藏夹变为导航页形式展示,并支持模糊搜索,以及导出收藏夹,生成收藏夹订阅源分享给其他小伙伴等功能

官网(https://tag.zhuayuya.com

前言

做过导航站的朋友肯定都遇到过这么一个需求,展示每个网站的 logo,我研究了很多导航站,现在主流方案都是后台一个一个上传,另一种就是有一个一键获取按钮自动获取网站 icon;

前一种方案显然不是一个令大家满意的解决方案,后一种因为每个系统的差异性,有一些获取脚本并不能保证能够准确获取到 icon;

这个需求在 Pony 的独立开发作品做「标签星球」里就遇到了,有区别的是我这个并不是一个完整的导航网站,也并没有后台,就需要找一个单独的获取任意网站 icon 的服务;

我想关于这种服务应该会有成熟的解决方案吧,但是找了几个发现并不好用,要么是被墙了(www.google.com/s2/favicons?domain=网站地址),要么仅支持一小部分网站(logo.clearbit.com),这让 Pony 产生了好奇,为什么有些网站明明有 icon 可就是获取不到哪?

服务大概思路

于是 Pony 决定自己写一套服务,一开始想的非常简单,用 get 把想要获取 icon 的网址传递给后端,后端爬虫获取返回 icon 图片,前端直接展示,所以 img 标签里的 src 直接填写我的 「服务地址 + 目标网址」我这里爬虫使用的nodejs + playwright,直接获取网站源码解析 icon 标签即可获取到图片链接,返回给前端,就实现了一个简单的服务;

但是我明显想太多了,事情怎么可能如此简单,我发现这个方法大部分网站的 icon 都获取不到,看来要认真研究研究这件事了;

网站设置图标的几种方法

经过仔细的研究我发现了原来这件事远比我想的要复杂的多,因为设备和浏览器的不同,其中还包括了一些历史原因,这个方法并没有完成大一统,光是给网站设置 icon 的方法就有 8 种,分别是:

1、浏览器无标签但网站根目录有一个 favicon.ico 文件默认把这个文件当做 icon;

2、在头部设置 <link rel="icon" href="/path/to/favicon.ico" type="image/x-icon"> 这是最普通的写法,也是我目前最常用的写法,这个放啊还可以设置 sizes 指定多尺寸图标,比如这样 <link rel="icon" href="/path/to/favicon-16x16.png" sizes="16x16" type="image/png">,并且后边的 type 里信息根据图片格式不同也有不同,这个可以自己问一些 GPT 查到;

3、在头部设置 <link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png"> 用于Apple 设备,(如 iPhone 和 iPad)的图标,而这种方法在其他浏览器也会有效,所有有一些网站只设置了这个;

4、<meta name="twitter:image" content="/path/to/twitter-icon.png"> 某些特殊的图标需求,如针对特定社交媒体平台的图标,可以使用 meta 标签。例如,针对 Twitter 的卡片图标;

5、<link rel="mask-icon" href="/path/to/safari-pinned-tab.svg" color="#5bbad5"> 这种我没太理解,总之有一些网站是这么设置的GPT解释说是一种专门为 Safari 浏览器设计的图标格式;

6、<meta name="theme-color" content="#ffffff"> 对于一些定制化需求,可以设置主题颜色,使图标和浏览器的颜色一致;

7、<link rel="shortcut icon" href="http://shared.ydstatic.com/images/favicon.ico" type="image/x-icon"> 是一种早期的用法,现在已经废弃了,只需要 icon 不需要前边 shortcut 了但是这种方法在老网站上特别常见;

8、动态加载 icon 等网站渲染完成后会动态加载一个 icon 到头部,这种至今无法获取,也比较常见;

当然浏览器最推荐的方法还是直接 rel="icon" ,我们最好还是遵循浏览器的标准规范写代码,以后还是用大一统写法吧。

既然知道了有几种可能,那我们的爬虫就可以把这些规则都走一遍,这样就可以保证只要你的网站下确实有 icon 就可以 99% 获取到了;

但作为一个完备的获取任意网站 icon 服务,只是去爬取 icon 还远远不够,为了保证服务的质量稳定和速度我增加了如下功能;

链接处理

用户传过来的链接五花八门各种各样的都有,有带 http 的有不带的,有带路由参数的,也有无路由参数的,所以这里做了统一处理,后端接收到参数后首先判断是否是链接,这个特别简单,因为后端使用的 nodejs 直接 new URL("xxxx") 去校验即可,如果是网址的话再取一或二级域名,最终用主域名去获取 icon;

获取的过程

这个其实没什么好讲的,第一步就是拼接一下 目标地址 + favicon.ico 如果没有就直接 GET 目标地址的代码,然后上边剩余的 7 个方法挨个试;

缓存

以上可以实现一个基础的获取任意 icon 的服务,如果每次请求都要走一遍爬虫去获取的话不仅慢,还消耗服务器资源,所以做个缓存解决这个问题;

我们建一个缓存目录,把获取到的 icon 存到缓存目录,用二级域名作为图片的名字,域名中的点改成下划线,例如 www.bing.com 它的 icon 文件名就是 www_bing_com

图标扩展名保持不变,又建了一个缓存文件,将所有获取到的 icon 文件名用数组记录到缓存文件里,这样方便查询缓存字典;

错误处理

其实这样我们可以获取到 99% 的 icon 但还是无法避免获取失败的情况,所以如果实在获取不到的 icon 会返回一个默认 icon

完整逻辑

一个完整的请求流程就是这样的,GET 请求发起,后端接收将链接转成二级或一级域名去查询缓存目录字典里的链接,如果有的话直接返回缓存的图片

例如请求的是 https://www.bing.com

后端拿到后转成文件名 www_baidu_com 去查缓存字典,如果有缓存直接返回缓存图标,如果没有找到缓存就执行一遍获取图标的流程,获取图标加入缓存再返回给前端;

最后

这样就实现了一个成功率高达 99% 的获取任意网站的服务,后续扩展还可以将常用网站的 icon 替换成高清图标。

同时,这个服务已经开放,欢迎大家使用,服务假设在香港服务器,境内外的网站都可以获取没有任何限制,如果你也是做导航的可以试试看,再也不用自己挨个上传,或者手动获取图标缓存到自己服务器上了,只需要简单的拼接就可以实现高可用的 icon 获取;

接口地址(以下服务由 月落 提供):

https://icon.bqb.cool?url=目标网址

目录
相关文章
|
Web App开发 域名解析 缓存
如何在 Ubuntu 20.04 上安装 Node.js 和 npm
本文我们主要为大家介绍在 Ubuntu 20.04 上安装 Node.js 和 npm 的三种不同的方式。
162315 7
如何在 Ubuntu 20.04 上安装 Node.js 和 npm
|
iOS开发
如何找到Xcode中下载的Provisioning Profile文件
如何找到Xcode中下载的Provisioning Profile文件
1641 1
|
存储 关系型数据库 MySQL
MySQL是怎样存储数据的?
MySQL是怎样存储数据的?
|
搜索推荐 Android开发 开发者
Android应用开发:实现自定义ViewPager2的完全指南
【5月更文挑战第23天】 在移动应用开发的领域中,为用户提供流畅且直观的界面体验至关重要。Android平台上的ViewPager2组件提供了一个强大的方式来实现可滑动的页面,但有时候默认的行为和样式可能无法满足特定的设计要求。本文将深入探讨如何通过创建一个自定义的ViewPager2来扩展其功能,包括实现新的转换效果、修改指示器样式以及增加触摸事件响应等。我们将提供详尽的步骤和代码示例,帮助开发者掌握创建高度定制的ViewPager2所需的关键概念和技术。
|
Web App开发 缓存 区块链
想在网站中使用其它站点的 favicon,看这篇就够了
最近在开发一个 chrome 插件,其中需要读取到对应网站的 favicon 图标,遇到一些问题记录一下。
|
JavaScript
Uniapp Vue3 基础知识点附带实例
Uniapp Vue3 基础知识点附带实例
180 0
|
敏捷开发 前端开发 开发者
【RaETable】🚀🚀🚀告别Form,RaETable表格列宽度支持拖动调整了,附带原理说明
【RaETable】🚀🚀🚀告别Form,RaETable表格列宽度支持拖动调整了,附带原理说明
|
JavaScript 前端开发 Android开发
Android AgentWeb WebView 与js交互总结
Android AgentWeb WebView 与js交互总结
583 0
|
NoSQL 小程序 Java
微信开发框架WxJava之微信公众号开发的入门使用篇
WxJava是一款基于Java语言的微信开发Java SDK,它提供了微信支付,开放平台,小程序,企业微信,公众号等多个平台的API接口,并将其封装为易于调用的Java方法,方便Java开发者快速开发与微信相关的应用。
5660 1
|
机器学习/深度学习 人工智能 自然语言处理
Phind——一款面向开发人员的AI搜索引擎
Phind——一款面向开发人员的AI搜索引擎