如果已发布的 Framer 站点在浏览器标签页中显示通用地球图标，请检查三个层面：项目中的 favicon 字段、发布时使用的域名，以及 HTML 响应。无需重新设计页面，也可以替换项目级 Framer favicon。
优先使用 Framer 自带的 favicon 上传功能。这样图标会始终关联到项目，也不需要额外插入 HTML 代码片段。只有在需要 SVG、特定尺寸或可控资源 URL 时，才使用自定义代码。
开始之前
- 能够访问 Framer 项目及其 Settings 面板。
- 准备一张正方形源图。使用 Mzu favicondl 导出 512×512 的 PNG，必要时再准备 ICO 或 SVG。
- 访问者实际使用的准确域名，包括任何自定义域名。
如需了解更通用的上传方法，请参阅我们的 no-code favicon 指南。下文聚焦 Framer 设置、发布和验证。
如何在 Framer 中添加 favicon
- 打开项目设置。
在 Framer 中打开项目，从顶部项目菜单中选择 Settings，然后进入站点设置。在常规站点信息下找到 Favicon 或 Site Icon 字段；如果没有该字段，请查看同一面板中的 SEO 或 site metadata 区域。不要只在单个页面上配置它。
- 上传正方形图标。
选择 Upload，选中 PNG，并检查裁剪结果。让图形居中，删掉在标签页尺寸下已经看不清的小字。保存更改。如果该字段支持 SVG 或 ICO，就使用相应导出的文件；否则使用 PNG。
- 发布项目。
选择 Publish，然后在新标签页中打开发布后的 URL。访问者看到的并不是编辑器画布中的效果。
- 验证线上响应。
在 DevTools 的 Elements 面板中查找
rel='icon'，确认 URL 指向你上传的资源。在 Network 面板中请求该资源并检查状态；请求失败就无法更新标签页图标。 - 仅在有意覆盖时使用自定义代码。
如果项目设置中提供 Custom Code，打开其中的 Head 区域并加入以下代码，同时将两个 URL 都替换为可公开访问的 HTTPS 资源 URL：
<link rel='icon' type='image/svg+xml' href='https://your-domain.com/favicon.svg'> <link rel='icon' type='image/png' sizes='512x512' href='https://your-domain.com/favicon-512.png'>HTML Standard 规定了使用
rel='icon'关联外部图标链接的方式。禁用原生上传功能或任何旧代码片段，让图标由单一来源控制。
常见误区
- 在编辑器里正常，发布后却失效。 重新发布，并测试正式域名，而不是预览 URL。
- 重复设置图标链接。 如果 Framer 的上传器已经设置了图标，就删除遗留的自定义代码。
- 旧图标仍然存在。 先确认资源响应是否正确，再按照 favicon 排查清单 检查与缓存相关的问题。
- 资源能正常加载，但显示效果不对。 重新裁剪正方形源图，并在转换前简化过细的细节。
结语
最稳妥的方案是只保留一个管理入口：项目设置。上传正方形 PNG，发布并检查线上 HTML；只有在明确需要覆盖默认设置时，才使用自定义代码。这样下一次替换图标时，结果依然可预期。