如何在 HTML 中添加 Favicon(2026 完整指南)

在纯 HTML 网站上添加 favicon 只需要一行代码——但要把事情做对(让每个浏览器、手机和 PWA 安装都显示正确的图标),还需要多花一些功夫。这是完整的 2026 指南:精确的标签写法、文件存放位置,以及一个涵盖所有格式的可复制代码块。

最简做法:一行 HTML

最简单的情况下,favicon 只是 <head> 中引用的一个文件:

<link rel="icon" href="/favicon.ico">

把 favicon.ico 放在网站根目录(与 index.html同一文件夹),在 <head> 中加上那个标签,基础部分就完成了。

完整的 HTML favicon 配置

上面的一行代码可用,但现代浏览器、iOS 和 Android 各自偏好不同的格式和尺寸。以下是完整且推荐的代码块:

<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="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

每一行的作用:

favicon.ico — 所有浏览器(包括老旧浏览器)的通用兜底
favicon-32x32.png / favicon-16x16.png — 供现代浏览器标签页使用的清晰 PNG 图标
favicon.svg — 供现代浏览器使用的矢量图标;任意尺寸都保持清晰
apple-touch-icon.png — iOS 用于主屏幕应用的 180×180 图标
site.webmanifest — 为 Android/Chrome 关联图标的 PWA manifest

不想手动创建这些文件? 上传一张图片到 Favicon.one,即可下载包含上述所有文件及可直接粘贴的 HTML 的 ZIP 包。

favicon 文件放在哪里

放在网站根目录——与 index.html相同的目录。上面 href 中的前导 / 表示"从站点根目录开始",因此无论浏览器当前在哪个页面,都能找到它们。

your-website/
├── index.html
├── about.html
├── favicon.ico            ← here
├── favicon-32x32.png
├── favicon-16x16.png
├── favicon.svg
├── apple-touch-icon.png
└── site.webmanifest

link 标签详解

<link rel="icon"> 元素告诉浏览器 favicon 的位置。关键属性如下:

rel="icon" — "这是一个 favicon"
type — MIME 类型(image/x-icon、image/png、image/svg+xml)
sizes — 像素尺寸,便于浏览器选择最合适的一个
href — 文件路径

当你声明多个带有不同 sizes 的 <link rel="icon"> 标签时,浏览器会为当前显示环境选择合适的那个(例如普通屏幕上用 16×16,retina 屏幕上用 32×32)。

Web manifest

site.webmanifest 文件为 Android Chrome 和可安装的 PWA 关联图标。一个最小示例:

{
  "name": "My Website",
  "short_name": "MySite",
  "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"
}

常见错误

1. 使用非正方形图片

Favicon 必须是正方形(1:1)。矩形图片会显得拉伸变形或显示为空白。

2. 忘记 type 属性

不写 type 时,某些浏览器会猜测错误,并拒绝渲染以 image/png 提供的 .ico 文件。

3. 文件放在子文件夹却使用根路径

如果文件位于 /assets/ 中,href 必须是 /assets/favicon.ico,而不是 /favicon.ico。

4. 浏览器缓存

浏览器会非常激进地缓存 favicon。如果看不到新图标,请在无痕窗口中测试。完整内容请参阅我们的 "Favicon 不显示"故障排查指南。

Favicon 尺寸速查表

文件	尺寸	用途
`favicon.ico`	16/32/48	通用兜底
`favicon-32x32.png`	32×32	现代浏览器标签页
`favicon-16x16.png`	16×16	旧版标签页
`favicon.svg`	矢量	现代浏览器、深色模式
`apple-touch-icon.png`	180×180	iOS 主屏幕

完整说明见favicon 尺寸指南。