favicon 文件格式和尺寸怎么选
浏览器对 favicon.ico 的兼容性最好，但现代页面更推荐用 .png 或 .svg 配合 rel="icon"。windows chrome 旧版只认 favicon.ico（16×16 或 32×32），而 safari ios 要求 apple-touch-icon.png（至少 180×180），且不能带透明边框，否则会自动加白底。
-
favicon.ico必须是 ICO 格式，不是把 PNG 改后缀就能用 -
favicon.svg在 firefox、Chrome 98+、Safari 15.4+ 可用，但不支持 IE 和旧安卓 webview - 如果用 PNG，建议提供多尺寸：16×16、32×32、192×192、512×512，靠
sizes属性声明
html 中 link 标签怎么写才不被忽略
浏览器只识别 里、且 rel 值为 icon 或 apple-touch-icon 的 <link>。顺序和属性缺一不可，漏掉 type 或写错 rel，Chrome 就当没看见。
- 基础必备：
<link rel="icon" href="/favicon.ico">（老浏览器兜底） - 现代推荐：
<link rel="icon" type="image/svg+xml" href="/favicon.svg"> - iOS 主屏图标：
<link rel="apple-touch-icon" href="/apple-touch-icon.png">（注意不是icon） - 不要写
rel="shortcut icon"—— 已废弃，Chrome 117+ 开始忽略
为什么改了 favicon 页面还是显示旧图标
这不是代码问题，是缓存问题。浏览器对 favicon 缓存极深，甚至比普通资源还顽固，Ctrl+F5 刷新也清不掉。
- 先清空浏览器缓存，再打开
chrome://settings/clearBrowserData→ 勾选「Cached images and files」 - 在地址栏直接访问图标 URL（如
https://yoursite.com/favicon.ico），硬刷新（Ctrl+Shift+R）看是否更新 - 部署时确保服务器没返回 304（Not Modified）—— 检查响应头里的
ETag和Last-Modified - 开发中可临时加版本参数：
href="/favicon.ico?v=2"，上线后去掉
Next.js / Vue / React 项目里 favicon 怎么放才生效
框架会接管 ，直接写 HTML 不一定生效。静态资源路径、打包规则、SSR 渲染时机都会干扰。
立即学习“前端免费学习笔记（深入）”；
- Next.js 13+ App router：把
favicon.ico放进app/favicon.ico根目录，不用手动写<link> - Vue CLI：把图标放
public/下，修改vue.config.js的configureWebpack.plugins加FaviconsWebpackPlugin - React Create React App：图标必须放
public/，并在public/index.html中显式写<link>，%PUBLIC_URL%占位符不能少 - 所有框架都慎用相对路径：
href="favicon.ico"很容易因路由层级变 404，统一用根路径href="/favicon.ico"
实际部署时最容易被卡住的，是服务器没配 MIME 类型 —— favicon.ico 返回 text/plain 就直接失效，得确认 nginx/apache 返回的是 image/x-icon。