iconmap.io 通过分析全球排名前1万网站的 Favicon,揭示了关于图标大小、格式(PNG为主)、颜色(紫色最流行)等有趣的数据洞察。
iconmap.io 通过分析全球排名前1万网站的 Favicon,揭示了关于图标大小、格式(PNG为主)、颜色(紫色最流行)等有趣的数据洞察。
本文分析了来自 Tranco 前 10 万网站的 425909 个 favicon,主要用于浏览器标签页、主屏幕和 Google 搜索结果。研究检查了 HTML 中的 link rel="icon"、回退路径 /favicon.ico 等位置,并统计了加载时间、文件大小和分辨率分布。平均 favicon 请求耗时 130ms,中位文件大小 1.9kB,52.5% 的网站至少有一个 128x128 或更大的图标。
本文将 Apple touch icon 作为独立于 favicon 的图标类型进行统计,用于 iOS 主屏幕添加。检查了 /apple-touch-icon.png 回退路径及 HTML 中的 link rel="apple-touch-icon",发现 43% 的网站提供该图标,其中 96.1% 为 PNG 格式。部分网站仍使用已过时的 precomposed 变体。
本文将 Web App Manifest 中的图标列为 favicon 生态的一部分,通过 link rel="manifest" JSON 文件提供,主要服务于 PWA 场景。研究在爬取时同时解析 manifest 中的图标路径,并纳入整体文件格式与分辨率统计。
本文指出 manifest 中的图标主要面向 PWA,用于提供安装到主屏幕的高质量图标。研究将 PWA 图标与传统 favicon、Apple touch icon 一起纳入 425909 个图标的统一分析,统计其分辨率和文件格式分布。
本文重点分析了 ICO 文件格式在 favicon 中的持久使用,56% 的 ICO 文件仅包含单张图像,少数文件包含多达 20 张或 64 张不同尺寸的图像。最常见的尺寸组合为 16x16、16x16+32x32+48x48 等,占全部 ICO 的 79%。
本文统计显示,71.6% 的 link rel="icon" 图标采用 PNG 格式,21.1% 的 /favicon.ico 文件实际也是 PNG。Apple touch icon 中 PNG 占比达 96.1%,SVG 则仅占 1.1%,且 Safari 支持有限。部分网站存在格式标注错误,如将 PNG 声明为 image/x-icon。
本文指出SVG图标占比仍低,中仅1.1%为SVG,Top 1000网站升至2.5%。Safari支持不足是主要阻碍,但作者仍推荐使用,同时提到9%的网站提供SVG mask-icon。SVG被视为未来方向,能避免多尺寸重复文件。
研究中使用ImageMagick进行图片处理与主色分析,同时指出其对ICO文件缺少magic number的处理问题。该工具帮助完成425909个图标的格式识别与尺寸统计。
文中指出 SVG 格式图标因 Safari 支持不足而普及受限,同时统计了 9% 的网站为 Safari 提供了 mask-icon;另提到 Apple touch icon 的使用情况也与 Safari/iOS 相关。
文章引用HTML Living Standard中favicon部分的宽松描述,指出sizes与type属性仅为提示,浏览器可忽略。作者统计这些属性的错误率达6.7%,建议浏览器直接忽略以避免误导。
本文在延伸阅读中列出RealFaviconGenerator作为生成favicon的实用工具,与besticon并列推荐,供开发者参考现代多尺寸图标生成方案。
本文在“Further Reading”部分将 besticon 列为与 RealFaviconGenerator 并列的 favicon 生成工具,链接指向其 GitHub 仓库,供读者在处理大量图标时参考使用。
文章在结尾的 favicon API 列表中提到 Icon Horse(https://icon.horse),将其与 Google、DuckDuckGo 的接口并列,作为获取网站图标的公开服务示例。
文章说明用Ruby分析Go爬虫生成的CSV结果,因为Go不适合数据处理。该步骤完成了图标格式、尺寸、颜色等各项统计与可视化。
正文开篇提到作者为构建 favicon 获取器而研究 Chrome 的图标加载逻辑,发现其代码量达数千行,由此引出对整个 favicon 生态的调研分析。
作者使用Go语言编写爬虫抓取Tranco前10万网站并规范化favicon,配合gohttpdisk缓存HTTP响应,最终输出CSV结果。Go被描述为适合抓取但不擅长数据处理的语言。
可左右滑动查看