不必须，但不加 type 或 sizes 会导致 safari 和旧版 edge 忽略图标；type 推荐显式声明为 image/png 或 image/svg+xml，sizes 仅对 png 或 ico 有效且 svg 不支持。
link rel="icon" 的基本写法必须带 type 和 sizes 吗？
不必须，但不加 type 或 sizes 会导致部分浏览器（尤其是 Safari 和旧版 Edge）忽略图标，或错误 fallback 到默认 favicon.ico。
-
type推荐显式声明：type="image/png"（PNG）、type="image/svg+xml"（SVG），避免 MIME 类型猜测失败 -
sizes仅对rel="icon"且type="image/png"或image/x-icon有效；SVG 图标不能设sizes，设了会被忽略 - 最简可用写法：
<link rel="icon" href="/favicon.ico">—— 仅兼容传统 .ico 文件，且依赖服务器返回正确 MIME
用 PNG 或 SVG 当 favicon 时的常见报错和修复
Chrome 控制台报 Failed to load resource: the server responded with a status of 404 () 或图标显示为灰色方块，大概率是路径、MIME 或尺寸问题。
- PNG 必须提供至少一个标准尺寸：推荐
sizes="32x32"或sizes="192x192"（PWA 场景），否则 iOS/Safari 可能拒用 - SVG 图标需确保：① 文件后缀为
.svg；② 服务器返回Content-Type: image/svg+xml；③ 不含外部引用（如<image xlink:href></image>）或 JS —— 否则多数浏览器直接禁用 - 本地测试时，直接双击打开 HTML 可能因 file:// 协议导致 SVG 图标加载失败；务必用本地服务器（如
npx serve）启动
如何同时支持桌面、iOS、Android 和 PWA 的图标链？
单靠一个 <link rel="icon"> 不够。不同平台读取不同标签，漏掉就降级成浏览器默认图标。
- iOS 主屏图标用
<link rel="apple-touch-icon" href="/icon-180.png">，必须是 PNG，推荐 180×180，不支持 SVG - Android PWA 需要
<link rel="manifest" href="/manifest.webmanifest">，其中icons数组定义各尺寸 PNG（如 192×192、512×512） - 桌面浏览器现代用法建议补一句：
<link rel="icon" href="/icon-32.png" sizes="32x32" type="image/png">，再加一行<link rel="icon" href="/icon-16.png" sizes="16x16" type="image/png"> - 所有图标路径建议用绝对路径（以
/开头），避免相对路径在子路由下失效
为什么改了 favicon 但浏览器一直不更新？
不是代码写错了，是缓存太顽固 —— 浏览器、CDN、甚至 DNS 都可能卡住旧图标。
立即学习“前端免费学习笔记（深入）”；
- 强制刷新图标：在地址栏输入
chrome://settings/clearBrowserData，勾选「图像和文件缓存」清空；或访问chrome://restart（Chrome 重启后重载） - 上线后图标不更新？检查 HTTP 响应头：
Cache-Control对 favicon 资源建议设为max-age=3600（1 小时），别用一年 - 开发中可临时加版本参数破缓存：
href="/favicon.png?v=2"，但上线前应移除，避免 CDN 缓存分裂 - 特别注意：Safari 对
apple-touch-icon的缓存极深，真机测试前先长按主屏图标 →「删除」，再重新添加
"192x192"，不是数字数组）。这两处一错，整个图标链就断在第一环。 
