仅写rel="icon"且用png文件图标不显示，因chrome 120+、safari 16.4+要求同时指定type="image/png"和精确sizes（如"32x32"），缺一则被忽略；需多尺寸并列声明，并保留favicon.ico兜底，ios还需apple-touch-icon，且服务器content-type必须为image/png。
为什么只写 rel="icon" 且用 PNG 文件，图标还是不显示？
因为现代浏览器（尤其是 Chrome 120+、Safari 16.4+）已不再无条件 fallback 到 PNG 图标。仅靠 <link rel="icon" href="/favicon.png"> 不足以触发渲染——type 和 sizes 缺一不可。浏览器会检查 MIME 类型是否匹配，再按 sizes 值筛选适配设备的图标；没写 sizes，部分安卓 WebView 或旧版 Edge 可能直接跳过该条目。
rel="icon" 的 type 和 sizes 怎么配才有效？
必须同时指定 type（明确格式）和 sizes（声明尺寸），否则浏览器可能忽略或降级处理：
-
type="image/png"是必须项，不能省略；写成type="png"或漏掉，Chrome 会静默跳过 -
sizes必须是精确字符串，如sizes="32x32"，不能写sizes="32"或sizes="32px" - 一个
<link>只能声明一种尺寸，要支持多屏就得多个标签并列 - 推荐组合：
<link rel="icon" type="image/png" sizes="16x16" href="/icon-16.png">+<link rel="icon" type="image/png" sizes="32x32" href="/icon-32.png">+<link rel="icon" type="image/png" sizes="192x192" href="/icon-192.png">
要不要保留 favicon.ico？PNG 和 ICO 能共存吗？
可以共存，而且建议保留 —— 不是为了兼容 IE，而是为了兜底自动请求机制：
- 即使你写了完整的 PNG
<link>，浏览器仍会在解析 HTML 后自动向根目录发起一次GET /favicon.ico请求（除非服务端返回 404 或 204） - 如果这个请求返回 404，部分旧版 Firefox 或某些企业内网代理会中断图标加载流程
- 一个最小化的
favicon.ico（含 16×16 和 32×32 两个尺寸）体积通常不到 1KB，放根目录 + 一行<link rel="icon" href="/favicon.ico" type="image/x-icon">成本极低，但能避免大量“意外不显示”投诉 - 注意顺序：把 ICO 放在 PNG 标签之后，避免它被高分屏设备误选为唯一可用图标
Android 和 iOS 对 PNG favicon 的支持差异在哪？
根本区别不在格式，而在 rel 属性值和尺寸策略：
- iOS Safari 完全不识别
rel="icon"，必须额外加<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">；不写sizes会被强制缩放到 180×180，导致模糊 - Android Chrome 对
sizes宽松些，但若只提供16x16，在 Pixel 或三星高刷屏上会明显发虚；至少要配192x192或512x512 - 两者都不支持 SVG 作为
rel="icon"（Safari 15+ 开始支持rel="icon" type="image/svg+xml"，但 Android WebView 仍不认） - 如果你用 PWA，
manifest.json中的icons数组才是 Android 主屏幕图标的唯一来源，HTML 中的<link>对此无效
Content-Type 必须是 image/png。哪怕 HTML 写对了 type="image/png"，只要 Nginx/Apache 返回 application/octet-stream，Safari 就会拒绝渲染。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
