网页头像（favicon）必须用<link rel="icon">，因浏览器仅识别该标签，background-image、<img>等均无法显示在标签页等位置；需放<head>内、配正确type/sizes、HTTPS路径及Content-Type，并清除强缓存。
网页头像（favicon）必须用 <link rel="icon">，其他方式全都不算数——background-image、<img>、内联 SVG 都不会出现在浏览器标签页、书签栏或地址栏里。
为什么是唯一可靠方式
浏览器对 favicon 的识别机制非常固定：只扫描 <head> 中的 <link rel="icon"> 标签，且仅支持特定 MIME 类型和路径规则。任何试图绕过它的做法（比如用 CSS 设置 body 背景图、或在页面顶部放一个 <img>）都只是“看起来像”，实际不生效。
- IE 只认
.ico文件，且必须带type="image/x-icon" - Chrome/Firefox/Safari 对
.png支持更好，但必须声明sizes属性才能适配高分屏 - 如果只写一条
<link rel="icon" href="favicon.png">，很多设备会 fallback 到默认图标（尤其是 Windows 任务栏、macOS Dock） -
rel="apple-touch-icon"是额外补充，不影响标准 favicon 行为
多个尺寸 + 多格式怎么写才不踩坑
不能靠猜尺寸，也不能靠省略属性。现代设备需要明确告诉浏览器“这个图标是给谁用的”。以下写法经实测在 Chrome 128+、Firefox 125+、Safari 17.6+、Edge 127+ 全部生效：
<link rel="icon" type="image/x-icon" href="https://cdn.example.com/favicon.ico"> <link rel="icon" type="image/png" sizes="16x16" href="https://cdn.example.com/favicon-16.png"> <link rel="icon" type="image/png" sizes="32x32" href="https://cdn.example.com/favicon-32.png"> <link rel="icon" type="image/png" sizes="192x192" href="https://cdn.example.com/favicon-192.png">
-
sizes值必须与图片真实像素尺寸完全一致，写成"32x32"但图片是 64×64，Chrome 就会跳过这条 - HTTPS 路径必须可公开访问，本地开发时别用
file://协议——浏览器直接拒绝加载 - CDN 上的图标要确保响应头含
Content-Type: image/x-icon或image/png，否则 Safari 会静默忽略 - 不要把所有图标塞进一个
.ico文件再指望自动适配；多尺寸 PNG 更可控
调试 favicon 不显示？先查这三处
90% 的“不显示”问题跟代码无关，而是缓存或路径细节出错：
立即学习“前端免费学习笔记（深入）”；
- 浏览器强缓存 favicon：清空缓存后仍不生效？试试无痕窗口，或临时改文件名（如
favicon-v2.png） - Network 面板里点开图标请求，看 Response Headers 是否有正确的
Content-Type；没有就说明服务器配置错了 - 检查 HTML 是否真在
<head>里——如果被 JS 动态插入、或放在<body>下，一律无效 - 某些构建工具（如 Vite）默认不处理
.ico，需手动配置public目录并用绝对路径引用
最易被忽略的是：favicon 的加载时机极早，甚至早于 HTML 解析完成。一旦路径错、MIME 错、缓存卡住，浏览器不会报错，只会沉默地用默认图标顶替——你得主动去 Network 里找它，而不是盯着页面等它出现。
