新手教程之如何设计Favicon站点图标

依旧殇城

依旧殇城

2016-02-16 23:16

下面图老师小编要跟大家分享新手教程之如何设计Favicon站点图标,简单的过程中其实暗藏玄机,还是要细心学习,喜欢还请记得收藏哦!

现代网页设计中最令人沮丧和感到混乱的莫过于网站图标了(favicon),是favorite icon的简称。这枚小小的图标一般出现在浏览器的选项卡里、地址栏处,根据我们操作系统和浏览器的不同,还有可能出现在其他地方。

我先给大家科普下:favicon,即Favorites Icon的缩写。favicon 就是出现在浏览器地址栏左侧的那个小图标。favicon,中文名称是网站头像。当然,这不仅仅是Favicon的全部,根据浏览器的不同,Favicon显示也有所区别:在大多数主流浏览器如FireFox和Internet Explorer (5.5及以上版本)中,favicon不仅在收藏夹中显示,还会同时出现在地址栏上,这时用户可以拖曳favicon到桌面以建立到网站的快捷方式;除此之外,标签式浏览器甚至还有不少扩展的功能,如FireFox甚至支持动画格式的favicon等。

新手教程之如何设计Favicon站点图标,PS教程,图老师教程网

新手教程之如何设计Favicon站点图标,PS教程,图老师教程网

由于他们不同寻常的文件格式和超级小的图像尺寸使得设计师们在设计这些图标时显得很费劲。更加见鬼的是,人们有时候甚至纠结于这单词的发音(我曾听人说fah-vee-con和fave-eye-con,尽管前者更常见)。啊,穿过一切没用的元素,直击主题吧!

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)

好文推荐:

第二弹!那些你不知道的PHOTOSHOP冷知识之乾坤大挪移

高手支招!怎样分辨图片是否被PS过

设计一枚favicon

创建标识是设计的第一步。一个好的favicon应该在本身小得如同表情的情况下捕获网站的本质,并且在非常紧凑的空间里传达你的品牌。Favicon最常见的形式是该公司的商标标志(并非完整的标志与文字合并成的商标)。

新手教程之如何设计Favicon站点图标,PS教程,图老师教程网

(这些网站使用该品牌的标志,或至少接近它)

排除任何文本是一个好主意,毕竟这图标是在太小了。不过也有例外,那就是标志性的标志标记文本。例如,维基百科使用公认的W而Facebook使用其众所周知的「F」。

新手教程之如何设计Favicon站点图标,PS教程,图老师教程网

(这些图标使用与该品牌密切关联的一个字母。在这个例子中,你还会注意到,迪斯尼图标出现失常。这是因为这截图拍摄于视网膜显示屏,他们只使用一个16×16图标大小,而其他网站提供一个32×32大小和更多的细节。)

这些网站图标们实在是太小了导致了每个像素都被计算在内。有时候直接把一个完整的logo缩小下来很容易造成图标变得很模糊。所以,制作这些网站图标时往往都是按照像素级别去设计。

新手教程之如何设计Favicon站点图标,PS教程,图老师教程网

(这是Facebook的logo被整合为32*32像素时的一部分,边缘混淆而模糊,再一次证明像素级别的设计是很有必要的。)

在编辑图标时,我喜欢用位图软件编辑。例如Photoshop或者Pixelmator就可以做出很棒的效果。我通常先调整我的大标志到64×64px,因为这是我需要的最大的图标大小。接着我使用铅笔工具编辑一次,知道像素图标看起来很脆。这是一个非常繁琐的过程,可能需要一两个小时,但它会产生最好的结果。

一旦我把满意的64×64px图标做出来,我会按照原来的方法继续做出32×32, 24×24和 16×16的图标。下面是各尺寸对应的用途:

64×64 –Safari阅读列表和Windows网站图标

24×24 –固定在IE9

32×32 –高DPI或视网膜显示屏往往会用到这个尺寸的图标

16×16 – 在各种浏览器中最常用的尺寸大小

你可能会发现要得到这些小图标,通常通过调整64×64的就可以了,但往往会有更多的地方需要用到像素级别的编辑。记住如果你想调整这些小图标的alpha值也是可以的。几乎所有当下使用的浏览器都支持透明小图标。

