要适配retina屏，需并列声明多个（如32x32、64x64、128x128），确保png为正方形透明图；apple touch icon须单独用，且预留内边距。
link标签怎么写才能适配Retina屏图标
HTML里用 <link> 给高分屏（比如 macOS Retina、Windows HiDPI、iOS 设备）提供清晰 favicon，关键不是加更多标签，而是用对 rel 和 sizes，并确保图片本身是 2x 尺寸且格式支持透明通道。
常见错误是只放一个 <link rel="icon" href="favicon.ico">，结果在 MacBook 上图标模糊——因为 .ico 文件虽能打包多尺寸，但浏览器在高分屏下默认取最小尺寸（通常是 16×16），再拉伸显示。
- 必须显式声明
sizes，例如sizes="32x32"或sizes="64x64"，否则 Chrome/Firefox 不会把它当高分候选 - 推荐用 PNG 替代 ICO：现代浏览器都支持，且可精确控制单个尺寸+alpha 通道；
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32.png"> - 不要依赖自动缩放：即使你只放一张 64×64 PNG，也得写明
sizes="64x64"，不然 Safari 可能忽略它
要不要同时提供 1x 和 2x 的 PNG 图标
要，但不是靠媒体查询或 JS 切换——<link> 标签本身不支持 media 属性（media="(min-resolution: 2dppx)" 在 favicon 场景下被所有主流浏览器忽略）。
正确做法是并列声明多个 <link>，让浏览器自己选：
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32.png"><link rel="icon" type="image/png" sizes="64x64" href="favicon-64.png"><link rel="icon" type="image/png" sizes="128x128" href="favicon-128.png">
浏览器会根据设备像素比和当前需要的渲染尺寸（比如地址栏、书签栏、PWA 安装弹窗），从这些候选中挑最匹配的一个。不需要你手动判断“这是不是 Retina”。
- 32×32 是桌面 Chrome/Firefox 地址栏常用尺寸；64×64 更适合 Windows 任务栏或 PWA 安装图标
- 所有 PNG 必须是正方形、无边距、背景透明；有白边或裁切不准会导致高分屏下边缘发虚
- 别用 SVG 作 favicon：虽然
rel="icon"理论上支持image/svg+xml，但 Safari 目前完全不识别，Chrome 对 SVG favicon 的高分缩放支持也不稳定
Apple Touch Icon 还需要单独处理吗
需要，而且规则更死板：<link rel="apple-touch-icon"> 不认 sizes（旧版 iOS 会忽略），也不支持 PNG 透明通道（会强制加白底），必须用无透明、带圆角和阴影的 PNG，并按 iOS 要求预设尺寸。
实际只需提供一个最大尺寸（如 180×180），iOS 会自行缩放使用；但为了兼容老设备，建议这样写：
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
- 文件名必须叫
apple-touch-icon.png（或通过href显式指定），不能是icon-180.png - 图像内容需包含 20px 内边距（iOS 自动加圆角和阴影，没留白会切掉图标）
- 不用再写
rel="apple-touch-icon-precomposed"：iOS 7+ 已废弃，写了反而可能干扰解析
为什么加了 link 还是显示旧图标
大概率是缓存问题——favicon 缓存策略极强，尤其 .ico 文件，浏览器可能缓存数天甚至不主动刷新。
- 强制更新：改
href路径加版本号，比如favicon-32.png?v=2；或部署时用哈希命名（favicon-32.a1b2c3.png） - 检查路径是否 404：打开 DevTools → Network → 刷页面，过滤
favicon，确认所有<link>的 href 返回 200 - 避免混用 rel 类型：不要同时写
rel="icon"和rel="shortcut icon"，后者是 IE 时代遗留，现代浏览器已不依赖，还可能触发错误 fallback 行为
真正麻烦的是 iOS：Safari 会把 apple-touch-icon 缓存在本地，连硬刷新都不管用，只能删 Safari 历史记录，或者换个测试设备。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
