的身份 您的电子商务商店 汇集了多种元素，比如标志，网站的颜色，和你的 营销材料。 这个身份增强你的整体品牌，并为客户创造一个健康提醒，唤起的舒适性和可靠性的感受，当他们看到你的品牌形象和颜色。 虽然体积小，该网站图标也联系到该品牌的策略。 在本教程中，我们将向你展示如何创建和图标添加到您的 Shopify 商店，完善您的在线外观，并在客户访问时更容易识别您的商店。
什么是 Shopify Favicon？
A Shopify Favicon或与此相关的任何Favicon是网站的一个小图标，显示在网站名称旁边的浏览器选项卡上。
浏览器地址栏是查看站点Favicon的最常用区域，但它还会出现在以下位置：
- 工具栏应用
- 书签
- 历史结果
- 搜索栏
- 有时在社交媒体上分享时
本质上，只要浏览器需要显示指向您网站的链接，而没有太多其他内容的空间，它就会用Favicon替换您通常的全尺寸徽标。
默认情况下， Shopify 添加 Shopify Favicon的徽标，因此我们需要进行更改。
一个好的网站图标通常是徽标的较小版本，但是有时它们会有所不同，因为您要确保它们可见，占用所有分配的空间，并在您的网站名称旁边添加一些颜色。
默认情况下，所有浏览器均支持大小为32×32像素的Favicons。 这是一个很小的图像，但是在一些在线生成器的帮助下，您可以制作自己的图像 Shopify 您网站的Favicon。 此外，无论如何，较大的图像都会按比例缩小，因此不必一定要将其精确地调整为32×32。
Favicon对于在线商店而言颇为有意义 Shopify 由于它们很容易添加，因此加强您作为在线卖家的品牌形象很重要。 也有人认为这对SEO有帮助。
继续阅读以了解更多有关如何在您的网站上添加Favicon的信息。 Shopify 存储。
如何将网站图标添加到您的 Shopify 商店
如前所述，通过 Shopify 它会自动添加一个 Shopify 徽标作为您网站的Favicon。 没什么错，但是包含您自己的徽标会更加专业和面向品牌。
因此，请转到 Shopify 仪表板，然后单击“销售渠道”下的“在线商店”。
导航到您的主题，然后单击当前主题旁边的“自定义”按钮。 尽管设置因主题而异，但所有设置都是最新的 Shopify 主题有一个部分来更改Favicon。
在 Shopify 自定义程序，滚动到左侧列表的底部，然后单击“主题设置”。
在新部分中，找到并选择Favicon按钮。
这将显示一个“选择图像”或“浏览免费图像”的按钮。 我无法想象它们有任何与您的徽标匹配的免费图像，因此最好单击“选择图像”从您的计算机上载自定义图像。
选择Favicon文件并将其上传到 Shopify.
之后，您将看到Favicon图标的预览。 要使更改永久生效，请在以下位置选择“保存”按钮 Shopify.
查看您的 Shopify favicon运行中，请转到您的网站的前端，然后查看当前的浏览器标签。 您应该在网站标题旁边看到Favicon。
创建Favicon的提示
尽管看起来似乎很容易生成一个小图标，但考虑到客户每次访问您的网站时都会看到Favicon，将其正确设置很重要。 制作模糊或无法填充整个空间的Favicon也很容易，因为Favicon肉眼看不见，因而违背了Favicon的目的。
要解决任何问题，以下是创建您的广告的一些提示 Shopify 网站图示：
- 大于32×32的设计开始，并根据需要缩小设计。 如果您尝试将较小的图像拉伸到空间中，则图像肯定会模糊。 例如，从Hatchful处获取32×32的图像并尝试将其拉伸以去除徽标的书面部分可能会引起问题。
- 通常，您不能仅仅采用当前的徽标，并期望它可以作为Favicon完美地工作。
- 当您覆盖提供的空间的每个像素时，Favicon的外观很棒。 您没有太多空间，因此您应该充分利用每一个 square 32×32空间中的像素。
- 删除所有文本，因为在Favicon中很难阅读。 唯一的例外是您的主要徽标元素是大写字母。
- 拍摄纯色，鲜艳的色彩。 简单的卡通徽标效果最好。
- 查看您最喜欢的品牌的Favicons。 他们做了哪些工作以确保其在线图像能够通过收藏夹图标获得通过？
- 考虑要么用纯色背景填充整个空间，要么考虑将前景元素拉伸成透明的背景，使其仅碰触到边缘。 您会注意到，许多大品牌的Favicon都有透明的背景。
- ICO文件 format 适用于较小的图像。 如果您不熟悉，请使用 PNG 作为透明背景，或使用 JPG 作为具有纯色背景的高分辨率网站图标。
如何为您生成收藏夹图标 Shopify 商店
您可以选择使用任何设计软件来设计Favicon。 如果您更喜欢Photoshop，那就去吧。 如果您宁愿使用GIMP或Pixlr之类的免费软件，只要坚持要求的32×32尺寸，它们都可以使用。
您还可以选择使用 Shopify的Hatchful徽标和免费Favicon生成器。 查看我们的整个指南 使用 Hatchful 制作徽标。
徽标创建者完成工作后，它会为您提供一个包含多个徽标的文件 formats，其中之一是 Favicon。
请记住，您制作的许多徽标 Hatchful （阅读我们的 令人讨厌的评论）在徽标周围使用空白，因此您可能需要针对徽标进行调整以使其覆盖大部分空间。 总的来说，我发现您应该只使用提供的Hatchful favicon看起来不错（它会填充大部分空间并且没有像文本这样的小元素）。
如果不是这种情况，请使用Photoshop或Pixlr等第三方编辑软件删除一些不必要的元素。
重要：如果您打算在画布上拉伸图像以切出文本和空白，则需要使用较大版本的图像。 为此，我使用了Hatchful生成徽标，但实际上采用了其中一个大徽标（未提供Favicon文件），因为当我将其拉伸到32×32画布上时，我不希望出现模糊现象。
在编辑软件中，选择宽度和高度都设置为32的新画布。
为新图像制作一层，并确保图像大于32×32画布，因为您可能会拉伸它。 然后将图像上传或放置到画布中。
在以下屏幕截图中，我将Favicon设计放大了，因此我可以确保它适合 square 适当地。 它很模糊，但我知道缩小后看起来会好得多。
如您所见，Pixlr设计器中Favicon的缩小版本看起来不错。 我已经介绍了大部分空间，选择了一个明亮且纯色的图标，并删除了所有较小文本的符号。
最后一步是下载文件。 您可以选择此时将其设置为透明的PNG。 但是对于本教程，我坚持使用高分辨率JPG，以便使其看起来尽可能清晰。 而且我不介意使用纯色背景。
回到你的身边 Shopify 仪表板。 单击在线商店>主题>自定义。
然后转到主题设置> Favicon。
上载新的Favicon，然后在 Shopify 编辑。
再次，测试和查看Favicon的主要方法是简单地打开带有首页网站URL的选项卡。 如您所见，Favicon的显示效果很好，实际上比我以前的Favicon好一点，因为它看起来并不能满足提供的整个32×32空间。
在结论
A Shopify Favicon只需花费几分钟即可设计并添加到您的网站，但是它为您的访问者提供了一个很好的提醒，告知他们所访问的网站。 此外，考虑到他们在浏览这些部分时最有可能搜索一长串其他网站，因此它可以作为人们在书签和浏览器历史记录中找到您的网站的一种方式。
请记住，您不应该对模糊或难以理解的东西感到满意 Shopify 网站图标图像。 如果您发现第一个Favicon看起来不太正确，或者您想剪掉一些文本或添加透明背景，请回到开头并正确设置。 尽管完全没有Favicon并不是一个好主意，但是模糊或难以看到的Favicon会使您的品牌显得不专业且有些愚蠢。
如果您对将Favicons添加到其中有任何疑问 Shopify，或者自己制作 Shopify Favicon，请在下面的评论部分告诉我们。
注释 0回应