如何设计一个漂亮的favicon

最新推荐文章于 2023-06-11 22:30:42 发布

weixin_34019929

最新推荐文章于 2023-06-11 22:30:42 发布

阅读量194

点赞数

文章标签： photoshop ui

一个简洁美观的favicon是网站、博客的面子，在标签浏览器（我们平时用的除了 IE6 之外基本都是）中它可以比 title 更醒目，在不同网页间切换的时候它就是导航标识。favicon 可以是 logo，也可以是 logo 一定程度上的精简，但是在 16×16 像素的画布上创作比画一个不受约束的 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 的，现在这个呢，你说是脚印吧，看不出来是什么脚印，如果有人看成一只羽毛球我绝不奇怪。完全单色，而且同样没有反锯齿，给人的感觉是草草而就，辱没了一家成功门户网站应有的气派。

二、

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

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

下面是一个阴文印章的实例，如果用 Photoshop 的话会用到圆角矩形工具 (U)，文字工具 (T)，图层样式，裁切工具 (C)。

还有一种用得比较多的是镂空字体，有点类似于华文彩云，这是另一种让字符饱满起来的办法，很好的例子就是最上面的“挖”。

也给一个镂空文字的实例，这个做起来更简单，选好字体，在图层样式里描边并视情况更改填充透明度，裁切到 16×16，存为 png，用图标工具存为带 α-channel 的图标就可以了。

三、

用字符来做 favicon 的方法，这是一个捷径。今天我们来看看图形构成的图标，举几个自己做过的例子，抛抛砖吧。

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

射手网字幕搜索，弓箭图案
迅雷狗狗，画了个简单的箭头
YouTube, 当然是播放按钮啦
Firefox 中文扩展站，一块拼图
丁丁地图，来自 Office 剪贴画
这几个是原 favicon 的再加工
这三个用了相关图标来代替

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

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

顺带说说我自己的 favicon: 简单的 f+i 字母组合，在 16×16 下辨识度还可以。后来在其他地方需要用大一点的头像，为了统一就还是用了它，但是在下方重新绘制了域名文字。我的 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，传达便捷、快速之意。

四、

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

一个图标文件(.ico) 可以含有多种尺寸和格式的搭配，用来适配各种显示需求。以Google Desktop 的 favicon 为例，用图标工具打开它可以看到这两种格式都有：

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

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

了解了格式，再来看看要点：

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