你在 Chrome 中打开一个新标签页，看到的不是自己的 logo，而是一个灰色的小地球图标。它看起来像占位符，事实也确实如此。Chrome 默认 favicon 的地球图标就是浏览器在找不到或无法加载页面的有效图标时使用的 fallback。
本文解释这个地球图标意味着什么、Chrome 为什么选择它，以及如何用自己的 favicon 替换它。讨论重点放在地球图标本身，不展开一般的缓存排查。
Chrome 默认 favicon 的地球图标到底是什么
Chrome 并不是为所有网站内置了同一个硬编码的地球图标。地球图标是一个通用占位符，在没有可用图标时出现。它相当于标签栏中一个空位的视觉表现。
HTML 标准定义了页面声明图标的方式：在文档 head 中放置一个 <link rel='icon'> 元素。规范见 WHATWG HTML: rel=icon。当这项声明缺失、失效，或者指向 Chrome 无法解码的文件时，浏览器就会回退到地球图标。
为什么显示地球图标而不是你的图标
大多数情况都属于几类容易判断的问题，常见情况如下：
- 没有声明图标，也没有 /favicon.ico。Chrome 可能会请求站点根目录下的
/favicon.ico。如果该文件不存在，地球图标仍会显示。 - link 标签指向 404。路径拼写错误，或者文件从未部署，都会产生同样的结果。
- 格式不受支持或文件损坏。被截断的 ICO 或 markup 无效的 SVG 都可能无法渲染。
- 页面是本地文件或处于受限上下文。某些 Chrome 内部页面和本地文件没有图标，因此显示地球图标是预期结果。
注意，这些情况都不需要深入排查缓存。地球图标通常是一个信号：图标从一开始就没有被成功解析出来。
Chrome 如何在你的图标和地球图标之间做选择
Chrome 会读取文档 head 中的图标链接，并选择一个能够解码的候选项。如果同时提供 SVG 和 PNG，浏览器会使用支持度最高的格式。如果没有任何候选项能够成功处理，就会显示地球图标。
最简且可靠的声明写法如下：
<link rel='icon' type='image/svg+xml' href='/favicon.svg'>
<link rel='icon' type='image/png' sizes='32x32' href='/favicon-32.png'>这样 Chrome 就有两次加载成功的机会。若想进一步了解 link 元素的结构，请参阅我们的 favicon link tag 指南。
避免出现地球图标的最佳实践
要去掉地球图标，不必准备十几种文件，但至少需要一个有效且可访问的图标。可以遵循以下几条实用规则：
- 在 head 中显式声明图标，不要依赖浏览器对根路径发起的隐式请求。
- 确认文件确实返回 HTTP 200，而不是重定向到某个 HTML 错误页面。
- 除 SVG 外，也保留 PNG 作为兼容方案，以应对较旧或解析更严格的解析器。
- 在全新的 Chrome profile 或无痕窗口中测试，避免此前缓存的地球图标干扰判断。
如果图标声明正确，Chrome 却仍显示地球图标，问题往往是缓存条目未更新，而不是文件缺失。我们关于 Chrome 中 favicon 不显示的文章专门介绍了这一缓存行为。
结论
地球图标不是 bug。它是 Chrome 在告诉你，没有找到可用的图标。声明一个有效的 rel='icon' 链接，确认文件已正确提供，地球图标就会消失。先从一张能够正常加载的 SVG 或 PNG 开始，等基础配置稳定后，再扩展到完整的图标集。