仅写 无法覆盖所有终端，因各平台使用不同机制：ios 依赖 apple-touch-icon，android pwa 读取 manifest.json 的 icons，windows 任务栏提取 .ico 图层，macos dock 要求特定尺寸 png。
rel="icon" 声明本身不会自动适配多终端——它只负责标签页小图标，且浏览器只取第一个合法项；要覆盖 iOS、Android PWA、Windows 任务栏、macOS Dock 等场景，必须组合使用多个独立机制，不能靠单条 rel="icon" 解决。
为什么只写 <link rel="icon"> 无法覆盖所有终端
浏览器对 rel="icon" 的用途有明确边界：它只用于地址栏、标签页、书签栏等“网页上下文”图标。iOS 主屏幕、Android PWA 启动图、Windows 任务栏、macOS Dock 都不读或不完全依赖它。
例如：
– Safari 完全忽略 rel="icon" 的 PNG/SVG，只认 rel="apple-touch-icon"
– Android Chrome 安装 PWA 后，启动图标只从 manifest.json 的 icons 数组读取，HTML 中的 sizes 被无视
– Windows 任务栏图标只提取 .ico 文件内的 48×48 和 256×256 图层，不解析 PNG 的 sizes 属性
rel="icon" 必须写的三条硬规则
即使只是“标签页小图标”，现代浏览器也要求严格校验，漏一不可：
– rel 值只能是 "icon"，写成 "shortcut icon" 或 "favicon" 会被跳过
– type 必须与文件真实 MIME 类型一致：favicon.ico → type="image/x-icon"；icon.png → type="image/png"；logo.svg → type="image/svg+xml"
– sizes 只对 type="image/png" 和 type="image/svg+xml" 强制要求，格式必须是精确字符串如 "32x32"（英文小写 x，无单位、无空格、无中文 ×）
– 路径必须绝对，比如 href="/favicon-32x32.png"，相对路径在子页面下极易 404
各终端真正生效的配置项和容易踩的坑
别指望一个 rel="icon" 兼顾全部，每个平台都有自己的加载链：
– iOS 主屏幕图标：只认 <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">；PNG 必须无透明边距、纯色背景，尺寸至少 180×180；Safari 不支持 SVG
– Android PWA 启动图：只读 manifest.json 中 icons 数组定义的 192x192 和 512x512 两项；HTML 中的 rel="manifest" 必须存在，否则 manifest 不加载
– Windows 任务栏图标：只从 .ico 文件中提取图层；必须包含 48×48 和 256×256 尺寸（不是声明 sizes="256x256" 就行）；用 ImageMagick 或 favicon.io 生成时得显式勾选这两个尺寸
– macOS Dock 图标：依赖 rel="icon" 中 type="image/png" 且 sizes="32x32" 或 "128x128" 的 PNG；漏掉 type，Safari 可能直接跳过
调试 favicon 不显示时，优先查这三件事
浏览器对图标加载失败几乎不报错，静默丢弃是常态：
– 直接访问图标 URL，比如打开 https://yoursite.com/favicon-192x192.png，确认返回 200 + Content-Type: image/png（不是 text/plain 或空）
– 清浏览器“网站数据”（不是 Ctrl+Shift+R），尤其 /favicon.ico 有 max-age=31536000 的强缓存，旧缓存会覆盖新配置
– 在 Network 面板过滤 favicon，看请求是否被 Nginx/Apache 拦截（常见于未配置 image/x-icon MIME 类型或误加 deny 规则）
Content-Type 优先级高于 HTML 中的 type 属性，哪怕你写了 type="image/png"，只要响应头是 text/plain，图标就一定不加载。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
