如何为你的网站添加 Favicon（分步指南）
四步搞定，从空白标签页到像素级完美的品牌标识。适用于任何 HTML 网站、CMS 或框架。
开始前你需要准备什么
单个 16x16 的 favicon 如今已经不够用了。现代浏览器、iOS、Android 和 Windows 各自会请求不同的尺寸和格式。在添加任何标签之前，先确保你已经有一套完整的图标。
最小集合
| 文件 | 尺寸 | 谁需要它 |
|---|---|---|
| favicon.ico | 多分辨率 | 默认请求 /favicon.ico 的浏览器和爬虫 |
| favicon-16x16.png | 16x16 | 浏览器标签页和地址栏 |
| favicon-32x32.png | 32x32 | Retina 标签页、书签、桌面快捷方式 |
| apple-touch-icon.png | 180x180 | iOS 主屏幕 |
| Manifest 图标 | 192x192 | Android 主屏幕，从 web manifest 中引用 |
这些尺寸实际看起来是什么样
四个步骤
- 1
生成你的 favicon 文件
让生成器一次性产出所有尺寸、.ico 精灵图和一份调好的 manifest.json。丢进一个 logo、一张截图，甚至一个 emoji，就能下载完整套件。第一次做图标？先从如何制作 favicon 开始。
- 2
把文件添加到网站根目录
将下载的文件复制到为你域名根路径提供服务的目录。在静态网站上那是根文件夹；在大多数框架里是 public/ 目录。目标是让 https://yoursite.com/favicon.ico 能直接解析。
- 3
把 link 标签添加到 <head>
在每个页面的文档 <head> 中用 <link> 标签引用各个图标（icon、apple-touch-icon 和 manifest），这通常意味着一个共享的模板或布局。
- 4
验证是否生效
部署后，强制刷新并查看标签页。最可靠的检查方式是自动扫描，它会确认每个标签都能解析，并标记出任何缺失的平台图标。
link 标签
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">把这些粘贴到每个页面的 <head> 元素内。manifest 链接就是让你获得安装提示和主屏幕图标的东西。参见什么是 manifest.json。
各平台专属快捷方式
在用框架或 CMS？其中好几个会按自己的约定帮你处理 head 标签。平台指南涵盖了 Next.js、React、WordPress 和 Shopify。
常见错误
| 错误 | 修复方法 |
|---|---|
| 浏览器缓存 | 旧的 favicon 会残留。强制刷新，或在 link 的 href 后追加 ?v=2。 |
| 路径错误 | 开头的斜杠很重要。/favicon.ico 是从根路径提供的，而不是从当前文件夹。 |
| 缺少 apple-touch-icon | 没有它，iOS 主屏幕会退而使用一张模糊的截图。 |
常见问题
favicon 文件放在哪里？
把 favicon.ico 和其他图标文件放在网站的根目录（大多数框架里是 public/ 文件夹），这样它们就能从域名根路径提供，例如 https://example.com/favicon.ico。
我还需要 favicon.ico 文件吗？
需要。浏览器和爬虫默认仍会请求 /favicon.ico，所以在现代 PNG 和 SVG 图标之外再提供一个多分辨率的 .ico，能给你最广泛的兼容性。
添加后为什么我的 favicon 不显示？
浏览器会激进地缓存 favicon。强制刷新，在链接后追加像 ?v=2 这样的版本查询字符串，并确认文件路径正确。查看我们的 favicon 故障排查指南了解每种原因。