Webflow 图标未更新？快速修复与预防指南

如果你刚在 Webflow 上传了新的 favicon，却仍然在浏览器标签栏看到旧的方块图标，你并不是唯一遇到这种情况的人。表现为即使已发布，标签页仍显示旧图标。

快速修复（先做这一步）

按下面的三步操作，然后刷新页面。

在 Chrome（或你常用的浏览器）中打开页面。
在 favicon 的 URL 后追加查询字符串，例如 /favicon.ico?v=2。可以在 Webflow 项目的 Custom Code 区域编辑 link 标签实现。
再次发布站点。新的 URL 会迫使浏览器绕过缓存的副本。

发布完成后，按 Ctrl+F5（强制刷新）。更新后的图标应立即出现。

根本原因解析

了解图标为何会残留旧版，有助于以后避免同样的问题。

浏览器缓存

favicon 因体积极小且每次导航都会请求，浏览器会非常积极地缓存。大多数浏览器会保存数天，除非 URL 变化，否则即使 link 标签更新也不会重新请求。

Webflow 的发布流程

点击 Publish 时，Webflow 会把文件推送到 CDN。CDN 可能在旧文件过期前仍返回之前的版本。给资源加上版本查询字符串即可让 CDN 识别为新文件。

错误的 `rel` 属性

Webflow UI 默认插入 <link rel='shortcut icon' href='...'/>。现代浏览器更倾向使用 HTML 规范中定义的 rel='icon' HTML spec。使用旧的值可能导致部分浏览器忽略新文件。

缺失或不匹配的文件类型

如果上传的是 SVG，却没有声明 type 属性，老旧浏览器可能回退到缓存的 .ico 文件。显式写上 type='image/svg+xml' 可以消除歧义。

CDN 边缘缓存

即使执行了强制刷新，CDN 边缘节点仍可能保留旧文件。可以在 Webflow 仪表盘的站点设置 → Hosting → Clear cache 中清除边缘缓存，但对大多数开发者而言，查询字符串的办法更快捷。

预防建议

始终使用 rel='icon'，并为 SVG 或 PNG 文件添加相应的 type。
在替换图标时给 favicon URL 加上版本号（例如 /favicon.svg?v=202308）。
发布后通过站点设置页面清除 Webflow 的 CDN 缓存。
在隐身窗口中测试，以确认本地缓存没有干扰。
为老旧浏览器在根目录准备一个后备的 .ico 文件。

遵循这些步骤可以让图标的更新链保持干净，后续修改也会更顺畅。

实现示例

下面是一段最小化、符合标准的代码片段，可直接粘贴到 Webflow 的 Custom Code → Head 区域。它遵循 HTML 规范，并带有版本查询字符串。

&lt;link rel='icon' type='image/svg+xml' href='https://example.com/favicon.svg?v=202308'&gt;
&lt;link rel='icon' type='image/png' href='https://example.com/favicon-32.png?v=202308' sizes='32x32'&gt;

将 https://example.com/ 替换为你的域名。版本标记可以是任何在文件变动时会更改的字符串。

进一步阅读

完整的 Webflow favicon 上传流程请参阅官方指南 Add a favicon or webclip。如果在部署后仍遇到顽固的 CDN 问题，可阅读文章 Favicon Not Updating After Deployment? The 2‑Minute Fix，其中详细介绍了边缘缓存的清除方法。

先执行快速修复，再逐一解决根本原因，你的 Webflow 站点标签图标就能保持新鲜且在各浏览器间保持一致。