rel="icon" 基本写法需显式声明 href、sizes 和 type，仅<link rel="icon" href="favicon.ico"> 易失效；现代浏览器要求 .ico 为 16×16/32×32 且 MIME 为 image/x-icon，PNG 需指定 type="image/png"；Safari 依赖 rel="apple-touch-icon" 且要求纯色背景、180×180 正方形无效果；务必验证服务器返回正确 Content-Type 并清除强缓存。
rel="icon" 的基本写法和常见失效原因
直接写 <link rel="icon" href="favicon.ico"> 大概率不生效——现代浏览器默认只认 .ico 格式，且要求尺寸为 16×16 或 32×32 像素，还必须是 image/x-icon MIME 类型。如果用 PNG 当作 icon 提供但没声明 type，Chrome 和 Edge 会静默忽略。
- 务必检查服务器是否正确返回
Content-Type: image/x-icon（对.ico）或image/png（对.png） - 路径必须可访问：打开浏览器直接访问
https://yoursite.com/favicon.ico能看到图标才算部署成功 - 不要依赖根目录自动查找：显式写
href="/favicon.ico"，避免相对路径在子路由下解析失败
支持多尺寸和多格式的 modern 写法
单靠一个 rel="icon" 已不够。Chrome 90+、Firefox 84+ 默认优先使用 rel="icon" 中带 sizes 和 type 的项；Safari（macOS/iOS）则更依赖 rel="apple-touch-icon"。
- 推荐同时提供：
<link rel="icon" href="/favicon-32x32.png" sizes="32x32" type="image/png"> - 兼容旧版：
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32" type="image/x-icon"> - iOS 主屏图标（必须）：
<link rel="apple-touch-icon" href="/apple-touch-icon.png">（建议 180×180，无透明边距） - 不要漏掉
manifest.json：PWA 场景下，<link rel="manifest" href="/manifest.json">是 Android Chrome 正确显示标签页图标的前提
开发中图标不更新？缓存比你想象得更顽固
浏览器对 favicon 的缓存策略极其激进：即使你改了文件内容，只要 URL 没变，就可能沿用旧缓存数小时。硬刷新（Ctrl+Shift+R）通常无效。
- 最快验证方式：在隐身窗口打开页面，或用 curl 检查响应头：
curl -I https://yoursite.com/favicon.ico看Cache-Control - 临时解决：给图标 URL 加版本参数，如
href="/favicon.ico?v=2"（上线后需配合构建工具自动哈希） - 彻底清缓存：Chrome 中访问
chrome://settings/clearBrowserData→ 勾选「Cached images and files」→ 清除 - 注意：修改
<link>标签本身不会触发 favicon 重加载，必须刷新整个页面
为什么 Safari 标签页还是空白？
Safari（尤其是 iOS）对图标有额外限制：它不从 rel="icon" 取值，而是优先找 rel="apple-touch-icon"，且要求图片背景为纯白或透明，不能有阴影/描边/渐变——否则会自动裁切并填充白色背景，导致图标“消失”。
立即学习“前端免费学习笔记（深入）”；
- 导出时关闭所有效果：Photoshop 中关掉图层样式，Figma 中取消 shadow/fill gradient
- 尺寸必须为正方形，且推荐 180×180（iOS 最大支持），不要带任何 padding
- 测试真机：模拟器不可靠，必须用 iPhone 实测
https://站点（HTTP 下 Safari 完全忽略 apple-touch-icon） - 如果仍不显示，检查
manifest.json中icons字段是否覆盖了 192×192 和 512×512 尺寸——这是 PWA 必需的
favicon.ico 返回 text/plain，或者 apple-touch-icon.png 带了半透明阴影，标签页就会空着。 
