Framer 网站添加 Favicon 完整指南：深色模式、Apple Touch Icon 和常见问题

在 Framer 中添加 favicon 非常简单：打开站点设置（⌘ + ,），滚动到"Site Images"→"Favicon"，上传一张 64x64 的 PNG 文件，然后发布网站即可。

下面我们来详细讲解操作步骤，并帮你排查可能遇到的问题。

Framer Favicon 规格要求

Framer 对 favicon 有以下具体要求：

• 尺寸：64 x 64 像素
• 格式：PNG（推荐）
• 背景：透明

步骤一：打开站点设置

有两种方式可以进入设置：

• 快捷键：按 ⌘ + ,（Mac）或 Ctrl + ,（Windows）
• 菜单操作：点击 Framer 图标 → Site Settings → Open Settings

步骤二：找到 Favicon 设置区域

• 向下滚动到"Site Images"部分
• 找到"Favicon"上传区域

步骤三：上传 Favicon

Framer 提供两个上传位置：

• 浅色主题 Favicon：在浅色模式浏览器中显示
• 深色主题 Favicon：在深色模式浏览器中显示

如果你只有一个版本，将同一张图片上传到两个位置即可。

步骤四：发布网站

• 点击 Publish 按钮
• Favicon 只在正式发布的网站上显示，预览模式下看不到

浅色和深色模式适配

为什么需要两个版本？

• 深色 logo 在深色浏览器标签页上会看不清
• 浅色 logo 在浅色浏览器标签页上会看不清
• 分别设置可以确保在所有模式下都清晰可见

如何制作两个版本

1. 从常规 favicon 开始
2. 反转颜色制作另一个版本
3. 保持相同的形状和设计
4. 两个版本都使用透明背景

Apple Touch Icon 设置

自 2024 年 9 月起，Framer 支持 Apple Touch Icon：

• 位置：同一个 Site Images 设置区域
• 尺寸：180 x 180 像素
• 用途：iOS 设备添加到主屏幕时显示的图标

常见问题排查：Favicon 不显示

检查基本事项

• 是否已发布网站？
• 强制刷新：Cmd+Shift+R 或 Ctrl+Shift+R
• 尝试用无痕窗口打开

确认上传位置

• 必须在站点设置（Site Settings）中上传，而不是页面设置
• 文件必须是有效的 PNG 格式

常见问题排查：Google 显示旧 Favicon

Google 更新 favicon 的速度较慢（通常需要数天到数周）。

加速更新的方法

1. 确认 favicon 已在网站上生效
2. 打开 Google Search Console
3. 使用网址检查工具检查首页
4. 请求重新编入索引

常见问题排查：Safari 显示异常

Safari 对 favicon 的缓存非常顽固。

解决方法

1. 彻底清除 Safari 缓存
2. 删除 favicon 缓存文件夹：~/Library/Safari/Favicon Cache/
3. 退出并重新打开 Safari

常见问题排查：仍然显示 Framer 默认 Logo

常见原因：

• 上传 favicon 后未发布网站
• 浏览器缓存问题
• 查看的是预览页面而非正式网站

解决方法：发布网站并清除浏览器缓存。

最佳实践

• 备份文件：保存好 favicon 的原始文件
• 全面测试：在 Mac、Windows、iOS、Android 上分别检查
• 使用检测工具：Favicon.im 可以验证你的 favicon 配置
• 记录颜色值：记下品牌的精确十六进制色值，保持一致性

常见问题

如何在 Framer 中添加 favicon？

使用快捷键 ⌘ + , 打开站点设置，滚动到"Site Images"，点击"Favicon"，上传一张 64x64 的 PNG 文件，然后发布网站即可。

Framer favicon 应该用多大的尺寸？

Framer 推荐使用 64 x 64 像素的 PNG 格式图片，背景设为透明。

为什么我的 Framer favicon 不显示？

最常见的原因是：网站未发布、浏览器缓存、或上传位置不对。发布网站后，强制刷新页面，或尝试使用无痕窗口查看。

Google 更新 favicon 需要多长时间？

Google 更新 favicon 的速度较慢，通常需要数天到数周。可以通过 Google Search Console 请求重新编入索引来加速。

Framer 是否支持深色模式 favicon？

支持。自 2024 年 9 月起，Framer 允许在 Site Images 设置中分别上传浅色和深色主题的 favicon。

参考资料

1. How to set up a favicon in Framer - Framer 官方帮助文档
2. September 2024 Update: Apple Touch Icon and Favicons - Framer 更新日志
3. Why isn't Safari displaying the favicon? - Framer 问题排查
4. Favicon.im - Favicon 检测和验证工具