查看完整版本: 如何为博客设计一个出色的 favicon

如何为博客设计一个出色的 favicon

一个简洁美观的 [url=http://fisio.cn/tag/favicon]favicon[/url]是网站、博客的面子，在标签浏览器（我们平时用的除了 IE6 之外基本都是）中它可以比 title更醒目，在不同网页间切换的时候它就是导航标识。favicon 可以是 logo，也可以是 logo 一定程度上的精简，但是在 16×16像素的画布上创作比画一个不受约束的 logo 要难得多。我们先来看一些著名的 favicon：

[img]http://image.cache.yo2blog.com/wp-content/uploads/33/3346/2007/07/favicons.png[/img] 以某字母、汉字为主体
[img]http://image.cache.yo2blog.com/wp-content/uploads/33/3346/2007/07/favicons-2.png[/img] 以 logo 等简洁图案为主体
[img]http://image.cache.yo2blog.com/wp-content/uploads/33/3346/2007/07/google-favicons.png[/img] Google 的部分服务这些图标都非常具有代表性，让人看了之后留下深刻的印象。

由此我们看出两个通用的 favicon 设计路线：

[list=1][*][b]取首字母，用 logo 配色、图案来修饰它。[/b]比如 [url=http://www.skype.com/]Skype[/url] 的 S 图案，就是[url=http://c.skype.com/i/logos/skype_logo.png]自家完整 logo[/url] 的精简。而汉字有着方块字的先天优势，一个汉字所包含的信息量又远远大于一个字母，[url=http://www.5dig.net/]我挖网[/url]采用类似于 [url=http://digg.com/]digg[/url] 配色的“挖”字，把网站类型、功能都体现在小小的图标里了。[*][b]使用一个简洁的图标。[/b]上面的苹果图标简单到只有灰色和白色，但它用 Mac 上常见的色彩搭配勾出了一个清晰的苹果图案。第三排我专门列出了 Google 系列服务的 favicon，像 Gmail, Calendar, Reader, Groups, 都很好地在图标中表达了一个信息：它是干什么用的。第二排最后一个是[url=http://www.mydeskcity.com/]经典桌面资源站[/url]的 favicon，看似简单的一个绿色按钮，却有着不错的阴影，在标签栏上的显示效果非常好。[img]http://image.cache.yo2blog.com/wp-content/uploads/33/3346/2007/07/mydeskcity.png[/img][/list]
再看一些失败的例子：

[img]http://image.cache.yo2blog.com/wp-content/uploads/33/3346/2007/07/meebo.png[/img] [url=http://www.meebo.com/]meebo[/url] 本来是擅长于 UI 设计的，不知道为什么 favicon 这么逊：留白太多，显得单薄。如果使用 [url=http://wwwm.meebo.com/rooms/]meebo rooms 的两个圈圈[/url]应该会好一点。另外一个致命的问题是使用了全白背景而不是透明背景，在上面那样不是白色的标签栏上，显出个白框很难看。

[img]http://image.cache.yo2blog.com/wp-content/uploads/33/3346/2007/07/qq.png[/img] 如果您对[url=http://www.qq.com/]腾讯[/url]没有任何了解，能从这个图标中获得什么信息吗？什么都不会有。本来还不错的企鹅轮廓完全无法看清。配色是没有特色的红绿蓝黄。圆形的图标还非要用 256 色，导致边缘出现明显锯齿。

[img]http://image.cache.yo2blog.com/wp-content/uploads/33/3346/2007/07/sohu.gif[/img] 本来我还是很喜欢[url=http://www.sohu.com/]搜狐[/url]以前那个狐狸尾巴的 logo 的，现在这个呢，你说是脚印吧，看不出来是什么脚印，如果有人看成一只羽毛球我绝不奇怪。完全单色，而且同样没有反锯齿，给人的感觉是草草而就，辱没了一家成功门户网站应有的气派。

[img]http://image.cache.yo2blog.com/wp-content/uploads/33/3346/2007/07/favicons.png[/img]
说说最常见的单字母/汉字构成的 favicon。上面这些除了比较饱满的 W，挖，易，其它都不同程度做了修饰，而圆角方框是最常见的方式。像M，B，西，是类似阴文印章的风格，好处是比搜狗 S 那样的阳文少一道边框线；而且既可以做成 B 那样端端正正的，也可以像 M 和西那样内外相通。

[img]http://image.cache.yo2blog.com/wp-content/uploads/33/3346/2007/07/favicons-stamp.png[/img]
同样是阴文印章，豆瓣的 favicon就比西祠差很多了：撑得太满，且字体不合适。豆这个字上下都有分离的横，一不小心就把它们弄丢了。第一眼我真的看成了“一只”。后面几个图标在字体、颜色上也都各有特色，和各自网站风格很搭配。阴文印章是最简单的样式，只需要简单的颜色、字体搭配就可以收到很好的效果。

下面是一个阴文印章的实例，如果用 Photoshop 的话会用到圆角矩形工具 (U)，文字工具 (T)，图层样式，裁切工具 (C)。
[url=http://upload.cache.yo2blog.com/wp-content/uploads/33/3346/2007/07/hellobmw-favicon.ico][img]http://image.cache.yo2blog.com/wp-content/uploads/33/3346/2007/07/hellobmw-favicon.png[/img][/url]

还有一种用得比较多的是镂空字体，有点类似于华文彩云，这是另一种让字符饱满起来的办法，很好的例子就是最上面的“[url=http://www.5dig.net/]挖[/url]”。
也给一个镂空文字的实例， 这个做起来更简单，选好字体，在图层样式里描边并视情况更改填充透明度，裁切到 16×16，存为 png，用图标工具存为带 α-channel 的图标就可以了。[url=http://upload.cache.yo2blog.com/wp-content/uploads/33/3346/2007/07/athere-favicon.ico][img]http://image.cache.yo2blog.com/wp-content/uploads/33/3346/2007/07/athere-favicon.png[/img][/url]

分析了一些用字符来做 favicon 的方法，这是一个捷径。我们来看看图形构成的图标，举几个自己做过的例子，抛抛砖吧。（今天在 Gtalk 上被 [url=http://www.athere.net/]A叔[/url] 问到什么时候更新这第三篇，很受鼓舞：）
[img]http://image.cache.yo2blog.com/wp-content/uploads/33/3346/2007/07/searchbar.gif[/img]
上边这是我的 Firefox 搜索框里面的[url=http://upload.cache.yo2blog.com/wp-content/uploads/33/3346/2007/07/searchplugins.zip]搜索引擎列表[/url]，这些搜索有的是从 [url=http://mycroft.mozdev.org/download.html]Mycroft[/url] 找的，有的是自己生成的，但是图标乱七八糟很难看，被我统一加工了一下（这也算 favicon 吧，只是别人看不到罢了）。下面把 png 图标单独列出，可另存。

[img]http://image.cache.yo2blog.com/wp-content/uploads/33/3346/2007/07/shooter.png[/img] [url=http://www.shooter.cn/]射手网[/url]字幕搜索，弓箭图案
[img]http://image.cache.yo2blog.com/wp-content/uploads/33/3346/2007/07/xunlei.png[/img] [url=http://www.gougou.com/]迅雷狗狗[/url]，画了个简单的箭头
[img]http://image.cache.yo2blog.com/wp-content/uploads/33/3346/2007/07/youtube.png[/img] [url=http://www.youtube.com/]YouTube[/url], 当然是播放按钮啦
[img]http://image.cache.yo2blog.com/wp-content/uploads/33/3346/2007/07/mozine.png[/img] [url=http://addons.mozine.cn/]Firefox 中文扩展站[/url]，一块拼图
[img]http://image.cache.yo2blog.com/wp-content/uploads/33/3346/2007/07/ddmap.png[/img] [url=http://www.ddmap.com/]丁丁地图[/url]，来自 Office 剪贴画

[img]http://image.cache.yo2blog.com/wp-content/uploads/33/3346/2007/07/google.png[/img][img]http://image.cache.yo2blog.com/wp-content/uploads/33/3346/2007/07/wiki.png[/img][img]http://image.cache.yo2blog.com/wp-content/uploads/33/3346/2007/07/baidu.png[/img][img]http://image.cache.yo2blog.com/wp-content/uploads/33/3346/2007/07/deviantart.png[/img][img]http://image.cache.yo2blog.com/wp-content/uploads/33/3346/2007/07/dictcn.png[/img][img]http://image.cache.yo2blog.com/wp-content/uploads/33/3346/2007/07/pconline.png[/img][img]http://image.cache.yo2blog.com/wp-content/uploads/33/3346/2007/07/verycd.png[/img] 这几个是原 favicon 的再加工
[img]http://image.cache.yo2blog.com/wp-content/uploads/33/3346/2007/07/emule.png[/img][img]http://image.cache.yo2blog.com/wp-content/uploads/33/3346/2007/07/mozilla.png[/img][img]http://image.cache.yo2blog.com/wp-content/uploads/33/3346/2007/07/userscripts.png[/img] 这三个用了相关图标来代替

还有前段时间[url=http://fisio.cn/jandan-favicon.html]画给煎蛋的 favicon[/url]：主题很明确，就是画一只煎蛋嘛。在 Photoshop 里用三个钢笔轮廓加上样式得到：
[img]http://image.cache.yo2blog.com/wp-content/uploads/33/3346/2007/07/jandan-ps.png[/img]

一开始我把蛋白边缘画太淡了，缩到 16×16 之后根本看不清，只好重新煎得焦一点。总之要调整很多次，满意为止：）下面能看到它在蓝色和灰色的背景下都有不错的效果：

[img]http://image.cache.yo2blog.com/wp-content/uploads/33/3346/2007/07/jandan-favicon.png[/img]

顺带说说[url=http://fisio.cn/favicon.ico]我自己的 favicon[/url]: 简单的 f+i 字母组合，在 16×16 下辨识度还可以。后来在其他地方需要用大一点的头像，为了统一就还是用了它，但是在下方重新绘制了域名文字。我的 BSP [url=http://yo2.cn/]优博网[/url]刚刚有了自己的 [url=http://develop.yo2.cn/articles/%e5%8a%a0%e5%85%a5-yo2favicon-%e6%8f%92%e4%bb%b6.html]favicon 上传插件[/url]，favicon 映射到根目录下，比以前自己添加 header 代码好多了，这样也支持了 IE6 和 Maxthon. 今天终于在 Maxthon 里看到了它：

[img]http://image.cache.yo2blog.com/wp-content/uploads/33/3346/2007/07/favicon-maxthon.png[/img]

要自己创作一个图标是件很费精神的事情，有时候我们也要借鉴甚至拿来主义： [url=http://www.blueidea.com/download/product/2007/4490.asp]这里[/url] 和 [url=http://www.julian-bez.de/icon/index.php?id=1611]这里[/url] 有很多参考，特别是前者里面都是很不错的设计作品，我就不转过来了，拿几个点评一下：

[img]http://image.cache.yo2blog.com/wp-content/uploads/33/3346/2007/07/01.gif[/img]双色带一点渐变，还有活泼的倾斜角，很有大家之气。网站顶部的导航标签也是这两个颜色，看上去非常舒服。
[img]http://image.cache.yo2blog.com/wp-content/uploads/33/3346/2007/07/02.gif[/img]一个中心对称的眼睛，来自他家 logo 当中的字母o, 左侧的倾角刚好和前一个字母v 契合，难得的 logo 佳作。
[img]http://image.cache.yo2blog.com/wp-content/uploads/33/3346/2007/07/03.gif[/img]鲜艳的配色总是很吸引眼球，美中不足的是网站首页的美工很一般。
[img]http://image.cache.yo2blog.com/wp-content/uploads/33/3346/2007/07/04.gif[/img]看域名就是一个设计网站，一个小巧的铅笔头，传达了足够的含义。首页上还能找到这个图案的多种变化，有兴趣可以去看看。
[img]http://image.cache.yo2blog.com/wp-content/uploads/33/3346/2007/07/05.gif[/img]携程的 favicon 和上面几个不同的是它的背景完全填充，颜色很整洁，图标同样精简自 logo，传达便捷、快速之意。

首先搞清楚两个概念：

256 色：图像中最多含有 256 种颜色，且只有 1 位透明通道，换句话说，一个像素只有透明和不透明两种状态。常见的例子是 GIF 和 PNG-8。
带 α-channel (8位透明通道) 的真彩色：除了颜色数的提升外，最重要的是引入了半透明，一个像素可以有 8位(2^8=256)透明状态。常见的例子是 PNG-24。

一个图标文件(.ico) 可以含有多种尺寸和格式的搭配，用来适配各种显示需求。以 [url=http://desktop.google.com/favicon.ico]Google Desktop 的 favicon[/url] 为例，用 [url=http://dlc2.pconline.com.cn/list.jsp?chnid=116]图标工具[/url] 打开它可以看到这两种格式都有：

[img]http://image.cache.yo2blog.com/wp-content/uploads/33/3346/2007/07/alpha-channel.gif[/img]


右边 PNG 图标里的像素有很多种透明状态，它可以更好地抗锯齿，更好地适配不同颜色的背景，而左边的 GIF 格式无法兼顾这两方面：


[img]http://image.cache.yo2blog.com/wp-content/uploads/33/3346/2007/07/anti-aliasing.png[/img]

PNG 相对 GIF 来讲没有弱点，为什么他们会并存？因为很久以前 8 位透明并不被广泛支持，现在不同了，制作图标完全没有必要再带上 256 色 GIF。特别是上图那样带有曲线边缘的图标。
了解了格式，再来看看要点：

[list][*]作图的时候要在大一点的画布上画，写字也是。满意了再缩小到 16×16，或者交给 [url=http://dlc2.pconline.com.cn/list.jsp?chnid=116]图标工具[/url] 去缩小。[*]缩放的时候[url=http://www.bonesblog.net/blog/?p=15]要用重新计算像素的方式，不要用邻近像素的方式[/url]。[*]为了图标文件不至于太大，可以只含有 16×16, 8 位透明真彩色 这一种格式。32×32 或者更高的尺寸在建立 .url 快捷方式图标时会用到，根据情况可以添加。

OK，看到这里想必您已经对 favicon 的制作相当了解了。PS 一下，前些天看到[url=http://geliblog.cn/]个篱[/url]的 Gtalk 状态信息显示“我在听什么歌”，问了一下才知道，[url=http://www.google.com/trends/music]Google Music Trends[/url] 就是靠它实现的，去访问了一下这个音乐趋势，发现[url=http://www.google.com/trends/music/resources/3492087938-favicon.ico]它的 favicon[/url] 也很别致，呵呵。[/list][url=http://www.google.com/trends/music][img]http://image.cache.yo2blog.com/wp-content/uploads/33/3346/2007/07/music-trends.png[/img][/url]

转帖出自[url=http://fisio.cn/favicon-design-episode-1.html]肥硕博客[/url] 作者 [url=http://fisio.cn/]fisio[/url]

[[i] 本帖最后由 q-_-p 于 2008-1-14 10:41 编辑 [/i]]

先占个沙发~~
文章写的很细，作者真是能说~呵呵，文章很能说明问题。
小图标不只是一两个GUI设计师所困惑的，而是一个公共的话题。也经常有朋友问我这个问题，我觉得这篇文章基本能说明问题。大家好好看看。

看了这篇文章绝对受益匪浅
另外想了解制作icon的时候 ，透明层，ps通道等的相关内容;P

很好 很强大！

嗯 很强 学习了
我一直喜欢的博客服务商blogbus最近也更换了[b][color=#006699]favicon[/color][/b]
[color=black]贴上来看看[/color]

回复 5# 的帖子

blogbus这个新的图标看起来大气。很不错。越来越走品牌了~

很不错的文章，赞个:victory:

受益匪浅阿，收下了。

多谢楼主！！！

是啊真的受益匪浅，我很喜欢，收藏了:kiss:

很收益，看了之后，发现自己网站的favicon 也该调整下了，哈哈