favicon 不显示？八成是这几个原因——从路径到缓存逐个排查
换了新 favicon，刷新页面，标签页上还是那个旧图标——这事儿我维护图片转ICO工具这段时间见过太多次，包括我自己站刚上线那阵也踩过。先说清楚我的背景，免得你觉得是纸上谈兵：这个工具是我自己写的，纯浏览器本地转换，所以 favicon 从生成到部署这条链路上的坑，我基本都亲自趟过一遍。下面这些排查步骤都是实际用过的，按"从最可能到最不可能"的顺序排。
第一步：先分清是"没生效"还是"没更新"
很多时候图标其实已经部署好了，只是浏览器还抱着旧的不放。最省事的验证办法：开一个无痕/隐私窗口，或者换个浏览器打开你的网站。无痕窗口不读旧缓存——如果无痕里图标是新的，说明一切正常，只是缓存问题，直接跳去下面"浏览器缓存"那一节看。
原因一：路径写错了（最常见）
favicon 路径错误是出现频率最高的问题，常见三种：
- 引用的路径和实际位置不一致：HTML 里写了
/images/favicon.ico，但文件其实放在根目录。 - 大小写不对：服务器区分大小写时，
/Favicon.ico和/favicon.ico是两个文件，访问其中一个就是 404。 - 子域名/子目录部署错位：页面在
/blog/下，用的却是相对路径，解析出来的地址根本不是图标该在的位置。
最稳的检查办法：在浏览器地址栏直接输入你 HTML 里写的那个完整 URL，看能不能打开、打开的到底是不是图标。这一步能排除掉一半以上的问题。我自己就干过把 favicon.ico 放在项目根目录、但页面部署在子路径下导致 404 的事，浏览器地址栏一敲就露馅了。
原因二：浏览器缓存了旧图标
浏览器对 favicon 的缓存比普通图片激进得多，而且很多时候"强刷"都未必清得掉——它和页面资源走的不是同一套缓存逻辑。有效的办法按顺序试：
Ctrl+F5强刷一次。- 开无痕窗口验证（第一步做过的话直接跳过）。
- 关掉标签页重新打开，而不是刷新。
- 清空浏览器缓存：设置 → 隐私 → 清除浏览数据。
- 换个浏览器确认。
如果你正在频繁调试图标，每改一次都要等缓存过期，效率很低。建议全程用无痕窗口调试，确认没问题再收工，比反复强刷省心。
原因三：CDN 或服务器缓存没更新
用了 Cloudflare、CDN，或者托管平台自带缓存（现在大部分托管都有），页面更新了不代表图标文件也立刻生效。favicon.ico 这种小文件经常被缓存得比较久。
处理办法：
- 去托管平台/CDN 面板清缓存，或者等缓存过期（一般几十分钟到几小时）。
- 着急验证的话，临时给图标 URL 加个查询参数，比如
/favicon.ico?v=2，强制浏览器拉新的。注意这只是临时的，验证完记得去掉，否则以后每次改图标都要跟着改 URL。
顺带提一个真实的坑：这个工具站刚部署时，托管平台把不存在的路径都回退到了首页 HTML（SPA fallback），导致访问 /favicon.ico 返回的是一整个网页而不是图标。如果你也遇到"图标文件访问返回 HTML"的怪事，八成是平台的路由回退设置，去关掉 SPA fallback 或配好 404 处理就好。
原因四：ICO 文件本身有问题
文件没问题才谈得上显示。ICO 文件最常见的毛病：
- 老式 BMP 打包：不少老工具生成的 ICO 内嵌的是 BMP 位图，透明背景变白底或黑底，小尺寸下还糊。现在 ICO 标准是内嵌 PNG 数据，生成时认准"现代 ICO / PNG 内嵌"这种说法。
- 只有一个尺寸：只放一张 32×32，标签页够用，高分屏和任务栏就糊。正规做法是 16+32+48 起步，需要的话再往上加。
- 文件损坏或不完整：下载中断、文件被截断，浏览器干脆不认。
- 源图就没救：本来没有透明通道、四周没留白，缩小后成一团墨。
生成时建议直接选多尺寸（16+32+48）。本站首页的工具就是这么做的：图片拖进去选"Favicon 套装"，出来就是现代 PNG 内嵌的多尺寸 ICO，全程浏览器本地处理、图片不上传，不会引入额外的质量问题。
原因五：HTML 里没声明或声明不对
虽然很多浏览器会默认去根目录找 /favicon.ico，但别依赖这个默认行为，显式声明最稳：
<link rel="icon" href="/favicon.ico">
几个注意点：
href用绝对路径（以/开头），别用相对路径，否则子目录里的页面会解析错位置。rel="icon"就是现代写法，直接写这个；shortcut icon是历史遗留，没必要再用。- 一个页面声明一次就够。别把
icon、shortcut icon、apple-touch-icon混在一行里——apple-touch-icon是手机"添加到主屏幕"用的，另说。
一套完整的排查顺序
照这个顺序走，别跳步：
- 无痕窗口打开网站，确认图标文件本身能访问（地址栏直接输入完整 URL）。
- 检查 HTML 里
link rel="icon"的路径和实际文件位置是否一致。 - 检查 ICO 文件：现代 PNG 内嵌、多尺寸、透明背景。
- 清浏览器缓存，或无痕窗口再验证一遍。
- 清 CDN/托管缓存，或临时加
?v=2参数验证。 - 换设备、换浏览器最后确认一次。
走到第 5 步还没解决，基本就是托管平台的路由或缓存配置问题，去面板里翻一翻设置。
常见问题
为什么强刷了还是不显示？
强刷（Ctrl+F5）能刷新页面资源，但对 favicon 这类独立请求不一定生效。先用无痕窗口确认文件部署没问题，再清浏览器缓存或加 ?v=2 参数试试。
favicon 多久才会更新？
取决于浏览器和 CDN 的缓存策略，从几分钟到几天都有可能。想尽快看到效果就用无痕窗口验证，正式上线后耐心等缓存过期即可。
换了域名或子域名，图标要重新弄吗？
每个域名/子域名是独立的，都要在对应根目录放 favicon.ico 或在该站点的 HTML 里声明。别指望主站图标自动带到子站。
图标能访问，但标签页还是默认图标？
那基本是缓存问题（浏览器或 CDN），按上面的排查顺序走，多数在第 4、5 步能解决。