favicon需在中用显式声明，推荐绝对路径的favicon.ico作兜底，再加png图标优化；须确保路径正确、mime类型为image/x-icon、清除顽固缓存。
favicon 在
浏览器只认特定位置、格式和声明方式的图标，光放对文件没用。必须在 中用 <link rel="icon"> 显式声明，且 href 路径要能被浏览器直接请求到。
常见错误是把图标文件丢进项目目录却没加 <link>，或者用了 rel="shortcut icon" 这种旧写法（部分老 IE 外基本已不必要）。
-
rel推荐统一用"icon"，简洁且现代浏览器全支持 -
href建议用绝对路径（如/favicon.ico），避免相对路径在子页面下失效 - 如果用 PNG 格式，可加
type="image/png"，但非必需；.ico文件无需声明type - 不要在
里写多个<link rel="icon">指向不同尺寸——浏览器会自己选，重复声明反而可能干扰解析
favicon.ico 和 favicon.png 该选哪个
.ico 是传统方案，兼容性最好（包括 IE6+），单文件可内嵌多尺寸（16×16、32×32、48×48），Windows 系统桌面快捷方式也依赖它；.png 更灵活（支持透明、高 DPI），但 iOS Safari 和旧 Android 浏览器对 rel="icon" 的 PNG 支持不稳定。
实操建议：优先提供 favicon.ico 作为兜底，再额外加一行 <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32"> 供现代浏览器优化显示。
- 生成
.ico推荐用在线工具（如 favicon.io 或 realfavicongenerator.net），上传一张 256×256 PNG 即可输出含多尺寸的 .ico - 如果只放
.png，务必确认所有目标用户环境（尤其是企业内网 IE/Edge Legacy）是否真不需要兼容 - Android Chrome 和 PWA 需要
<link rel="manifest">配合，单独 favicon.png 不足以触发添加到主屏幕
网页图标不显示？先查这三件事
90% 的“图标不显示”问题不是代码写错，而是路径、缓存或响应头导致的静默失败。
- 打开浏览器开发者工具（F12），切到
Network标签页，刷新页面，过滤favicon.ico，看请求是否返回 200；若为 404，说明href路径不对或文件未部署 - 检查服务器是否对
.ico文件返回了正确的Content-Type：应为image/x-icon，不是text/plain或application/octet-stream（Nginx/Apache 需单独配置 MIME 类型） - 强制清除 favicon 缓存：Chrome 地址栏输入
chrome://settings/clearBrowserData→ 勾选“缓存的图片和文件”，或访问chrome://restart后再试（某些版本 favicon 缓存极顽固）
使用 manifest.json 时 favicon 还需要手动加吗
需要。Web App Manifest（manifest.json）里的 icons 字段只影响 PWA 添加到主屏幕后的图标，**不影响地址栏、标签页、书签栏这些传统 favicon 场景**。
也就是说：manifest.json 中的图标和 <link rel="icon"> 是两套独立系统，互不替代。
- 如果你只配了 manifest 但没写
<link>，Chrome 标签页仍显示默认文档图标 - manifest 中的
icons数组推荐包含至少 192×192 和 512×512 PNG，且purpose设为"any"或"maskable" - 仍需保留
<link rel="icon" href="/favicon.ico">—— 这是最小成本、最高兼容性的基础保障
.ico 的 MIME 类型配置和 favicon 缓存的顽固性，这两点比写错 HTML 标签更难排查。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
