HTML5中用srcset适配视网膜屏需结合x描述符（如“icon.png 1x, icon@2x.png 2x”）匹配设备像素比，或配合sizes与w描述符实现响应式高清双适配；favicon不支持srcset，须用多个link标签提供不同尺寸。
在 HTML5 中，用 srcset 为视网膜屏幕（如 Retina、2x 屏）提供高清晰度图标，核心是让浏览器根据设备像素比（dpr）自动选择最合适的图片资源。关键不是只写分辨率，而是配合 sizes 或直接使用 x 描述符来声明不同 DPR 下的候选图像。
用 x 描述符匹配设备像素比
这是最直观、最常用的方式，适合固定尺寸的图标（比如 16×16px 显示区域）：
- 假设你有一个标准尺寸图标
icon.png（16×16 像素），和一个高清版本icon@2x.png（32×32 像素） - HTML 写法如下：
srcset="icon.png 1x, icon@2x.png 2x" alt="设置图标">
浏览器会根据当前设备的 window.devicePixelRatio 自动选：dpr=1 时用 1x，dpr≥2 时倾向用 2x 版本。
配合 sizes 实现响应式 + 高清双适配
当图标在页面中尺寸会随布局变化（比如导航栏图标在桌面端显示 24px、移动端显示 20px），就需结合 sizes 属性，用 w 描述符更精准控制：
立即学习“前端免费学习笔记（深入）”；
- 准备三张图：
icon-24.png（24×24）、icon-48.png（48×48）、icon-72.png（72×72） - 告诉浏览器“在宽度 ≥768px 的视口下，这个图标渲染为 24px 宽；否则为 20px”
srcset="icon-24.png 24w,icon-48.png 48w,
icon-72.png 72w"
sizes="(min-width: 768px) 24px, 20px"
alt="设置图标">
这样浏览器能结合视口宽度、设备 DPR 和图片固有宽高，选出最匹配的资源——既适配布局变化，又兼顾高清屏。
图标类元素（如 <link rel="icon">）不支持 srcset
<link> 标签中的 favicon 不识别 srcset。要支持高分屏图标，得用 media 或 type + 多个 <link>：
现代浏览器（Chrome、Firefox、Safari）会按需加载最匹配尺寸的图标，包括对 2x/3x 屏的支持。
实际建议与注意事项
- 小图标（≤32px）优先用 SVG：矢量、无缩放失真、体积小，天然适配所有 DPR
- 必须用位图时，至少提供
1x和2x两版；iOS Safari 对3x支持良好，可酌情增加 -
src属性仍需保留——它是兜底项，当浏览器不支持srcset时会回退使用 - 测试时可用 Chrome DevTools 的 “Rendering” 面板模拟不同 DPR，或真机访问验证
