Favicon示例，最佳实践和技术

您是否曾经关注过浏览器标签顶部的那些小图标？如何在网上保存网站或页面的快捷方式？这些微小的图像或网站图标是专门为此目的而设计的。

好的小图标的好坏之间有明显的不同。您会认为微不足道的设计决策影响较小，这是可以原谅的。但是设计不佳的网站图标可能会严重影响您的品牌。

今天，我们正在研究这些图标是什么，它们的基本设计技术以及需要遵循的规格。

什么是收藏夹图标？

网站建设

简而言之，网站图标是一个小的透明图标，用于表示网站，品牌或企业。Favicons通过提供一致的标记来帮助改善网站用户的体验，该一致的标记通过一致的视觉效果告诉网站访问者他们在导航时位于同一站点。

Favicon一词来自“收藏夹图标”。此术语可追溯到Internet Explorer时代，当时书签页面被称为“ Favorites”。Favicon最早由万维网联盟（W3C）于2000年用于HTML 4.0，并于2000年开始使用。次年在浏览器窗口中更一致地显示。

使用收藏夹图标可在浏览器选项卡之间快速切换，识别书签或在手机上找到已保存的应用程序或快捷方式。视觉标识符是大多数人用来将这些链接和页面与右键按钮关联以访问它们的工具。

传统上，收藏夹图标使用.ico文件格式，但现在已不再是问题。任何透明文件类型在大多数情况下都可以使用；.png通常是选择的格式。

技术注意事项

一次所有图标都为16像素的超小正方​​形。拥有更多高清视网膜屏幕和快捷方式图标的情况已不再如此。

HTML 5包含了各种样式的favicon标准，可用于各种用途，从微型浏览器图标到计算机坞站图标再到主屏幕图标。您甚至不再需要那个16像素的正方形。

现代图标的大小和用法：

• 32×32：大多数台式机浏览器的标准配置（代替16×16）
• 128×128：Chrome商店和Windows 8小屏幕星形图标
• 152×152：iPad触摸图标
• 167×167：iPad Retina touch图标
• 180×180：iPhone Retina图标
• 192×192：推荐Google Developer网络应用
• 196×196：Android主屏幕图标

最佳实践

尽管看起来像一个图标在整体设计上可能微不足道，但事实并非如此。

网站图标充分说明了您的品牌和网站。如果用户无法按名称标识用户，他们就会期望它们。这些小要素有助于整体用户体验和品牌。

那么如何充分利用收藏夹图标呢？

请记住以下最佳做法：

• 网站图标应与您的品牌标识相关联，但通常太小而无法包含整个徽标。使用可识别的元素，例如品牌名称的首字母或与品牌结合使用的小标记。
• 考虑形状。网站图标的空间默认情况下为正方形。如果您还有其他需要，则需要透明的背景。一些系统还可以使边缘变圆滑，这是需要牢记的另一个考虑因素。
• 确保文件很小，但不要太小。上载图标大小可以在大多数设备上正常显示的图片，但不会影响整个网站。
• 在网站图标设计中避免使用单词或复杂元素。
• 坚持使用图标图标的简单流线型调色板。它太小了，以至于无法对颜色感到疯狂。这就是为什么这些小图标中大多数都只使用背景颜色和前景色，而两者之间却有很大的反差。

设计技巧

由于收藏夹图标很小，因此您可能倾向于在Photoshop中一时兴起地对其进行设计。这不是推荐的长寿路线。

在矢量工具（例如Illustrator或Sketch）中构建收藏夹图标，然后将设计导出到必要的尺寸。这将确保随着屏幕分辨率的变化，您将拥有一个经受时间考验的图标。（您要做的就是重新导出为新大小。）

网站图标的首要视觉设计规则是保持设计简单。不要过度使用颜色，文字或品牌元素。查看本文中的示例，您将看到几乎所有这些微小元素都可以以16 x 16像素读取。

避免使用动画等技巧；他们只会挡在这里。

将其视为设计挑战。创建很小的东西以使其易于阅读可能非常困难。

将文件另存为透明png。这是一个好习惯，可确保您不会在网站图标上出现奇怪的边缘或边界。（看起来没有比包围图标的锯齿状白色边缘更糟糕的了。）

使用良好设计的原则。您永远不知道何时将图标图标用于更大，更可见的尺寸。例如，保存网站书签可以使用大版本的收藏夹图标。对于停靠甚至在搜索引擎结果预览中也是如此。

即使很小，此图标仍代表您的品牌。精心设计。

准备好文件后，只需几行代码即可将其添加到您的网站。（许多WordPress主题和网站建设者已包含favicon元素，因此您甚至不必考虑这一步骤。）

上载图像文件后，将以下代码插入您网站的标题中，请注意“ iconpath”和“ iconname”是指您的特定文件元素：

• HTML索引文件：<link rel =“快捷方式图标” type =“ image / x-icon” href =“ iconpath”>
• WordPress：<link rel =“快捷方式图标” type =“ image / x-icon” href =“” ?? php bloginfo（’url’）？> / iconname“>

例子

下面的示例包括一些带有相关图标的品牌元素。（请务必点击并在Dribbble页面上向设计师展示一些爱。）

Prodigi.team响应式徽标

奶油硬糖建议徽标系统

徽标图标显示

网站图标模板

TEC徽标选项2

结论

网站图标缺少什么大小，它们取决于用户体验。这些图标用作站点上访客的导航工具，而那些图标往往会使浏览器选项卡保持打开状态。

通常，图标图标是将用户链接到您的数字状态的快速视觉标识符。请谨慎对待，以确保它是您品牌的最佳，更准确的代表。