保存favicon

我们做完所有尺寸的图标后就可以保存了!在ps中使用存储为web所用格式然后选择png格式。接下来需要转换png为ICO文件。我们把这些图标再次统一放进一张大的png图片里。ICO并不是一个常用的格式,但是我们依然需要它。使用X-Icon编辑器可以很好地转换之。这是一个免费的web在线工具,我们上传自己的图像然后导出合适大小的图标。步骤非常简单,跟着该网上的步骤指示就OK了。

新手教程之如何设计Favicon站点图标,PS教程,图老师教程网

(X-Icon可以让我们很方便地根据网站指示上传png格式的图片然后导出ico格式的图标,尺寸很丰富~)

给网站添加favicon

完成以上步骤后我们就可以把ico文件存到网站根目录下了。现在我们在网站的顶级域名外加上/favicon.ico即可看到该图标。比如http://example.com/favicon.ico。

几乎每一个浏览器都会自动查找网站根目录下的favicon.ico文件然后显示出来,所以不要将它藏在文件夹里面,不然浏览器无法读取。同时,考虑到跨浏览器的兼容性,我们不要给这个图标添加任何链接。

更新favicon

由于某些原因浏览器很喜欢保存网站图标,这很糟糕,因为我们在开发的过程中需要更新图标,每次我们放进一个新的图标浏览器却不会自动把新的覆盖旧的,看起来很不舒服。

此时,我们可以添加一个临时的html指向favicon.ico的位置。此外,我们应该添加一个短而无意义的图标URL查询字符串,如下:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)

这将使浏览器认为这是一个迫切需要完成的任务,我们的新图标就这么被更新了。切记更新完毕后记得立马删掉该语句。那么如果我们需要额外再更新着这图标呢?一样的方法,增加v后面的数值就OK了。这样子这个url永远都是独特有用的,但是要确保每次更新完都记得把这串语句删掉。

制作花样繁杂的网站图标

本文只是粗略地介绍一个网站图标制作并投入使用的流程,但实际设计中我们往往需要制作各式各样的图标。比如ioc触屏图标,windows的metro风格图标,google TV图标等等,所以墙裂建议你查看一下这份favicon审核列表。

新手教程之如何设计Favicon站点图标,PS教程,图老师教程网

(Favico.js允许我们创建动态图标)

你可能需要创建很多可标记的动态图标,标记是为了统计数量,所以很有必要去看这份文件。对了,这文件的跨浏览器支持性不是很好,但是依然很好用。

So~小伙伴们有什么额外的网站图标的知识内容或者疑问都在评论里写出来吧。

展开更多 50%)
分享

猜你喜欢

新手教程之如何设计Favicon站点图标

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
新手教程之如何设计Favicon站点图标

favicon.ico图标提取工具如何使用

设计创意
favicon.ico图标提取工具如何使用

什么是极简主义 如何打造极简风格家居

家居设计 装修设计
什么是极简主义 如何打造极简风格家居

浅谈如何制作完美大气的Favicon图标

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
浅谈如何制作完美大气的Favicon图标

LNMP系列教程之一:添加域名建立站点

服务器
LNMP系列教程之一:添加域名建立站点

2017榻榻米书房设计装修效果图 榻榻米书房设计图片

榻榻米 书房 装修设计 书房设计 平面设计
2017榻榻米书房设计装修效果图 榻榻米书房设计图片

新手化妆教程之眼线的画法

化妆 化妆技巧 简易化妆 新手学化妆 化妆步骤
新手化妆教程之眼线的画法

LLsMP系列教程之二:添加站点建立网站方法

服务器
LLsMP系列教程之二:添加站点建立网站方法

2017春夏女装风衣外套流行趋势

服装设计 平面设计 设计 服装搭配
2017春夏女装风衣外套流行趋势

2025创意海报和贺卡类情人节设计素材

2025创意海报和贺卡类情人节设计素材

15套设计师必备的国外免费PS装饰笔刷

15套设计师必备的国外免费PS装饰笔刷
下拉加载更多内容 ↓