如果你现在去翻看你的 Web 服务器日志，几乎肯定能发现一个针对 favicon.ico 文件的 404 错误。即使你从未在 HTML 中写过任何请求该文件的代码，浏览器也会自动去寻找它。为什么？这要归咎于 1999 年一位微软开发者做出的一个古怪的工程决策。
了解 favorite icon 起源与历史并不仅仅是为了增加一些 Web 冷知识。它能准确解释为什么在 2026 年的今天，我们仍然需要处理那些老旧的文件格式，以及为什么浏览器标签页的行为有时会让人摸不着头脑。
Favorite Icon 的诞生 (1999)
1999 年 3 月，微软发布了 Internet Explorer 5。在众多新功能中，有一个由开发者 Bharat Shyam 创造的视觉小调整。他希望找到一种方法，让用户在 Windows 的“收藏夹”（Favorites）菜单中，能一眼认出那些被标记的书签。
他的解决方案是：让浏览器自动去网站的根目录下寻找一个 16x16 像素的图标文件。因为这个图标是专门为“收藏夹”菜单设计的，他将其命名为“favorite icon”。开发者们很快就把这两个词拼在了一起，于是就有了我们今天熟知的“favicon”。
根目录的“潜规则”
最初的实现方式完全是隐式的。你不需要使用任何 HTML 标签来定义图标。你只需要把一个名为 favicon.ico 的文件扔进服务器的根目录（比如 https://example.com/favicon.ico）。每当用户收藏该网页时，IE5 就会默默地去请求这个 URL。
这正是现代浏览器今天仍然在盲目请求该文件的原因。这是一个深深烙印在 Web 架构核心中长达 27 年的习惯。如果你想深入了解为什么这种特定的容器格式能存活至今，可以看看我们关于 ICO 文件格式的指南。
从书签到浏览器标签页
在 2000 年代初期，Web 经历了一次巨大的用户体验转变。像 Firefox 以及后来的 Chrome 这样的浏览器普及了标签页浏览（Tabbed browsing）。favorite icon 从隐藏的书签菜单中走了出来，直接登上了活跃的浏览器标签页。
这一转变改变了一切。图标不再仅仅是一个书签标识符；它变成了一个主要的导航工具。当用户打开了 40 个标签页时，他们根本不会去读网页标题，他们只会扫视那些图标。
真实世界的品牌演变
看看 Google 就知道了。在早期，他们的 favicon 是一个简单的、带有 3D 风格的大写字母“G”。随着标签页变得越来越小，以及高分辨率显示器的出现，那个复杂的 3D Logo 变成了一团模糊的泥巴。今天，Google 使用的是一个扁平的、高度优化的、多色的 SVG 格式的“G”，它可以在任何设备上完美缩放。
GitHub 则更进一步。他们不仅仅使用静态图标。他们使用 JavaScript 动态切换 favicon，以显示持续集成（CI）构建的实时状态（绿色勾号表示成功，红色叉号表示失败）。这把一个简单的品牌元素变成了一个功能强大的仪表盘小组件。
W3C 的标准化之路
依赖根目录下的隐藏文件对 Web 标准来说是一场灾难。W3C 最终介入，规范了开发者应该如何声明这些图标。他们引入了 <link rel='icon'> 属性。
不幸的是，早期的标准化过程非常混乱。微软引入了他们自己的专有语法，导致开发者在长达十年的时间里盲目复制粘贴错误的代码。如果你今天还在使用那种旧语法，你需要立刻了解为什么应该停止使用 rel='shortcut icon'。
| 时代 | 主要格式 | 实现方式 | 主要使用场景 |
|---|---|---|---|
| 1999 - 2005 | ICO | 根目录隐式请求 | 书签 / 收藏夹菜单 |
| 2006 - 2015 | PNG / ICO | HTML link rel='icon' | 浏览器标签页和地址栏 |
| 2016 - 2026 | SVG / WebP | Web Manifest 和 SVG 链接 | 移动端主屏幕、暗黑模式、PWA |
移动革命 (2007 - 至今)
当史蒂夫·乔布斯发布 iPhone 时，他也引入了“Web Clip”功能，允许用户将网站保存到主屏幕上。一个 16x16 像素的 ICO 文件在高分辨率的手机屏幕上看起来简直惨不忍睹。
苹果创造了 apple-touch-icon 标准，迫使开发者提供大得多的 PNG 文件（最高可达 180x180 像素）。不久之后，Android 和 Google 引入了 Web App Manifest，要求为渐进式 Web 应用（PWA）提供一系列不同尺寸的图标。
2026 年的现代最佳实践
我们已经远远超越了那个只需把一个文件扔进服务器文件夹的时代。以下是代码演变的过程：
<!-- 1999年：不需要代码。直接把 favicon.ico 放在根目录 -->
<!-- 2010年：混乱的过渡期 -->
<link rel='shortcut icon' href='/favicon.ico' type='image/x-icon'>
<!-- 2026年：现代的、优化的技术栈 -->
<link rel='icon' href='/icon.svg' type='image/svg+xml'>
<link rel='apple-touch-icon' href='/apple-touch-icon.png'>
<link rel='manifest' href='/site.webmanifest'>
我的建议？停止依赖隐式的根目录请求。这是一种偷懒的做法，会在你的服务器日志中造成不必要的 404 错误。使用现代 HTML 显式地定义你的图标。
- 为现代浏览器使用 SVG： 它可以无限缩放，并通过 CSS 媒体查询支持暗黑模式。
- 提供 Apple Touch Icon： iOS 仍然会忽略你的 web manifest，而去寻找这个特定的标签。
- 保留 32x32 的 ICO 作为降级方案： 旧系统和一些 RSS 阅读器仍然需要它。
如果管理所有这些历史格式听起来让人精疲力尽，那正是我们开发 Mzu favicondl 的原因。你只需上传一张高分辨率图片，我们就能生成你所需的确切文件组合，既能满足 1999 年的 IE5 浏览器，也能完美适配 2026 年的 iPhone。