HTML网页favicon图标添加教程

为网站添加网站图标（favicon）看似简单，实际涉及不少细节。核心步骤不多，但处理不当可能导致图标无法正常显示，或在不同设备上效果不佳。本文详细介绍相关要点。

favicon.ico 放在根目录最省事

最便捷的方式是将图标文件命名为 favicon.ico，直接放置于网站根目录。大多数浏览器会自动请求该路径（例如 https://example.com/favicon.ico），无需编写任何 HTML 代码即可生效。这对静态网站或不希望修改模板的场景非常适用。

关键点在于：文件格式必须为 .ico。虽然现代浏览器支持 PNG 格式，但为兼容老旧浏览器（尤其是旧版 IE），使用 ICO 格式最为稳妥。推荐尺寸为 16×16 或 32×32 像素。若将 PNG 图片重命名为 favicon.ico 放入根目录，部分环境下可能无法正常识别。

用 指定任意路径和格式

如需使用 PNG、SVG 格式图标，或希望将图标文件存放在子目录（如 /assets/icon.svg），则需通过 HTML 的 标签显式声明。

核心在于 rel 和 type 属性的正确组合：

• rel="icon" 为基础声明，必须包含。
• 使用 PNG 图标时，建议添加 type="image/png"，否则部分浏览器可能忽略。
• 如需使用更清晰的 SVG 图标，需指定 type="image/svg+xml"。目前仅 Chromium 内核浏览器和 Firefox 支持 SVG favicon，Safari 暂不支持。
• 可同时放置多个不同格式或尺寸的 标签，浏览器会按顺序尝试加载并使用第一个成功加载的资源。

示例代码：

多尺寸适配要靠 sizes 属性

当前设备类型多样，从移动端到桌面端，再到 PWA 应用和 Windows 开始菜单的“固定”，常需不同尺寸图标适配。仅依靠一个图标文件难以满足需求。

需使用 sizes 属性明确告知浏览器每个图标文件的尺寸，以便精准选用：

• sizes="16x16" 通常对应浏览器地址栏小图标。
• sizes="32x32" 常用于桌面浏览器书签栏或标签页。
• sizes="192x192" 或 512x512 等大尺寸是 PWA 应用清单（manifest）推荐尺寸，即使单独写在 标签中，也能被部分浏览器识别用于相应场景。
• 若不指定 sizes 属性，浏览器会尝试自行缩放图标，容易导致模糊。

注意：sizes 属性仅对 rel="icon" 等标准图标声明有效，对下文涉及的苹果专用图标无效。

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

这点常被忽略。Safari 浏览器在 iOS 和 macOS 上会完全忽略标准的 声明，须单独为苹果设备配置方案。

关键是用 rel="apple-touch-icon"：

• 图标文件建议使用 PNG 格式。
• 尺寸至少为 180×180 像素，这是 iOS 主屏幕图标的要求。
• 路径可自定义，最省事的方式是将符合尺寸要求的 PNG 文件命名为 apple-touch-icon.png 并置于网站根目录，Safari 会自动查找。
• 此标签不要添加 type 属性，苹果规范不识别该属性。
• 缺少此声明时，用户将网站添加到主屏幕，Safari 会直接截取当前网页一部分生成低质量图标，效果较差。

示例代码：

实际部署时，最容易出错的两点：一是忘记给苹果设备单独配置图标；二是服务器未正确配置 SVG 等格式的 MIME 类型，导致图标无法加载。

另外，浏览器的 favicon 缓存极为“顽固”。修改图标后，即便刷新页面也可能看不到变化。建议上线前使用浏览器的隐身模式（无痕窗口）验证，或在图标文件链接后添加查询参数强制更新，例如：favicon.pngv=2。