为什么我的 favicon 不更新?
这是最常见的 favicon 问题,而且几乎总是缓存导致的。浏览器对 favicon 的保留比大多数资源都更执着。按这个顺序解决:强制刷新(Ctrl+Shift+R / Cmd+Shift+R);如果无效,就彻底关闭标签页再打开一个新的,因为 favicon 缓存通常是按标签页划分的;在反复调试时,加上一个临时的版本查询参数,例如 /favicon.ico?v=2,让浏览器去获取一个“新”文件。Google 搜索会保留一份单独的副本,并按自己的时间表刷新——需要几天到几周。
2026 年我还需要 favicon.ico 吗?
需要。即便已经有了 SVG,浏览器和 Googlebot 仍会自动从网站根目录请求 /favicon.ico,还有少数老旧客户端依赖它。它是个很小的文件——保留一个多尺寸的 .ico(16/32/48)作为可靠的基线。
我到底需要哪些尺寸?
比大多数生成器输出的要少得多。完整的、当前的文件集是:一个多尺寸的 favicon.ico(16/32/48)、一个 icon.svg、一个 180×180 的 apple-touch-icon.png,以及由 web app manifest 引用的 192 + 512 PNG。旧的 70×70/150×150 Windows 磁贴和几十种中间尺寸的 PNG 都已不再使用。
favicon 和 apple-touch-icon 有什么区别?
favicon(.ico/SVG/PNG)是标签页和书签上的小图标。apple-touch-icon 是一个 180×180 的 PNG,当有人把你的网站添加到主屏幕时 iOS 会使用它——由系统以大尺寸、圆角的形式显示。iOS 在这种场景下不会读取你的 SVG favicon,因此必须提供专门的 PNG。
我可以使用 SVG favicon 吗?所有浏览器都支持吗?
当前每一款桌面和移动浏览器都能渲染 SVG favicon。为它们提供 SVG,并保留一个 favicon.ico,让老旧浏览器——以及 Google 搜索——仍能拿到图标。两个文件,兼顾两全。
如何制作深色模式的 favicon?
只有 SVG 能够自适应。在 SVG 内部放置一条 @media (prefers-color-scheme: dark) 规则,让它的填充色随浏览器主题变化——当深色 logo 在深色标签栏上会消失时,这很有用。ICO 和 PNG 是固定的位图,无法切换。进阶技巧中有完整示例。
为什么 Google 在搜索中显示错误的 favicon——或者不显示?
Google 有一套明确的规则:favicon 必须位于稳定的 URL,是一个尺寸为 48×48 倍数(48、96、144……)的正方形,与网站位于同一主机上,并且所在页面能被 Google 索引。它还会将图标与页面分开缓存,因此更改可能需要几天到几周才会显现。如果 Google 什么都不显示,请检查 /favicon.ico 是否向 Googlebot 返回 200,以及该页面是否被 robots 或 noindex 屏蔽。
我的 favicon 应该用透明背景吗?
通常应该——透明的 PNG/SVG 在浅色和深色标签栏上都能干净地显示。生成的 .ico 会为极少数无法渲染透明通道的老旧浏览器保留一个不透明的回退方案。如果你的 logo 是浅色的,可以考虑在它后面加一个小的实色形状,以免它在白色标签栏上消失。
我的 favicon 看起来模糊或糊成一团——为什么?
在 16×16 下细节会消失。文字标志、细笔画和渐变都会糊成一团。请使用单个醒目的图形或符号、高对比度,以及充足的留白。如果 logo 带有小字,制作 favicon 时就去掉文字,只保留标志。
我在服务器日志里看到 favicon.ico 的 404——这是问题吗?
只说明你没有 favicon。浏览器会自动请求 /favicon.ico,所以文件缺失就会表现为反复的 404。在根目录添加该文件,它们就会消失。
favicon 会影响 SEO 吗?
作为排名因素来说不会。但 Google 搜索确实会在移动端把你的 favicon 显示在结果旁边,因此一个清晰、易辨认的图标能提升点击率——这是间接的收益,而非排名的提升。
我的图像会被上传到任何地方吗?
不会。本生成器完全通过 Canvas API 在你的浏览器中运行——图像永远不会接触服务器。这就是为什么它能处理你的私密作品,甚至还能离线工作。