给网站添加 Favicon 是最简单但影响力最大的事情之一。以下是完整的 HTML 代码指南，从最简配置到专业级设置。

第一步：准备 Favicon 文件

在编写 HTML 之前，你需要实际的图标文件。有两种选择：

最少需要：

第二步：放置文件到根目录

将 Favicon 文件上传到网站的根目录（与 index.html 同级）。即使没有 HTML 声明，浏览器也会自动在根目录查找 /favicon.ico。

your-website/
├── index.html
├── favicon.ico
├── favicon-32x32.png
├── favicon-16x16.png
├── apple-touch-icon.png
├── android-chrome-192x192.png
├── android-chrome-512x512.png
└── site.webmanifest

第三步：在 <head> 中添加 HTML

最简配置（2 行）

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

覆盖浏览器标签页和 iOS 主屏幕。个人项目够用了。

推荐配置（5 行）

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<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">

覆盖所有现代浏览器、iOS、Android 和 PWA。这是我们推荐的生产环境配置。

完整专业配置（带主题色）

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<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">
<meta name="theme-color" content="#ffffff">
<meta name="msapplication-TileColor" content="#ffffff">

site.webmanifest 文件

这个 JSON 文件告诉 Android 和 PWA 你的图标信息：

{
  "name": "你的网站名",
  "short_name": "简称",
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

各框架特别说明

React（Create React App / Vite）

将 Favicon 文件放在 public/ 文件夹中，在 public/index.html（CRA）或 index.html（Vite）中添加 link 标签。

Next.js（App Router）

将 favicon.ico 放在 app/ 目录中。Next.js 13+ 会自动提供服务。其他格式使用 layout.tsx 中的 metadata 导出。

WordPress

进入外观 → 自定义 → 站点身份 → 站点图标。上传 512×512 的 PNG，WordPress 会自动生成所有尺寸。

测试你的 Favicon

添加代码后：

  1. 强制刷新浏览器（Ctrl+Shift+R 或 Cmd+Shift+R）— Favicon 缓存很重。
  2. 在无痕/隐私模式中打开，完全绕过缓存。
  3. 检查 Google 富媒体搜索结果测试，看 Favicon 在搜索结果中的显示效果。
  4. 在真实 iPhone/iPad 上测试添加到主屏幕功能。

常见错误