favicon 是浏览器在标签页、书签和历史记录中显示的小图标，当有人把你的网站保存到手机时，它也会出现在主屏幕上。把它添加到网站只需四个文件、大约五分钟——而人们遇到的大部分困扰都来自缓存，这一点会在最后一节讲到。
真正有效的最小文件集
你并不需要十六个 PNG 文件和一个 browserconfig.xml。Windows 磁贴和旧版 Internet Explorer 的格式早已过时。如今在实际使用中，四个文件就能覆盖所有浏览器和设备：
| 文件 | 尺寸 | 存在的理由 |
|---|---|---|
favicon.ico | 16 · 32 · 48（多尺寸） | 面向老旧浏览器，以及会直接抓取 /favicon.ico 的 Google 搜索。 |
icon.svg | 矢量 | 现代浏览器更青睐它——在任何尺寸下都清晰，还能适配深色模式。 |
apple-touch-icon.png | 180 × 180 | iOS 主屏幕和 Safari。iOS 在这里会忽略 SVG，因此必须提供 PNG。 |
android-chrome 192 & 512 | 192 · 512 | Android 主屏幕和可安装的 PWA，由 web app manifest 引用。 |
要粘贴到 <head> 中的 HTML
<link rel="icon" href="/favicon.ico" sizes="48x48"> <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">
浏览器会读取全部四行，并从中挑选它所支持的最佳格式，因此较新的 Chrome 或 Safari 会使用 SVG，而旧版浏览器则回退到 .ico。.ico 那一行里的 sizes="48x48" 只是声明该文件内部所包含的最大图像尺寸。
web app manifest
manifest 让 Android 和 PWA 安装能够使用合适的图标。一个最简的 site.webmanifest：
{
"icons": [
{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }
]
}
"purpose": "any maskable" 让 Android 可以把图标裁剪成它的自适应形状而不会切掉你的 logo——前提是你在图标四周留出安全边距（参见进阶技巧）。
文件放在哪里
把每个文件都放在网站的根目录中。浏览器——以及 Googlebot——即使没有 <link> 标签，也会自动从根目录请求 /favicon.ico，因此把它放在那里是最稳妥的默认做法。
验证它是否真的生效
- 强制刷新页面：
Ctrl+Shift+R（Windows）或Cmd+Shift+R（Mac）。 - 还是不行？在隐私/无痕窗口中打开网站——它以空缓存启动。
- 直接加载每个文件，例如
yourdomain.com/favicon.ico，确认它返回的是图像（HTTP 200），而不是 404。 - 在 DevTools 中检查渲染后的
<head>，而不仅仅是你的源文件——构建步骤或 CMS 可能会改写路径。
最浪费时间的一件事：缓存
浏览器对 favicon 的缓存几乎比任何其他资源都更顽固，有时即使普通刷新也仍会保留旧图标。如果新图标迟迟不出现：
- 强制刷新，然后彻底关闭标签页再打开一个新的——favicon 缓存通常是按标签页划分的。
- 测试时，加上一个版本查询参数，让浏览器把它当作新文件：
<link rel="icon" href="/favicon.ico?v=2">。 - Google 搜索会保留自己的副本，并按自己的节奏更新——搜索结果显示新图标往往需要几天，有时甚至几周。
本站的一切都在你的浏览器中运行。你上传的图像永远不会离开你的设备——根本没有服务器可供上传。