每个 Shopify 商店都会得到一个通用的默认 favicon——用你的品牌图标替换它,是你能获得的最快的信任提升之一。Shopify 通过主题编辑器让这一切变得简单,无需任何代码。以下是分步操作。
简单方法:通过主题设置上传
- 首先,从你的 logo 生成一个 32×32(或最大 180×180)的 PNG。
- 在你的 Shopify 后台中,前往 在线商店 → 主题。
- 在你正在使用的主题旁,点击自定义。
- 在主题编辑器侧边栏中,点击主题设置(顶部的齿轮图标)。
- 找到 Favicon 部分并点击选择以上传你的 PNG。
- 点击保存。
需要 Shopify 可用的 favicon PNG? 将你的 logo 上传到 Favicon.one,下载包含 Shopify 可能需要的所有尺寸的包。
Shopify favicon 尺寸要求
- Shopify 推荐使用 32×32 PNG 作为显示尺寸。
- 你可以上传更大的正方形图片(最大 180×180);Shopify 会自动缩放。
- 使用带透明度的 PNG,让图标在浏览器标签页中显得干净。
- 文件大小保持在 1 MB 以内。
Favicon 在 Google 搜索中看起来不一样
一个常见的抱怨:favicon 在浏览器标签页中显示正常,但在 Google 搜索结果中却不对(或缺失)。这通常是缓存问题——Google 按自己的计划重新抓取 favicon,有时需要数天或数周。解决方法:
- 在 Google Search Console 中请求重新收录你的首页。
- 确保你的 favicon 是至少 48×48 的正方形(48 的倍数最理想)。
- 验证
<link rel="icon">标签在你的商店 HTML 中。
手动方法:编辑主题代码
如果你的主题没有提供 favicon 设置,可以手动添加。
- 在 内容 → 文件(或通过设置 → 文件)下上传你的 favicon 文件并复制其 URL。
- 前往 在线商店 → 主题 → 操作 → 编辑代码。
- 打开
layout/theme.liquid。 - 在
<head>标签内添加:
<link rel="icon" type="image/png" href="{{ 'favicon.png' | asset_url }}">
<link rel="apple-touch-icon" href="{{ 'apple-touch-icon.png' | asset_url }}">(如果将文件放在主题的 assets/ 文件夹中,请使用 Shopify 的 asset_url 过滤器,或粘贴来自"内容 → 文件"的完整文件 URL。)
结账页 favicon
在 Shopify Plus 上,你可以通过 checkout.liquid 布局自定义结账页 favicon。在标准方案上,一旦在主题设置中设置了商店 favicon,结账页就会自动使用它。
我的 Shopify favicon 不显示
- 清除缓存。Shopify CDN 会缓存 favicon——等待几分钟或换一个浏览器预览。
- 文件类型错误。Shopify 的上传器偏好 PNG。请先转换你的 ICO/JPG。
- 主题覆盖。某些自定义主题在
theme.liquid中硬编码了 favicon。请检查那里。 - 非正方形图片。上传前裁剪为 1:1。
通用排查清单请参阅 "Favicon 不显示?"。
为你的 Shopify 商店生成一个干净的、透明的 PNG favicon—— 在 Favicon.one 免费。