Shopify 的网站图标
Shopify 可让您在几秒钟内从主题编辑器上传网站图标。每个现代 Shopify 主题都会在主题设置下公开一个 Favicon 字段，并且 Shopify 的 CDN 会在店面的每个页面上提供该图标。首先使用 favicon generator 创建一个方形 512×512 PNG — Shopify 会自动将其调整为所需的 32×32 显示尺寸。
网站图标是潜在客户打开多个选项卡时看到的第一个品牌信号之一。在 Shopify 商店中，图标出现在浏览器选项卡、书签栏和地址栏中。清晰、可识别的图标可以增强品牌信任度，并帮助购物者在数十个打开的选项卡中快速找到您的商店选项卡。
每个现代 Shopify 主题（Dawn、Refresh 和大多数高级主题）在主题设置下的 Theme Editor 中都包含一个 Favicon 字段。要访问它，请登录您的 Shopify 管理员，转至在线商店 > 主题，然后单击实时主题旁边的自定义。在左侧边栏中，单击“主题设置”（或齿轮图标），然后查找“网站图标”部分。
Shopify 建议为网站图标字段上传 32×32 像素的方形 PNG。实际上，上传 512×512 PNG 会产生更清晰的结果，因为 Shopify 将其下采样到 32×32，其质量比从 32×32 原始文件开始时更好。始终从您拥有的最大方形源开始 - 生成器使这变得容易。
上传您的网站图标后，单击 Theme Editor 右上角的“保存”。 Shopify 处理图像，将其上传到其 CDN，并在几分钟内将其传播到每个店面页面。您不需要重新发布主题或进行任何其他代码更改。
较旧或高度自定义的 Shopify 主题可能不会在主题设置中公开 Favicon 字段。在这种情况下，您需要直接编辑主题的 Liquid 代码。打开主题文件编辑器（在线商店 > 主题 > 编辑代码），找到 theme.liquid 文件，然后找到“<head>”部分。将 favicon.png 上传到主题的 Assets 文件夹后插入 `<link rel='icon' type='image/png' href='{{ 'favicon.png' | asset_url }}'>`。
对于 2.0 主题框架上的 Shopify 商店，网站图标是通过 Shopify 从您的主题设置自动生成的 site.webmanifest 进行管理的。如果您的商店使用渐进式 Web 应用程序 shell，则 Shopify 的清单将包含图标作为应用程序图标。更新主题图标会自动更新清单图标 - 无需额外的 JSON 编辑。
透明背景在 Shopify 图标中可以正常工作。上传到 CDN 时，主题编辑器会保留 PNG Alpha 通道。但是，如果您的徽标具有白色背景，则它将在深色模式浏览器选项卡中显示为白色框。在上传之前导出不带背景填充的徽标，以避免这种情况。
如果您经营多个 Shopify 商店（国际店面的常见设置），则每个商店必须独立设置其网站图标。图标是每个商店的设置，而不是 Shopify 合作伙伴或组织级别的设置。登录每个商店的管理员并重复 Theme Editor 步骤。
缓存失效可能会延迟 Shopify 中的图标更新。 Shopify 的 CDN 缓存具有长 TTL 的资源。更改图标后，浏览器可能会继续显示旧图标数小时。打开私人/隐身窗口即可查看更新后的图标，而不会受到缓存干扰。或者，指示您的浏览器进行硬刷新（Windows 上为 Ctrl+Shift+R，Mac 上为 Cmd+Shift+R）。
Shopify 本身不会注入 apple-touch-icon 或 Web 应用程序清单链接标记，除非您的主题模板包含它们。如果您希望 iOS 主屏幕安装显示您的徽标而不是页面屏幕截图，请通过在线商店 > 主题 > 编辑代码 > theme.liquid 手动添加 apple-touch-icon 标签。放置`<link rel='apple-touch-icon'sizes='180x180'href='{{'apple-touch-icon.png'|在 `<head>` 部分中输入 asset_url }}'>` 并将 180×180 PNG 上传到资产。
对于 Shopify Plus 商店，您可以使用结帐品牌来自定义结帐流程中的图标，与主店面图标分开。结帐品牌是在“设置”>“结帐和帐户”>“自定义”下配置的。这允许您的结帐页面显示与主商店不同的图标，这对于多品牌设置非常有用。
要验证您的 Shopify 图标是否正常工作，请使用 live favicon tester 并输入您商店的 URL。测试人员确认该图标可公开访问，并向您展示它如何以 16、32 和 48 像素呈现。另请检查 best favicon size 以了解哪些额外尺寸可以改善您的 PWA 安装体验。
常见的 Shopify 网站图标错误包括上传矩形徽标而没有先将其裁剪为正方形（产生压扁的图标）、上传非常小的图像（在视网膜显示屏上模糊）以及上传后忘记单击“保存”（除非您明确保存，否则不会提交更改）。 favicon generator 以 512×512 导出正确的方形 PNG，准备直接上传 Shopify。
工作原理
- 1
生成一个512×512的正方形PNG
使用带有您的徽标或品牌标志的 [favicon generator](tool:favicon-generator)。从下载包中导出 512×512 PNG — 这是 Shopify 的正确输入大小。
- 2
在 Theme Editor 中打开您的主题
在 Shopify 管理员中，转到在线商店 > 主题，然后单击实时主题旁边的自定义。
- 3
导航至主题设置 > 网站图标
在左侧边栏中，单击“主题设置”（大多数主题底部的齿轮图标），然后查找“网站图标”或“品牌”部分。确切的标签因主题而异。
- 4
上传您的 PNG 并保存
单击图标上传字段，选择您的 512×512 PNG，然后确认。单击右上角的“保存”。 Shopify 将图标上传到其 CDN 并将其传播到所有页面。
- 5
在隐身窗口中验证
打开私人/隐身浏览器窗口并导航到您的商店 URL。确认新的网站图标出现在浏览器选项卡中。使用 [favicon tester](utility:favicon-tester) 进行快速外部检查。
立即尝试
生成 Shopify 就绪的图标
Favicon 生成器常见问题
在 Shopify 中哪里可以添加网站图标？+
在线商店 > 主题 > 自定义 > 主题设置 > 网站图标。上传一个方形的 PNG（推荐 512×512），单击“保存”，Shopify 会自动将图标注入每个店面页面。
Shopify 使用什么尺寸的网站图标？+
Shopify 在浏览器选项卡中以 32×32 像素显示图标。上传 512×512 以获得最清晰的结果 - Shopify 将采样降低到 32×32。切勿上传小于 32×32 的源，否则会显得模糊。
为什么我的 Shopify 图标看起来模糊或拉伸？+
您可能上传了非方形图像或非常小的源。上传之前将您的徽标裁剪为完美的正方形，并从至少 256×256 像素开始。 [favicon generator](tool:favicon-generator) 自动生成一个方形 512×512 PNG，为 Shopify 做好准备。
为什么我的新 Shopify 图标没有显示？+
浏览器和 CDN 缓存会延迟更新。打开隐身/私人窗口并导航到您的商店 URL 以查看更新的图标，而不会受到缓存干扰。如果正常浏览时仍显示旧图标，请等待几个小时，让 CDN 缓存过期。
我可以将 apple-touch-icon 添加到我的 Shopify 商店吗？+
可以，但是需要手动编辑代码。将 180×180 apple-touch-icon.png 上传到主题资源文件夹，然后添加 `<link rel='apple-touch-icon' href='{{ "apple-touch-icon.png" | asset_url }}'>` 位于 `<head>` 部分内的 theme.liquid 中。
Shopify 是否支持 SVG 图标？+
内置 Theme Editor 图标上传不接受 SVG。要使用 SVG 图标，请在 theme.liquid 中手动添加链接标签：`<link rel='icon' type='image/svg+xml' href='{{ "favicon.svg" | asset_url }}'>` 将 SVG 上传到 Assets 文件夹后。
我需要开发人员来更改我的 Shopify 图标吗？+
No. Using the Theme Editor (Online Store > Themes > Customize > Theme Settings > Favicon), you can upload and save a new favicon in under two minutes with no code.仅 SVG 或 apple-touch-icon 添加需要开发人员访问权限。