HTML中怎样给页面添加网站图标favicon

将 favicon.ico 放在根目录最省事，浏览器自动请求；需用 .ico 格式、16×16 或 32×32 像素；PNG/SVG 等需用 <link rel="icon"> 显式声明并指定 type；多尺寸用 sizes 属性；苹果设备须额外添加 rel="apple-touch-icon"。

favicon.ico 放在根目录最省事

绝大多数浏览器默认会自动请求 /favicon.ico，只要把图标文件命名为这个、放在网站根目录（比如 https://example.com/favicon.ico），不用写任何 HTML 就能生效。适合静态站点或不想改模板的场景。

注意：必须是 .ico 格式，且推荐尺寸为 16×16 或 32×32 像素；现代浏览器虽支持 PNG，但旧版 IE 只认 ICO，放根目录时别用 .png 后缀。

用 <link rel="icon"> 指定任意路径和格式

想用 PNG、SVG 或放在子目录（如 /assets/icon.svg），就得显式声明。关键不是标签本身，而是 rel 和 type 的组合：

• rel="icon" 是基础声明，必须写
• 指定 PNG 时加 type="image/png"，否则部分浏览器可能忽略
• SVG 图标需写 type="image/svg+xml"，且仅 Chromium 和 Firefox 支持（Safari 不支持 SVG favicon）
• 可以同时放多个 <link>，浏览器按顺序尝试，取第一个能加载的

示例：

立即学习“前端免费学习笔记（深入）”；

<link rel="icon" href="/assets/favicon-32.png" sizes="32x32" type="image/png"><link rel="icon" href="/assets/favicon.svg" type="image/svg+xml">

多尺寸适配要靠 sizes 属性

移动端、PWA、Windows 钉选等场景需要不同尺寸图标，仅靠一个文件不够。这时不能只依赖 href，得用 sizes 明确标注：

• sizes="16x16" 对应地址栏小图标
• sizes="32x32" 常用于桌面书签
• sizes="192x192" 或 512x512 是 PWA manifest 推荐尺寸，但单独写在 <link> 中也能被部分浏览器识别
• 不写 sizes 时，浏览器会自行缩放，可能模糊

注意：sizes 只对 rel="icon" 有效，对 rel="apple-touch-icon" 等其他类型无效。

苹果设备要用 rel="apple-touch-icon"

Safari 在 iOS/macOS 上完全忽略标准 <link rel="icon">，必须额外声明：

• 文件建议用 PNG，尺寸至少 180×180（iOS 主屏幕图标要求）
• 路径可自定义，但推荐放在根目录并命名为 apple-touch-icon.png
• 不要加 type 属性，苹果不认
• 如果没声明，用户添加到主屏幕时，Safari 会截屏生成低质图标

示例：

立即学习“前端免费学习笔记（深入）”；

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

实际部署时最容易漏的是苹果图标和 SVG 的 MIME 类型声明；另外，修改 favicon 后浏览器缓存极顽固，建议上线前用隐身窗口验证，或临时加版本号如 favicon.png?v=2。