先记住这个答案
站点图标可以在 <head> 中用多条 <link rel="icon"> 提供不同资源；浏览器会结合文件类型、sizes 和使用场景选用。sizes 对位图描述的是固有像素尺寸，不能强迫标签页一定使用那张图。提供 SVG 与少量必要 PNG 候选通常比列几十种尺寸更清楚，主屏安装图标还可能走另一套声明。
rel="icon"声明候选图标type提示资源格式- 位图
sizes写固有像素尺寸 - 安装图标另看 manifest
高密度屏上的品牌图标
一个品牌只上传了 16 像素 PNG，浏览器标签页清晰，但高密度屏或桌面快捷方式上发糊。可保留一个 SVG 图标，再提供合适尺寸的 PNG 后备，并在 PNG 的 sizes 写真实宽高。网页应用的安装图标还应在 manifest 中配置，不要误以为 rel="icon" 能覆盖所有安装场景。改了图标没立刻出现，也要考虑浏览器图标缓存。
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-32.png"
type="image/png" sizes="32x32">
<link rel="icon" href="/favicon-16.png"
type="image/png" sizes="16x16">
<!-- sizes 写源文件尺寸，不是 CSS 显示尺寸 -->rel="icon" 给浏览器一组候选资源；它会综合格式支持、尺寸和当前使用环境挑选，不保证严格按标签顺序。
示例中 PNG 的 sizes="32x32" 和 16x16 应与文件真实像素尺寸一致；写了 32×32 并不会把 16×16 图片变清晰。SVG 是可缩放矢量资源，通常不需要列一个固定像素尺寸。浏览器最后用哪个候选仍由实现与场景决定，所以测试要分别打开普通标签、书签以及产品真正支持的安装场景，不能只看源代码顺序。
浏览器从多个候选里选图
type 是资源格式提示，写错可能影响候选选择；sizes 对位图有用，SVG 等可缩放图标不必冒充某个固定像素尺寸。主屏幕添加、PWA 安装或不同平台图标还有各自入口。开发时最好把浏览器标签、书签与安装结果分别检查，而不是只看 Network 中是否请求了某个文件。
图标资源更新后，开发者常以为标签写错，实际可能是浏览器长期缓存了旧图标。检查时打开资源 URL 看响应内容与 MIME 类型，换一个全新文件名或清理缓存后再看标签页。SVG 图标适合多尺寸显示，但平台安装图标、收藏夹或旧环境可能另有格式要求；应该按产品真正支持的使用场景补候选，而非机械列出所有尺寸。
容易答错的地方
- 把
sizes当作浏览器显示大小 - 它标注资源固有尺寸，浏览器最终绘制多大由界面场景决定。
- 认为一个 favicon 覆盖所有设备入口
- 安装图标、主屏图标与标签页图标可能有不同配置与缓存。
面试官还会怎么问？
SVG 图标还要写固定 sizes 吗？
通常不需要，它可缩放；位图候选则应标注真实尺寸。
换了图标为什么仍显示旧图？
浏览器可能缓存图标，检查资源 URL、响应缓存及重新加载后的选择结果。
PWA 安装图标放哪里？
在 Web App Manifest 的 icons 中声明对应资源与尺寸。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。