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

本篇文章是我在做独立开发作品「标签星球」的时候而产生的一个需求，这个需求看似不难，但是很难找到完全契合的服务，于是决定自己研究一下，搞一套完整的 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=目标网址