favicon.ico 应放在网站根目录，HTML 中可省略 link 标签；若自定义路径，须用绝对路径如 /assets/favicon.ico 并显式声明 ，同时提供 PNG 备选和清除强缓存验证。
favicon.ico 文件该放哪？路径怎么写才不 404
浏览器默认只在根目录找 favicon.ico，所以最省事的方式就是把图标文件直接丢到网站根目录（比如 Nginx 的 /usr/share/nginx/html/，或 Python Flask 的 static/ 目录下一级）。如果放别处，必须显式声明路径，否则会静默失败——连控制台都不报错，只是图标不显示。
- 根目录放法：
favicon.ico放在/下，HTML 中可完全不写<link>标签（部分旧浏览器仍要求写） - 自定义路径法：必须用
<link rel="icon" href="/assets/favicon.ico">，注意路径以/开头表示绝对路径，否则相对路径容易因页面 URL 深度出错 - 开发时常见坑：本地用
file://协议打开 HTML，href中的相对路径会失效；务必起一个本地服务器（如python3 -m http.server）测试
HTML 中 link 标签怎么写？rel 和 type 有哪些组合
现代写法要兼顾兼容性和语义清晰，不能只靠老式 rel="shortcut icon"。Chrome、Firefox、Safari 对 rel="icon" 已全面支持，type 属性虽非必需，但显式声明能避免 MIME 类型误判。
- 基础写法（推荐）：
<link rel="icon" href="/favicon.ico"> - 带类型声明（更稳妥）：
<link rel="icon" type="image/x-icon" href="/favicon.ico"> - 避免写
rel="shortcut icon"：这是 IE6 时代遗留，现代浏览器不依赖它，“shortcut” 已被忽略，纯属冗余 - 不要混用多个
<link rel="icon">指向不同格式：浏览器按顺序取第一个有效项，后面不会 fallback；如需支持 PNG，应另起一行并加sizes
要不要支持 PNG / SVG 图标？什么时候必须用 .ico
.ico 格式仍是唯一能在所有桌面浏览器地址栏、标签页、书签栏稳定显示的格式；PNG 和 SVG 虽支持透明和高倍屏，但存在明确限制场景。
-
.ico必须有：Windows + Chrome/Firefox 地址栏、IE/Edge 旧版本、部分企业内网环境 - PNG 可选配（推荐）：
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">，对 macOS Safari 标签页、PWA 安装提示更友好 - SVG 不推荐用于 favicon：Chrome 117+ 才开始实验性支持
rel="icon" type="image/svg+xml"，且不支持地址栏显示，仅限 PWA manifest 中的icons字段 - 尺寸建议：至少提供 32×32 和 16×16 的
.ico（可用在线工具合并成多尺寸 ICO 文件），单尺寸易在缩放时模糊
验证图标是否生效？绕过缓存的实测方法
favicon 缓存极强，改了文件或 HTML 经常看不到效果，不是代码错，是浏览器在“假装没看见”。必须主动打破缓存链路。
立即学习“前端免费学习笔记（深入）”；
- 强制刷新：Ctrl+F5（Windows）或 Cmd+Shift+R（macOS），比普通 F5 更彻底
- 清空 favicon 缓存：Chrome 地址栏输入
chrome://settings/clearBrowserData→ 勾选“Cookie 及其他网站数据”+“缓存的图片和文件”，注意别误删登录态 - 快速验证技巧：临时修改
href加时间戳参数，如href="/favicon.ico?v=2"，确保服务端不拦截带 query 的静态文件请求 - 终极确认法：打开开发者工具 → Network 标签页 → 刷新页面 → 筛选
favicon.ico→ 查看状态码是否为 200，响应头Content-Type是否为image/x-icon
<!-- 推荐的完整 favicon 声明（放在 <head> 内） --> <link rel="icon" type="image/x-icon" href="/favicon.ico"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
很多团队卡在“改了图标但死活不显示”，问题往往不在代码本身，而在路径部署位置、缓存策略、或验证方式不对。尤其是本地双击打开 HTML 文件时，file:// 协议下几乎所有 href 都会失效——这点最容易被忽略。
