html5静态网页如何设置favicon_网站图标添加步骤【指南】

favicon 是网站图标，必须用 声明在 中，rel 值仅限 "icon"，href 需准确路径；推荐提供 32×32 和 192×192 PNG 及 favicon.ico，并显式声明 sizes。

favicon 是什么，为什么必须用

favicon 不是 HTML5 新增功能，但现代浏览器默认只识别通过 声明的图标，直接放 favicon.ico 在根目录已不可靠。Chrome、Edge、Firefox 都会忽略未声明的根目录图标，尤其在 PWA 或添加到桌面时必报错 Failed to load resource: the server responded with a status of 404 (Not Found)。

关键点：
– 必须写在 内
– rel 属性必须是 "icon"（不是 "shortcut icon"，后者已被弃用）
– href 路径需准确，推荐用绝对路径或以 / 开头的相对路径

支持多尺寸与格式：用 多次声明最稳妥

不同设备和上下文需要不同尺寸和格式：桌面浏览器常用 favicon.ico（16×16 / 32×32），iOS Safari 要求 apple-touch-icon.png（180×180），Android Chrome 添加到主屏依赖 manifest.json 中的 icons，但静态页可先用 补齐。

• 优先提供 .png 格式（支持透明、无压缩失真），至少含 32x32 和 192x192 两版
• favicon.ico 仍建议保留，用于兼容旧 IE 和部分邮件客户端
• 不要依赖单一 type="image/x-icon" —— 现代浏览器自动识别，写反而易出错

路径错误是最常见原因：检查 href 是否真能访问

本地开发时容易误以为 ./favicon.png 或 favicon.png 可用，但部署后常 404。浏览器不会提示“图标没找到”，只会静默失败 —— 表现为地址栏空白、书签无图标、PWA 安装失败。

验证方法：
– 打开浏览器开发者工具 → Network 标签页 → 刷新页面 → 筛选 favicon 关键字
– 直接在地址栏输入完整图标 URL（如 https://yoursite.com/favicon-32x32.png），看是否返回 200

• 静态站点生成器（如 Hugo、Jekyll）中，确保图标文件放在 static/ 或 assets/ 下，并被正确复制到输出根目录
• GitHub Pages 用户注意：路径必须相对于仓库根（即 https://user.github.io/repo/ 时，href 应为 /repo/favicon.png）
• 避免使用查询参数（如 favicon.png?v=2），某些 CDN 或缓存策略会截断

不加 sizes 也能工作，但 iOS 和 PWA 场景下会失效

省略 sizes 属性时，浏览器会尝试解析图片实际尺寸，但 iOS Safari 对 强制要求显式尺寸声明（否则降级为小图甚至忽略）。PWA 的 manifest.json 也要求每个 icon 指定 sizes 字段，提前统一尺寸命名能减少后续迁移成本。

建议命名规范：
– favicon-16x16.png、favicon-32x32.png、favicon-192x192.png
– 对应 sizes 值严格匹配，如 sizes="192x192"，不能写成 "192x192px" 或 "192"

真正容易被忽略的是：图标文件本身必须是纯正方形像素尺寸，用 CSS 缩放或非正方形 PNG 会导致 iOS 显示异常（带白边、拉伸、裁切）。