
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 刷新也清不掉。
注意:请将此程序放在网站根目录下运行。若没有IIS,请直接运行根目录下的 测试.exe 进行本地测试。 基本功能表基本设置:后台可修改联系方式,网站信息。管 理 员:可新增管理员。自定义导航:新增修改导航菜单、菜单排序等。单页管理:单页面新增关键词和描述等。新闻增加:新闻可设置标题、新闻分类、添加内容等。新闻管理:可分类查看新闻、修改新闻、删除新闻等。产品管理:产品增加二级分类,产品略缩图、产品
- 先清空浏览器缓存,再打开
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"
favicon.ico 返回 text/plain 就直接失效,得确认 Nginx/Apache 返回的是 image/x-icon。










