favicon由HTML中rel="icon"的<link>标签唯一控制，需路径正确、MIME匹配；多端适配需额外声明apple-touch-icon、manifest.json icons等。
网页浏览器标签页左上角的小图标，就是 favicon，它不是靠 CSS 或 JS 控制的，而是由 HTML 的 <link> 标签在 <head> 中声明决定的。只要写法准确、路径正确、文件可用，浏览器就会显示——否则就留白或 fallback 到默认图标。
必须写对的 <link rel="icon"> 标签
这是设置标签页图标的唯一有效方式，其他写法（比如只放 favicon.ico 在根目录却不声明）虽可能“碰巧”生效，但不可靠、不规范、易出错。
-
rel 属性必须是 "icon"：不要用
shortcut icon或其他变体，现代浏览器只认rel="icon" -
href 必须是绝对路径或根相对路径，例如
/favicon.ico；写成./favicon.ico或images/favicon.ico在子页面会 404 -
type 必须与文件格式严格匹配：
image/x-icon对应 .ico 文件，image/png对应 .png，image/svg+xml对应 .svg —— 混用必失败
推荐的图标文件与存放位置
最稳妥的做法是准备一个兼容性好的 favicon.ico 文件，包含 16×16 和 32×32 像素两个尺寸（可在线工具生成），并放在网站根目录（即和 index.html 同级）。
- 如果使用 PNG，建议至少提供
32x32和192x192两种尺寸，适配普通标签页和 PWA 场景 - SVG 图标清晰度高、体积小，但仅 Safari 和新版 Chrome 支持较好，适合搭配 .ico 作为增强
- 服务器需正确返回 MIME 类型：Nginx/Apache 要配置
.ico返回image/x-icon，否则静默失败
多设备适配不能只靠 favicon
iOS 主屏幕、Android PWA 安装界面、Windows 任务栏等场景，**完全不读取** <link rel="icon">。它们需要独立声明：
立即学习“前端免费学习笔记（深入）”；
- iOS 添加主屏幕：加
<link rel="apple-touch-icon" href="/apple-touch-icon.png">（推荐 180×180，PNG，无透明边框） - PWA 安装图标：通过
manifest.json的icons字段定义，如{"src":"/icon-192.png","sizes":"192x192","type":"image/png"} - Safari 固定标签页：可选
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
改完图标后总不更新？试试这些
浏览器对 favicon 缓存极强，即使代码改了也可能看不到变化：
- 强制刷新无效时，用无痕窗口打开测试
- 清除浏览器缓存（不只是 Ctrl+F5），或在开发者工具 Network 面板中禁用缓存后重载
- 用
curl -I https://yoursite.com/favicon.ico检查是否返回 200 和正确 MIME 类型 - 别忽略根目录自动请求：即使没写
<link>，浏览器也会发GET /favicon.ico请求，404 会刷屏日志，建议始终提供该路径（哪怕返回空图标）
