浏览器不会缩放图标，link rel="icon"在不同平台显示的图标取决于是否提供对应尺寸文件及正确声明sizes和type；ios只认rel="apple-touch-icon"且需180×180 png，android pwa依赖sizes="192x192"或"512x512" png，桌面高dpi屏需32×32，所有sizes必须严格匹配实际像素尺寸。
浏览器不会缩放图标，link rel="icon" 在不同平台显示什么图标，取决于你是否提供了对应尺寸的文件 + 是否用正确的 sizes 和 type 声明它——不是靠 CSS、不是靠“猜”，而是浏览器按规则硬匹配。
为什么 iOS 书签图标总是模糊或拉伸
iOS Safari 完全不读 rel="icon"，只认 rel="apple-touch-icon"。漏掉这行，系统就会从 /favicon.ico 或页面截图里“凑”一个，结果就是糊、变形、带白边。
- 必须单独加：
<link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" sizes="180x180"> - 文件必须是 PNG，180×180 像素，无透明边框（iOS 会自动加圆角和阴影）
-
sizes属性对apple-touch-icon不是必需的，但写上更稳妥；别写成sizes="180"或sizes="180px"，否则部分旧版 Safari 可能解析失败 - 路径务必用绝对路径（以
/开头），否则子目录页（如/blog/）会请求/blog/apple-touch-icon.png并 404
Android 书签/PWA 启动图标不显示的常见原因
Android Chrome 主屏幕图标和 PWA 安装横幅，优先读取显式声明的 rel="icon" PNG，且只认 sizes="192x192" 或 sizes="512x512" 的那一张——不是看 manifest.json，也不是 fallback 到 ICO。
- 必须有一条：
<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192.png"> - 文件实际分辨率必须是 192×192 像素，不能是 200×200 或缩放出来的
-
type="image/png"缺不得，写成image/jpg或漏掉，Chrome 就静默跳过 - 如果只提供
sizes="16x16"PNG，Android PWA 安装界面会空白——它根本不会加载那张图 - manifest.json 中的
icons字段只是 PWA 安装时的后备，HTML 里的link是首屏图标加载关键路径
Windows/macOS 标签页图标总显示 16×16 模糊图
桌面浏览器标签页默认用 16×16，但高 DPI 屏（如 MacBook Retina、Windows 4K 屏）会自动升采样，导致模糊。真正解法不是“换高清图”，而是提供 32×32 并正确声明。
- ICO 文件必须真包含 16×16 和 32×32 两个图层（不是单图层放大）
- PNG 方案要两条都写：
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">和<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png"> -
sizes必须严格小写x，写成16×32（中文乘号）或32X32（大写 X）都会被忽略 - 不要只留
sizes="32x32"，否则老版本 IE 或某些企业内网浏览器会 fallback 到默认图标 - Chrome 110+ 开始，SVG 图标必须带
type="image/svg+xml"和sizes="any"，其他值（包括空）直接跳过
缓存导致换图标后死活不生效
favicon 缓存比 JS/CSS 顽固得多，硬刷新无效，Network 面板甚至看不到请求——说明浏览器压根没发。
- 最可靠办法：改
href路径，比如从/favicon-192.png改成/favicon-192-v2.png - 临时验证：开无痕窗口，直接访问
https://yoursite.com/favicon-192.png，看是否返回 200 + 正确 Content-Type - 服务器响应头别设
Cache-Control: max-age=31536000，至少给个no-cache或短时间缓存 - 本地开发时，Nginx/Apache 可能拦截
.ico请求，检查是否漏配image/x-iconMIME 类型
最容易被忽略的点：所有 sizes 值必须和文件实际像素尺寸完全一致，浏览器不缩放、不裁剪、不插值——它只做字符串匹配和文件读取。写错一个数字，那张图就等于不存在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
