- 原文地址：We Analyzed 425,909 Favicons
- 原文作者：Adam, Nathan & Patrick
- 译文出自：掘金翻译计划
这是对我们巨大图标图谱的分析。发送反馈以帮助 AT gurge.com。
这仅仅才20000个图标!
爬取的网站：100,000个
已下载的图标：425,909个
不起眼的favicon随着恶劣的IE5的发布而混乱降生。从那个影响深远的日子起，浏览器已慢慢地扩展了favicon技术以涵盖诸多大相径庭且缺乏文档的用例。2021年，favicons主要出现于浏览器标签页、主屏幕及谷歌搜索结果中，但它们会继续浮现于最奇怪的地方。
最近，笔者的团队致力于构建一个favicon fetcher。作为热身，我研究了Chrome如何处理图标加载。您知道Chrome的favicon加载程序有数千行代码吗？为什么如此复杂？
我们意识到了我们对于favicon生态的短见薄识。最后我们决定爬取Tranco 排名前100,000的网站并分析它们的favicons。我们检查了每个主页的favicon、Apple touch icons以及manifest图标。我们还仔细地检查了像/favicon.ico这样的路径。如下是一个让您快速了解的表格：
| 位置 | 注释 |
|---|---|
| /favicon.ico | 回退路径图标文件 |
| /apple-touch-icon.png | 回退路径 Apple touch icon |
| /apple-touch-icon-precomposed.png (obsolete) | 相同，但多了“precomposed” |
| link rel=”icon” | 从HTML链接到一个图标文件 |
| link rel=“apple-touch-icon” | 从HTML链接到一个Apple touch icon |
| ink rel=“apple-touch-icon-precomposed” (obsolete) | 相同，但多了“precomposed” |
| icons from link rel=“manifest” JSON | 对于PWAs |
在我们开始之前 - Favicon最佳方案
有许多优秀的现代文章，不厌其详地解释了favicon的最佳方案。这篇并非其一。相反，笔者邀请您阅读Masa Kudamatsu的痴迷研究——2021年如何使用Favicon。
速度、文件大小和分辨率
favicon的平均网络请求需要130毫秒，至少在我们的高速云实例里是这样的。排名前1000的网站表现稍好一些。平均为80毫秒。favicon文件的中位数是1.9k字节。不过，并非谁都如此体贴。Discord的图标是一个280k的怪物。这个当下流行的聊天app价值150亿美元，他们应该遵循微软2007年勉强的建议将256x256转换为PNG格式。我打赌这会缩减他们的Cloudflare账单。
最大的胜者是来自 eventhorizontelescope.org的令人着迷的favicon，其大小高达7MB。当我下载这个图标后，它对我的电脑的磁盘占用增加了，并且几乎崩溃为一个黑洞。
当我们检查所有图标文件(包括apple touch和manifest 图标)时，我们发现许多网站的图标分辨率更高。52.5%的网站至少有一个128x128或更大的图标。18.3%的网站的图标大于等于256x256。
也有可能会过火。Lufthansa拥有一个7087x5197的apple touch icon。NFL的favicon是烦人的2000x2000。
像VSCode致敬，这是一个很棒的112字节的苗条图标：
顺便提一下，我们所检查的2%图标不是正方形的。这是一个来自Zendesk的诡异的40x31样本：
还可以看到来自Huge Domains的难以置信的懒惰Apple touch icon，它只是重新用了下他们的logo。伙计，将您这网站添加到iOS主屏幕的那些人们并不会高兴。
ICO 文件
ICO文件格式展现出令人惊讶的持久力。早在PNG流行十多年前，我就喜欢上了ICO文件，尽管它们有很多缺点。譬如说缺乏幻数(magic number)，好吧有点离题了。
56%的ICO文件只包含一个图片，这很正常。您知道令人震惊的是什么吗？hola.org的图标，包括20幅图像，12x12、13x13、14x14、15x15、16x16、17x17、18x18、19x19、20x20、21x21、22x22、23x23…
看看这个惊人的ICO，有64张图，大约都是16x16，我怀疑这是一个bug。
调查的最初目标是确定ICO文件文件分辨率的趋势。我很高兴能给出最终答案。ICO文件中包含不同分辨率图像的百分比是多少？
最常见的组合依次是16x16、16x16+32x32+48x48、16x16+32x32以及32x32。这些组合占据所有ICO文件的79%。
图像格式
网站提供的绝大多数favicon都是PNG格式。71.6% 的 <link rel=”icon”> 图像是PNG。21.1% 的 /favicon.ico 文件是私密的PNG，包括Reddit的。奇怪的是，只有96.1%的Apple touch icons是PNG。大概是其余4%已损坏了吧。
一些网站对格式深感困惑。例如uts.edu.au 的PNG 图标事实上是一个Photoshop PSD文件。还有一些老顽固死守着陈旧的BMP文件，懒得升级。
由于Safari缺乏支持，SVG正在发展中。1.1% 的<link rel=”icon”>文件是SVG，在前1000个网站中这一比例上升到2.5%。这是无比正确的道路。同时，9%的网站为Safari设置了SVG mask-icon。
不幸的是，膨胀的favicon生态导致了图标数量的相应增长。例如，Seeking Alpha提供了26个大小不同的相同图标图片。有用提示 - 现在浏览器可以像Photoshop一样调整大小：
appmaker.xyz也不甘示弱，提供了141几乎相同的favicon供您欣赏：
图标 HTML
您知道，编写Web浏览器是非常困难的。我们的浏览器应该显示div，记录广告定向的每一次点击，并渲染favicon。您依赖于页面提供的HTML来渲染favicon。但不幸的是，web开发人员(比如我)是无能为力的。不仅仅是小人物，即便是顶级科技公司也无法保证其HTML正确。
Youtube说他们的图标是144x144，但事实上是145x145。
<link rel="icon" href=".../favicon_144x144.png" sizes="144x144" />
$ identify https://www.youtube.com/s/desktop/3f03b58f/img/favicon_144x144.png
favicon_144x144.png PNG 145x145 145x145+0+0 8-bit sRGB 1664B 0.000u 0:00.000
Twitter说他们的favicon是一个image/x-icon类型，但其实是PNG类型。
<link rel="shortcut icon" href=".../twitter.ico" type="image/x-icon" />
$ identify https://abs.twimg.com/favicons/twitter.ico twitter.ico PNG 32x32
32x32+0+0 8-bit sRGB 912B 0.000u 0:00.000
HTML 现行标准中措辞松散的favicon部分清楚地表明sizes=xxx和types=xxx 属性只是提示。浏览器可以随意忽略它们。事实上，我也建议浏览器忽略这些提示，因为它们大多数时候都是错误的。我们计算出这些属性的错误率为6.7%，图像经常大小不同或文件格式不匹配。
74%的网站都有一个<link rel=”icon”>标签。43%的网站有一个apple touch icon。13%的网站依然有烦人的预合成变形。最短faviconURL的胜者是exe.io/fv.ico，而最长的位于facebookblueprint.com。那些坏boy们足足800字符。
0.2%的页面具有一个带有data url的favicon。telia.se魁梧的403页在data url中嵌入了一个140k的favicon。
主要颜色
我们使用ImageMagick进行了一个简单图像分析来调查favicon的颜色。下面是图标的主要颜色分类。不幸的是，这并不是很准确。我怀疑许许多多的彩色图标都与紫色混为一谈了。
方法
我们使用Go来获取和常规化favicon。使用gohttpdisk将HTTP响应缓存在磁盘上。爬虫输出一个CSV文件。我们使用Ruby来分析结果因为Go在数据整理方面很糟糕。我们寻找favicons、Apple touch icons以及manifest icons，包括像 /favicon.ico的回退路径。对于Tranco排名前100,000的域名，我们也在放弃前尝试了 https://domain.com 和 https://www.domain.com。ImageMagick一如既往地用于图像处理。
