网站的最佳徽标尺寸是多少？

您的品牌标志必须存在于无数不同的地方，从您网站上的一个小网站图标到繁忙高速公路上的巨大广告牌。 即使在您的网站中，您的徽标也有不同的位置，并且具有不同的方向和大小。 每次你使用你的标志——或者如果的变体——它必须是一致的、清晰的和可识别的。

当您从一开始就知道您需要的不同徽标尺寸和大小时，将其添加到您的网站以及您的社交媒体、印刷产品和所有其他品牌宣传品中会容易得多。

订阅我们的 YouTube 频道

标志变化

在大多数情况下，徽标具有三个元素：公司名称、图标和口号。 或者，您可以将徽标视为具有两个主要组成部分：图像或符号以及排版或文字标记。 最终，您可以一起或单独使用这些元素，但无论它们如何排列，它们都应该反映您的品牌。

一个标志在设计、尺寸、方向、形状和大小方面可以有多种变化。 您使用徽标的上下文——出于我们的目的，它在您网站上的位置——决定了您选择的徽标版本。 每次您将徽标调整为不同的背景或大小时，目标都是保持其完整性。

以下是您应该考虑创建以在您的网站和其他地方使用的常见徽标变体：

• 水平、方形和垂直
• 黑色、白色、全彩和反色
• 常规背景和透明背景
• 完整徽标、仅图标和有限文本或单个字母/字母组合

您创建的所有不同徽标以及应使用它们的位置的详细信息也应包含在您的品牌套件中。 如果您不是自己创建徽标变体，请知道创建它们的机构或设计师应将所有变体与原始主要徽标一起发送。

徽标文件类型

文件类型会影响徽标在放大和放大时的外观。 如果您使用不可缩放的文件类型创建徽标，它会随着变大而看起来模糊和像素化。 你不想要这个——你想让你的标志看起来详细和完美，无论它是微小的还是巨大的。

为了使您的徽标可以在不降低质量的情况下进行缩放，它应该是矢量格式，最好是 PNG 文件。 PNG 是无损压缩文件，这意味着文件大小非常小，但可以保持设计质量。 您还可以对 PNG 文件使用透明背景，这非常适合网站和其他数字空间。 在线显示徽标时，您的 PNG 文件应小于 200KB，以加快加载速度。

您可能更熟悉 JPG 文件，但不想将 JPG 用于徽标。 这种类型的文件是有损压缩，而不是无损压缩。 虽然它比 PNG 占用更少的空间，因为文件大小有点小，但质量更差，并且您的徽标可能看起来像素化，尤其是当您尝试将其放大时。

为您的网站选择徽标大小

您的徽标将出现在您网站上的两个主要位置：网站图标和导航栏。 让我们来看看这些地方的具体尺寸。

图标徽标大小

在像 favicon 这样的小空间中，您应该使用仅图标的徽标，因为该区域太小而无法读取任何文本。 或者，如果您的徽标是一个单词，则可以使用单词的第一个字母或字母组合版本（如果有两个或多个单词）。 在下面的示例中，您将看到亚马逊的单字母徽标用在不同的地方，包括在他们的一些礼品卡上：

资料来源：亚马逊

PS 收藏夹图标是显示在搜索栏中网页标题旁边的小图标，它也会出现在书签或收藏夹列表中。

标准图标大小如下：

• 16 x 16 像素（最常见）
• 32 x 32 像素
• 48 x 48 像素

导航栏标志大小

您网站的导航栏或标题将放置您的徽标 – 可能是完整的标准徽标。 通常，徽标将位于导航栏的左侧。

虽然确切的大小取决于您的特定网站构建器，但大小选项可能大致如下：

• 完整横幅：468 x 60 像素
• 水平布局：250 x 150 像素； 350 x 75 像素； 或 400 x 100 像素
• 垂直布局：160 x 160 像素

这些不是实际标题的大小 - 标题会更大 - 但它们是设计徽标以适应这些类型的网站标题时要考虑的大小。

您将使用徽标的其他地方

如果您要为您的网站创建徽标的变体，那么现在也是制作其他地方所需的版本的好时机。 例如：

• 数字广告和横幅将需要徽标。
• 在社交媒体上，您需要在背景、横幅、封面照片、个人资料图片、帖子和缩略图中使用您的徽标。
• 对于拥有销售实体材料的在线商店的品牌，您可能需要将徽标印在磁铁、杯子或 T 恤上。
• 如果您销售或发送实物材料，您会将您的徽标放在运输材料上，例如盒子、信封甚至包装胶带。

像 Canva 这样的工具有现成的模板，具有适合不同位置的图形的理想尺寸，例如您的 Facebook 封面照片或 Instagram 上的故事帖子。 您可以将徽标弹出到模板中，然后下载最终设计以在任何需要的地方使用。

关于您网站徽标大小的最终想法

当谈到您的标志、它的变体以及您将它们放置在网站上的位置时，请记住这是创意和以设计为中心的——没有必须遵守的硬性规定。 而且由于它不是一门完美的科学，您可以使用您的艺术眼光和最佳判断来决定在何处使用什么。 你的标志传达了很多关于你的公司的信息，它是你的品牌元素之一，会影响观众的看法。 无论在何处使用，它都应该看起来清晰且高质量。

你的标志准备好了吗？ 以下是在 Divi 中添加自定义徽标图像的方法。 您可能也喜欢我们的文章，以简单而富有创意的方式在 Divi 中显示您的徽标。

精选图片来自 Mas Blend / shutterstock.com