favicon.ico 必须置于网站根目录，浏览器会无条件发起 GET /favicon.ico 请求；多尺寸图标需用正确的 type 和 sizes 属性匹配设备场景；iOS 仅识别 apple-touch-icon 且需 180x180 PNG；路径、缓存和服务器 MIME 类型是三大常见故障点。

favicon.ico 必须放在网站根目录，否则浏览器根本不会找

Chrome、Firefox、Edge 等浏览器在 HTML 解析前，会无条件发起一次 GET /favicon.ico 请求——这个行为硬编码在浏览器引擎里，和你写不写 <link> 完全无关。如果返回 404 或 403，图标大概率不显示，且控制台通常不报错。

• 把 favicon.ico 文件直接丢进项目根目录（比如 Nginx 的 root 目录、Flask 的 static/ 目录且静态路由已启用）
• 文件名必须是 favicon.ico，不能是 icon.ico 或改后缀的 PNG
• 用命令行检查是否含多尺寸：file favicon.ico，输出应含 “ICO cursor icon” 和多个 “size” 字样
• 别放 /assets/icons/ 或 /images/ 下——即使你在 href 里写了完整路径，/favicon.ico 这次请求仍会 404

多个 <link rel="icon"> 共存时，type 和 sizes 缺一不可

浏览器不是按顺序选第一个，而是根据设备像素比（DPR）、当前场景（地址栏 / PWA 弹窗 / 书签）匹配最合适的那条。漏写 type 或错写 sizes，该条就会被静默跳过。

• .ico 文件必须写 type="image/x-icon"，Chrome 94+ 还要求 sizes="any"
• .png 必须同时写 type="image/png" 和精确 sizes="32x32"（不能是 "32" 或 "32px"）
• .svg 只能用于桌面端补充，写 type="image/svg+xml"，但 iOS 不支持它作为主屏图标
• 不要只写两个 rel="icon" 都指向 PNG 却不带 sizes——部分 Android 浏览器会随机加载失败

iOS 添加到主屏幕只认 apple-touch-icon，且尺寸必须严格匹配

iOS Safari 完全忽略 rel="icon" 声明，只读 rel="apple-touch-icon"。漏掉这条，用户长按「添加到主屏幕」时，系统 fallback 到截屏或缩放 favicon.ico，结果通常是严重失真。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 尺寸至少提供 180x180（iPhone X 及以后机型默认使用），推荐统一用 180x180 PNG，无圆角、无阴影、透明背景会被 iOS 自动加效果
• 不要加 sizes 属性值带引号（如 sizes="180x180" 是错的），正确写法是 sizes="180x180"（引号合法，但某些旧版 Safari 解析异常；稳妥起见可省略，因 iOS 只读一个）
• 路径必须是绝对路径或从根开始，相对路径容易 404

路径、缓存和服务器响应这三个地方最容易卡住

代码全对，图标还是不显示？八成栽在这三个环节：

立即学习“前端免费学习笔记（深入）”；

• 路径用相对路径（如 href="images/favicon.png"）时，子路由页面（如 /blog/post）会拼出错误请求地址；一律用根相对路径（/favicon.png）或绝对 URL
• 浏览器对 favicon 缓存极深，改完图标后清缓存无效？试 href="/favicon.png?v=2" 强制刷新，或者直接开无痕窗口验证
• 访问 https://yoursite.com/favicon-180.png 返回 404 或 403？说明文件没传上去，或服务器没配 MIME 类型（Nginx 需加 types { image/png png; }）

实际部署时最容易漏的是苹果图标和 SVG 的 MIME 类型声明；另外，修改 favicon 后浏览器缓存极顽固，建议上线前用隐身窗口验证，或临时加版本号如 favicon.png?v=2。