明明换了 favicon，浏览器标签页却还是旧图标，或者干脆是空白地球？这是站长最常遇到也最迷惑的问题之一。本文给你 60 秒快速自检、按命中率排序的 8 个原因、用开发者工具的系统排查法，以及可直接复制的正确 HTML 写法。
60 秒快速自检
先做这四步，大部分案例当场解决：
- 强制刷新：
Ctrl+F5（Mac 为 Cmd+Shift+R），绕过缓存重新拉取页面与图标；
- 开无痕窗口访问网站——无痕模式缓存是干净的，如果无痕里显示正常，就是本机缓存问题；
- 直接访问图标文件：地址栏输入
你的域名/favicon.ico，能看到新图说明文件已部署，问题在缓存；看到 404 说明路径/部署有问题；
- 换个浏览器再开一次——不同浏览器缓存策略不同，可以快速区分「全站问题」和「本机问题」。
8 个常见原因（按命中率排序）
1. 缓存——占比最高
favicon 的缓存异常顽固：浏览器会把它单独缓存几周，与普通图片缓存策略不同。解法：强刷 + 无痕验证；发布新版时给引用加版本参数（如 /favicon.ico?v=2）是最可靠的强制更新手段。
2. 路径错误
声明写成 src="images/favicon.ico" 但文件实际不在该目录；或站点部署在子路径（如 example.com/blog/）却用了根相对路径。相对路径以当前页面 URL 为基准解析，建议一律用根相对（/favicon.ico）或绝对 URL。
3. HTML 里根本没有声明
文件放对位置时（根目录 /favicon.ico），不声明也能被大多数浏览器请求到；但只要文件名不是默认的 favicon.ico、或放在子目录，就必须声明。最稳的做法是无条件声明，写法见下文。
4. 文件本身不合规
- 把 PNG 直接改后缀成 .ico（容器结构不对，浏览器可能拒绝）；
- ICO 里只有一张 256px 大图，缺 16px 档——标签页强制缩小后模糊得几乎看不见，用户以为「没显示」；
- SVG favicon 写了
type="image/svg+xml" 但文件实际不是 SVG。
用 Favicon 生成器重新输出一套合规的多尺寸文件即可。
5. 大小写不匹配
Windows/macOS 文件系统不区分大小写，本地预览一切正常；部署到 Linux 服务器后 Favicon.ico 和 favicon.ico 是两个文件——直接 404。这是「本地好好的，上线就没了」的头号原因。
6. CDN / 反向代理缓存
Cloudflare、CDN 节点可能缓存了旧图标。在 CDN 控制台 Purge 该文件（或全站缓存），并配合版本参数双保险。
7. head 结构错误
<link> 标签必须出现在 <head> 内。常见的翻车：link 标签被写在了 body 里、head 提前被闭合、或模板渲染时标签被转义成纯文本。用「查看网页源代码」确认声明真的以 HTML 标签形式存在。
8. 浏览器扩展或本地数据
少数隐私类扩展会拦截图标请求；书签/快捷方式里存的旧图标也要单独刷新。前 7 条都排除后，再用另一台设备验证一次。
用开发者工具系统排查
快速自检没解决，就上 F12 开发者工具，两分钟定位问题在哪一层：
- 打开 Network 面板：按
F12 → 切到 Network（网络）标签 → 勾选「Disable cache」；
- 刷新页面，在过滤框输入
favicon（或 .ico），找到图标请求；
- 看状态码：
200 = 请求成功（问题在内容或浏览器缓存）；404 = 路径/大小写/部署问题；请求根本不存在 = HTML 没声明或结构错误；
- 看响应内容：点开该请求 → Response/预览，确认返回的就是新图；
- 看实际生效的声明：在 Elements 面板搜
rel="icon"，核对其 href 指向与你的预期一致。
状态码 200 且内容正确但标签页仍旧图？那就是最顽固的本机图标缓存——换设备或等缓存过期，不影响其他访客。
正确的 favicon 声明写法
现代兼容性最全的一套声明（放进 <head>）：
<!-- 兜底：老浏览器与默认请求 -->
<link rel="icon" href="/favicon.ico" sizes="32x32">
<!-- 现代浏览器：高清 PNG -->
<link rel="icon" href="/icon-192.png" type="image/png" sizes="192x192">
<!-- iOS 桌面图标 -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
要点：路径用根相对（以 / 开头），避免随页面路径变化；ICO 兜底文件包含 16/32/48 多尺寸；全平台尺寸清单见Favicon 完全指南。需要生成这一整套文件，用 Favicon 生成器上传一张图即可。
常见问题
Q：为什么换了 favicon 之后还是显示旧的？
A：几乎都是缓存问题，且不止一层：浏览器本地图标缓存、HTTP 缓存、CDN 缓存。依次试：强制刷新（Ctrl+F5）、无痕窗口、直接访问 favicon 文件 URL 看是否为新图；仍不行就给引用加版本参数（如 /favicon.ico?v=2）并清理 CDN 缓存。
Q：favicon.ico 必须放在网站根目录吗？
A：不是必须，但放根目录是历史约定——即使页面没有声明，浏览器也会自动请求 /favicon.ico。放在其他目录或使用其他文件名时，必须在 HTML 里用 link rel="icon" 显式声明。
Q：ICO、PNG、SVG favicon 应该用哪个？
A：推荐组合：一个含 16/32/48px 的 .ico 放根目录兜底（老浏览器与默认请求），再加 PNG/SVG 的 link 声明给现代浏览器高清显示。大部分生成器可以一次性输出整套。
Q：本地预览正常，部署后看不到新 favicon？
A：按顺序查：文件是否真的部署成功（直接访问线上 favicon URL）；服务器文件名大小写是否一致（Linux 服务器 Favicon.ico 与 favicon.ico 是两个文件）；CDN 是否缓存了旧版（清缓存或加版本参数）。
Q：浏览器多久会重新抓取一次 favicon？
A：没有固定周期——favicon 缓存非常顽固，可能保留数周。可靠的做法是更换文件名或加版本参数强制失效，而不是等浏览器自己更新。
The 60-Second Check
Do these four steps first — they resolve most cases on the spot:
- Hard refresh:
Ctrl+F5 (Mac: Cmd+Shift+R) to bypass cache for the page and its icon;
- Open an incognito window — incognito has a clean cache. If the icon shows correctly there, it's a local cache problem;
- Visit the icon file directly: type
yourdomain.com/favicon.ico in the address bar. Seeing the new image means the file is deployed and the issue is cache; a 404 means path/deployment;
- Try another browser — different caches help you quickly split "site-wide problem" from "this machine's problem".
8 Common Causes (Ranked by Hit Rate)
1. Cache — by far the most common
Favicon caching is bizarrely stubborn: browsers cache it separately from regular images, sometimes for weeks. Fix: hard refresh + incognito test; on release, bump a version query (/favicon.ico?v=2) — the most reliable forced update.
2. Wrong path
The declaration says src="images/favicon.ico" but the file isn't there; or the site lives under a sub-path (example.com/blog/) while a root-relative path is used. Relative paths resolve against the current page URL — prefer root-relative (/favicon.ico) or absolute URLs.
3. No declaration at all
If the file sits at the root as /favicon.ico, most browsers will find it even undeclared. But any other filename or subdirectory requires a link rel="icon" declaration. Best practice: always declare it — snippet below.
4. Broken file itself
- A PNG renamed to .ico (wrong container structure — browsers may reject it);
- An ICO containing only one 256px image with no 16px entry — forced downscale in the tab makes it a blur users read as "missing";
- An SVG favicon declared with
type="image/svg+xml" that isn't actually SVG.
Regenerate a compliant multi-size set with the Favicon Generator.
5. Case mismatch
Windows/macOS filesystems are case-insensitive, so local preview works fine; on a Linux server Favicon.ico and favicon.ico are different files — instant 404. This is the #1 cause of "works locally, gone in production".
6. CDN / reverse-proxy cache
Cloudflare or CDN nodes may hold the old icon. Purge the file (or everything) from the CDN console, and pair it with the version-parameter trick.
7. Malformed head
<link> tags must live inside <head>. Classic failures: the link sits in the body, the head closes early, or a template escapes the tag into plain text. Use "View page source" to confirm the declaration exists as real HTML.
8. Extensions or local data
Some privacy extensions block icon requests; bookmarks/home-screen shortcuts keep their own stale copies. After ruling out 1–7, verify once from another device.
Diagnose with DevTools
If the quick check didn't crack it, open DevTools (F12) — two minutes to find the broken layer:
- Network panel: press
F12 → Network tab → check "Disable cache";
- Reload, filter requests by
favicon (or .ico), and find the icon request;
- Read the status code:
200 = served fine (problem is content or browser cache); 404 = path/case/deployment; no request at all = missing or malformed declaration;
- Check the response: open the request → Response/Preview, confirm it's the new image;
- Check the live declaration: in Elements, search
rel="icon" and confirm the href matches expectations.
Status 200 with correct content but the tab still shows the old icon? That's the most stubborn local icon cache — try another device or wait it out; other visitors aren't affected.
Correct Favicon Markup
The most complete modern set (inside <head>):
<!-- Fallback: legacy browsers & default requests -->
<link rel="icon" href="/favicon.ico" sizes="32x32">
<!-- Modern browsers: hi-dpi PNG -->
<link rel="icon" href="/icon-192.png" type="image/png" sizes="192x192">
<!-- iOS home-screen icon -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
Key points: use root-relative paths (starting with /) so they don't shift with page URLs; the fallback ICO should carry 16/32/48; the full cross-platform size list lives in the Favicon guide. To generate the whole set from one image, use the Favicon Generator.
FAQ
Q: Why does the old favicon still show after I replaced it?
A: Almost always cache — and multiple layers of it: the browser's local icon cache, HTTP cache, and CDN cache. In order: hard refresh (Ctrl+F5), incognito window, visit the favicon file URL directly to see if it's the new one; if not, add a version query (/favicon.ico?v=2) and purge the CDN.
Q: Does favicon.ico have to be in the site root?
A: Not required, but root placement is a long-standing convention — browsers request /favicon.ico automatically even without a declaration. Any other location or filename needs an explicit link rel="icon" declaration.
Q: ICO, PNG, or SVG favicon — which one?
A: Combine them: a .ico with 16/32/48px at the root as the fallback (legacy browsers and default requests), plus PNG/SVG link declarations for hi-dpi rendering in modern browsers. Most generators output the whole set at once.
Q: Works locally, missing after deployment?
A: Check in order: the file actually deployed (visit the live favicon URL directly); filename case matches (on Linux Favicon.ico and favicon.ico are different files); the CDN isn't serving a stale copy (purge or add a version query).
Q: How often do browsers re-fetch favicons?
A: There's no fixed schedule — favicon cache is famously sticky and can last weeks. The reliable approach is a new filename or a version query to force invalidation, rather than waiting for browsers to refresh on their own.
Generate a Compliant Favicon Set in One Go
ICO + multi-size PNG in one pack · Transparency preserved · Runs in your browser
Open Favicon Generator →