本篇文章是我在做独立开发作品「标签星球」的时候而产生的一个需求,这个需求看似不难,但是很难找到完全契合的服务,于是决定自己研究一下,搞一套完整的 icon 获取托管服务解决方案。
标签星球,是一个基于浏览器收藏夹的起始页,可以将收藏夹变为导航页形式展示,并支持模糊搜索,以及导出收藏夹,生成收藏夹订阅源分享给其他小伙伴等功能
前言
做过导航站的朋友肯定都遇到过这么一个需求,展示每个网站的 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=目标网址