像素艺术:为你的网站创建一个更好的图标

Favicons是像素大小的小图标,是缩写最喜欢的偶像,或在加入书签后在网站标题旁边显示的图标。它们还出现在web浏览器的URL部分和选项卡中。Favicon的目的不仅仅是为了视觉上的冲击,它还是一个重要的品牌工具,可以支持一个网站更好的品牌形象,比如logo、整体配色方案和主题。

像素艺术:为你的网站创建一个更好的图标

当过去的访问者通过书签、历史记录或收藏夹进行搜索时,拥有一个好的favicon可以使网站更加引人注目和相关。它还可以帮助用户快速找到一个网站时,试图搜索自己的方式通过多个标签。在这篇文章中,我们将会看到一些很好的代表各自品牌的Favicon,同时也会涉及到一些教程和如何在你的网站上创建你自己的有效的Favicon。

教程和操作指南

创建和实现一个Favicon是相对容易的。URL字段和浏览器选项卡中的Favicons位于16×16像素,但是32×32有些浏览器在收藏区使用像素。下面是一个一步一步的指导,首先设计你的图标,然后把它放在你的网站。

一步一步的指导,把一个Favicon放在你的网站上

  • 打开MS Paint或其他你选择的图形程序。MS paint工作得很好,因为你将不得不在一个简单的像素和一个简单的调色板,因为它支持保存文件的Favicon格式:ico。但是,可以在另一个程序中创建一个Favicon,然后将其翻译成ico使用在线生成器也很容易。
  • 创建一个16 px 16 px记录并开始在这个空间内进行设计。要在这么小的空间里创建大量的细节是很困难的,所以一定要参考下面的最佳实践和指导方针来创建一个有效的Favicon。您可能还想创建一个32 px的32 px图标与更多的细节,因为一些浏览器显示收藏夹在这个大小。不过,从实用的角度来看,16×16对于大多数用户和现代浏览器来说,像素通常足够了。
  • 将图标保存在a中ico格式。这可以在MS Paint中完成,通过Photoshop和这个插件,或者使用下面的在线生成器。它还可以简单地以任何常见的web图像格式保存图标,然后将文件重命名为ico而不是.jpg、.gif或.png。然而,这只是伪装了真正的格式,并且使用这种方法在所有浏览器之间可能不是完全兼容的。
  • 把图标放在你的图像文件夹里,或者你网站的根文件夹里。
  • 在你的网页标题部分使用以下代码,最好是在你的元标签或其他链接标签旁边:
    1<链接 rel=“快捷方式图标” 类型=“图像/ x图标” href=“图像/ ico”位于 />

进一步和更具体的教程

最佳实践

任何人都可以看到,创建和实现a的图标是非常容易的。大多数web设计人员都知道这一点,但是上面只是一个快速的指南。现在,让我们来看看的图标更详细一点的设计。与任何网页设计实践一样,在设计和实现网站上的favicons时,有一组最佳实践。下面是一些想法,有些是技术上的,有些不是。

将你的Favicon命名为“Favicon .ico”

许多网站将它们的图标命名为“favicon”。出于一些好的理由。最重要的原因是浏览器与IE的兼容性。是的,即使使用经典的Favicons,我们仍然必须处理Internet Explorer中的问题。幸运的是,问题很容易克服。IE6可能只在图标以字母结尾的情况下才会将图标识别为faviconsico。有办法使其他图像格式(例如。png、。jpg和。gif)通过改变上面的HTML代码来作为Favicons,它在现代浏览器中也能正常工作。然而,我们甚至不会深入到如何做到这一点,因为它只是更容易和更兼容,使favicons在标准ico格式。

此外,IE5和更早版本甚至可能不认识一个favicon,如果它被命名为任何不同于“favicon”的东西。许多人会说,那些仍然使用IE5或更早版本的用户的比例几乎为零,这几乎没什么关系。虽然这是一个很好的观点,它不需要额外的努力来命名一个适当的favicon,无论如何包括那一小部分。

第三个将你的图标命名为“favicon”的好理由。是为了一致性目的。在开发人员与开发人员之间的网站工作时,这是这样一个图标的标准名称,因此可以更容易地识别和使用它。

目录结构

目录结构

把你的Favicon放在最上面的目录里

虽然我们上面的操作示例确实将favicon放在了一个图像/文件夹中,但通常最好将favicon放在网站的根目录中。虽然可以在任何目录中放置一个favicon并分别链接到它,但是为了保持一致性,大多数开发人员将它放在最上面的目录中。

对于某些人来说,将其放入images文件夹可能更有意义,因为它是一个图像,但是标准的开发人员到开发人员目录结构将其包含在顶部目录中,并带有主页。

创建一个多分辨率图标

我们在上面讨论了favicons的常用尺寸尺寸。16 px 16 px是最常见的,许多网站选择只使用这个。一个标准的16 px 16 pxicon在大多数情况下都能正常工作。然而,有一种方法可以创建一个支持较大版本图标的多分辨率favicon,只是在图标被转换为桌面或应用程序图标的情况下。这可以防止16px * 16px的图标被拉伸成可怕的东西,在极少数情况下,图标会被扩展。

多分辨率图标

多分辨率图标

有关如何创建多分辨率图标的详细教程,请参阅这篇文章:使用GIMP创建包含透明度的多分辨率favicon。虽然本教程基于GIMP,但同样的原理也可以翻译为Photoshop或其他照片编辑程序。

使用256色调色板

这个简单的调色板是默认的Windows调色板。大多数浏览你的favicon的浏览器都会支持它,而且,颜色的简单性意味着在这么小的空间里设计出更好的视觉效果。

保持简单和一致的品牌

当然,要坚持使用favicon的主要目的:让它支持你的网站品牌。许多favicons是网站标志的简单版本,或者是一个相对的图像。它们的配色方案与网站的主色相同,不会偏离网站的整体外观和主题太远。永远不要只是使用一个随机的图像或有趣的像素艺术为一个图标。没有必要这么做。让它与你的品牌相关,并与你网站的整体外观相关。

还要保持设计尽可能简单。只是没有足够的空间来添加额外的设计特性,比如阴影、纹理等等。干净的线条和形状是创建一个简洁、干净、有效的图标的最好方法。如果没有一个最低限度的设计,整体使用可能会适得其反,变得过于拥挤和模糊的有效品牌。

Favicon生成器和工具

收藏夹图标CC

收藏夹图标CC

收藏夹图标CC

收藏夹图标生成器

收藏夹图标生成器

收藏夹图标生成器

的图标

的图标

一些伟大的favicon的展示

http://www.hotwheels.com

http://www.reachgroupconsulting.com

http://www.iconshoppe.com/

http://en.splitweet.com

http://www.rockettheme.com

进一步的资源

结论

Favicons不仅仅是一个赞美的形象,他们是一个有效的品牌工具,如果使用得当,可以提高你的网站的整体品牌和质量访问者。Favicon的设计应该模仿一个网站的logo或品牌,这样才能正确工作,但也必须注意一些小的技术要求,使Favicon在不同的浏览器和不同的环境下尽可能多的通用。如果没有这种关注,代表你的网站和/或业务的favicon在放大或完全不可用时就会变形。

网站创建者无处不在:注意你的图标。这与你的品牌一致吗?你有吗?如果没有,用一个设计良好、实施良好的favicon来改善你的专业形象和品牌。

2020-03-29 17:26
相关热门