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

killl

如何为博客设计一个出色的 favicon （一）
作者 fisio
07年7月1日
favicon, 图标, 设计
一个简洁美观的 favicon 是网站、博客的面子，在标签浏览器（我们平时用的除了 IE6 之外基本都是）中它可以比 title 更醒目，在不同网页间切换的时候它就是导航标识。favicon 可以是 logo，也可以是 logo 一定程度上的精简，但是在 16x16 像素的画布上创作比画一个不受约束的 logo 要难得多。我们先来看一些著名的 favicon：

以某字母、汉字为主体

以 logo 等简洁图案为主体

Google 的部分服务
这些图标都非常具有代表性，让人看了之后留下深刻的印象。由此我们看出两个通用的 favicon 设计路线：
取首字母，用 logo 配色、图案来修饰它。
比如 Skype 的 S 图案，就是自家完整 logo 的精简。
而汉字有着方块字的先天优势，一个汉字所包含的信息量又远远大于一个字母，我挖网采用类似于 digg 配色的“挖”字，把网站类型、功能都体现在小小的图标里了。
使用一个简洁的图标。
上面的苹果图标简单到只有灰色和白色，但它用 Mac 上常见的色彩搭配勾出了一个清晰的苹果图案。
第三排我专门列出了 Google 系列服务的 favicon，像 Gmail, Calendar, Reader, Groups, 都很好地在图标中表达了一个信息：它是干什么用的。
第二排最后一个是经典桌面资源站的 favicon，看似简单的一个绿色按钮，却有着不错的阴影，在标签栏上的显示效果非常好。


再看一些失败的例子：

meebo 本来是擅长于 UI 设计的，不知道为什么 favicon 这么逊：留白太多，显得单薄。如果使用 meebo rooms 的两个圈圈应该会好一点。另外一个致命的问题是使用了全白背景而不是透明背景，在上面那样不是白色的标签栏上，显出个白框很难看。

如果您对腾讯没有任何了解，能从这个图标中获得什么信息吗？什么都不会有。本来还不错的企鹅轮廓完全无法看清。配色是没有特色的红绿蓝黄。圆形的图标还非要用 256 色，导致边缘出现明显锯齿。

本来我还是很喜欢搜狐以前那个狐狸尾巴的 logo 的，现在这个呢，你说是脚印吧，看不出来是什么脚印，如果有人看成一只羽毛球我绝不奇怪。完全单色，而且同样没有反锯齿，给人的感觉是草草而就，辱没了一家成功门户网站应有的气派。
这个话题落笔之后才发现比想象的大很多，今天就写到这里，以后继续：）

killl

如何为博客设计一个出色的 favicon （二）
作者 fisio
07年7月3日
favicon, 图标, 设计

本篇说说最常见的单字母/汉字构成的 favicon。上面这些除了比较饱满的 W，挖，易，其它都不同程度做了修饰，而圆角方框是最常见的方式。像 M，B，西，是类似阴文印章的风格，好处是比搜狗 S 那样的阳文少一道边框线；而且既可以做成 B 那样端端正正的，也可以像 M 和西那样内外相通。

同样是阴文印章，豆瓣的 favicon 就比西祠差很多了：撑得太满，且字体不合适。豆这个字上下都有分离的横，一不小心就把它们弄丢了。第一眼我真的看成了“一只”。后面几个图标在字体、颜色上也都各有特色，和各自网站风格很搭配。阴文印章是最简单的样式，只需要简单的颜色、字体搭配就可以收到很好的效果。
下面是一个阴文印章的实例，如果用 Photoshop 的话会用到圆角矩形工具 (U)，文字工具 (T)，图层样式，裁切工具 (C)。



还有一种用得比较多的是镂空字体，有点类似于华文彩云，这是另一种让字符饱满起来的办法，很好的例子就是最上面的“挖”。
也给一个镂空文字的实例， 这个做起来更简单，选好字体，在图层样式里描边并视情况更改填充透明度，裁切到 16x16，存为 png，用图标工具存为带 α-channel 的图标就可以了。



OK，说完了两种用字符来画 favicon 的思路，今天就到这里吧，下次有空再说说带图形的。作图过程没有详细讲，如果您没有什么基础的话可以查查资料，有问题可以问我，但是请不要扔给我一句“帮我搞定”……

killl

如何为博客设计一个出色的 favicon （三）
作者 fisio
07年7月5日
favicon, 图标, 设计
前一篇分析了一些用字符来做 favicon 的方法，这是一个捷径。今天我们来看看图形构成的图标，举几个自己做过的例子，抛抛砖吧。（今天在 Gtalk 上被 A叔 问到什么时候更新这第三篇，很受鼓舞：）

右边这是我的 Firefox 搜索框里面的搜索引擎列表，这些搜索有的是从 Mycroft 找的，有的是自己生成的，但是图标乱七八糟很难看，被我统一加工了一下（这也算 favicon 吧，只是别人看不到罢了）。下面把 png 图标单独列出，可另存。

射手网字幕搜索，弓箭图案

迅雷狗狗，画了个简单的箭头

YouTube, 当然是播放按钮啦

Firefox 中文扩展站，一块拼图

丁丁地图，来自 Office 剪贴画







这几个是原 favicon 的再加工



这三个用了相关图标来代替
还有前段时间画给煎蛋的 favicon：主题很明确，就是画一只煎蛋嘛。在 Photoshop 里用三个钢笔轮廓加上样式得到：

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

顺带说说我自己的 favicon: 简单的 f+i 字母组合，在 16x16 下辨识度还可以。后来在其他地方需要用大一点的头像，为了统一就还是用了它，但是在下方重新绘制了域名文字。我的 BSP 优博网刚刚有了自己的 favicon 上传插件，favicon 映射到根目录下，比以前自己添加 header 代码好多了，这样也支持了 IE6 和 Maxthon. 今天终于在 Maxthon 里看到了它：

要自己创作一个图标是件很费精神的事情，有时候我们也要借鉴甚至拿来主义： 这里 和 这里 有很多参考，特别是前者里面都是很不错的设计作品，我就不转过来了，拿几个点评一下：

http://aurea.es/ico/favicon.ico
双色带一点渐变，还有活泼的倾斜角，很有大家之气。网站顶部的导航标签也是这两个颜色，看上去非常舒服。

http://www.evozon.com/images/evozon.ico
一个中心对称的眼睛，来自他家 logo 当中的字母o, 左侧的倾角刚好和前一个字母v 契合，难得的 logo 佳作。

http://www.sumagency.com/favicon.ico
鲜艳的配色总是很吸引眼球，美中不足的是网站首页的美工很一般。

http://www.illustrationclass.com/favicon.ico
看域名就是一个设计网站，一个小巧的铅笔头，传达了足够的含义。首页上还能找到这个图案的多种变化，有兴趣可以去看看。

http://www.ctrip.com/favicon.ico
携程的 favicon 和上面几个不同的是它的背景完全填充，颜色很整洁，图标同样精简自 logo，传达便捷、快速之意。

yzh_nj_china

嘿嘿～～
转的也赞一下～～～

ivan2000i

呵呵，支持一下斑斑。

kingwmj

还有这么多的学问啊，之前没有看到。
我看东东太不仔细 了。
做了几个都比较复杂。