Webflow 的网站图标

Webflow 的图标上传是项目设置面板的一部分，与设计器画布分开。单击 Webflow 仪表板中的项目名称，然后导航到项目设置 > 常规。向下滚动到“网站图标和应用程序图标”部分，单击上传区域，然后选择您的图像文件。 Webflow 接受 PNG、ICO 和 GIF 格式。

32×32 像素 PNG 是 Webflow 的图标上传器所需的最小尺寸，但从 512×512 开始会产生更清晰的结果。 Webflow 对选项卡显示和任何 CDN 生成的变体的图像进行下采样。始终提供您拥有的最大的干净源 - 该生成器可以轻松地从任何徽标创建 512×512 PNG。

Webflow 在自己的 CDN 上托管图标，并使用自动生成的 URL（通常采用 uploads-ssl.webflow.com/... 格式）。您无需手动提供 CDN 路径。上传后，单击“保存”，然后单击“发布”您的项目。图标会在发布时注入，而不仅仅是在保存时注入 - 未发布的更改在您的实时域中不可见。

透明背景可与 Webflow 网站图标上传一起正常工作。 CDN 保留了 PNG Alpha 通道，因此透明背景图标可以针对暗模式浏览器主题清晰地呈现。如果您的徽标具有纯白色或彩色背景，它将在浏览器选项卡中显示为方框。上传前导出不带背景填充的徽标。

Webflow 的内置图标上传器不支持 SVG 文件。如果您想要一个矢量 SVG 图标以在任何比例下进行清晰渲染并支持暗模式，请通过自定义代码注入添加它。转到项目设置 > 自定义代码 > 头代码并添加：`<link rel='icon' type='image/svg+xml' href='https://yourdomain.com/favicon.svg'>`。将 SVG 文件托管在您自己的服务器或 CDN 服务上。

为 iOS 主屏幕安装添加 apple-touch-icon 还需要 Webflow 中的自定义代码，因为内置上传器仅处理标准图标。将 180×180 apple-touch-icon.png 上传到文件主机（如果您的计划支持，则上传到 Webflow 资产），然后在“项目设置”>“自定义代码”>“头代码”字段中注入“<link rel='apple-touch-icon'sizes='180x180' href='URL_TO_YOUR_FILE'>”。

与 Next.js 等框架相比，Webflow 的 PWA 图标支持有限。 Webflow 中没有本机 Web 清单生成器。要获得完整的 PWA 安装支持，请手动创建 site.webmanifest JSON 文件，将其托管在外部，然后通过自定义代码注入清单链接标记。在清单图标数组中包含 192×192 和 512×512 PNG 条目。

如果您正在为客户构建 Webflow 网站，则网站图标通常会在项目后期设置，然后被遗忘。一个有用的工作流程是在项目早期设置占位符图标并在移交之前替换它。 Webflow 不会对网站图标历史记录进行版本控制 - 一旦您保存了新的网站图标，旧的网站图标就会从项目设置中消失，尽管它可能会在一段时间内通过其 CDN URL 进行访问。

多域 Webflow 站点（同一项目发布到多个自定义域）共享一个项目设置图标。本机 Webflow 中没有每个域的网站图标覆盖。所有已发布的域上都会显示相同的图标。如果您需要每个域的图标，请使用自定义代码注入有条件地覆盖图标链接标记（这需要 Webflow CMS 或自定义逻辑）。

由于 CDN 缓存的原因，Webflow 中的网站图标更新可能需要一些时间才能传播。发布新的图标后，旧的图标可能会在浏览器中显示 24-48 小时。在私人/隐身窗口中打开您的实时站点即可查看更新的图标，而不会干扰本地浏览器缓存。如果您的受众使用 CDN 缓存页面，则传播延迟取决于 Webflow 的 CDN TTL 设置。

对于 Webflow 编辑器用户（在没有设计器访问权限的情况下编辑内容的客户端），无法通过编辑器更改图标 - 它被锁定在项目设置中。只有具有设计者访问权限的协作者或帐户所有者才能更新图标。向客户清楚地传达这一点，以便他们知道在哪里请求未来的网站图标更新。

发布 Webflow 网站图标后，使用 favicon tester 确认它在您的生产域中解析。将结果与预期大小进行比较：选项卡为 32×32，iOS 为 180×180（如果添加了 apple-touch-icon）。另请参阅 best favicon size 指南，了解哪些尺寸可以提高网站的图标完整性得分。