如何为博客设计一个出色的 favicon (一)
一个简洁美观的 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问题也很多。马上回去改
你的文章我也收获很多啊,一起研究:)
剖析的不错,有道理~~
老肥兄牛:)
期待第2篇哦:)
学习.学习
我现在只在注意文章。根本没想这个favicon。
觉得你之前设计的都很棒
有意思
第一次注意到favicon
偶用的都是别人的。。
看来有必要 自己设计一个
其实用现成的也不错,只要有特色,呵呵
恩,有些道理,其实早就注意到了~
以前从来都没想过这个问题,又长知识了,太赞了
不过你这么一说我忽然想起来,当时上太平洋电脑的时候就发现那个favicon真是土得掉渣。。。。
太平洋那个其实还不错啦,很鲜明嘛,可能从审美上来讲差了点,但是很商业:)
不想学啊。。。
肥兄帮做一个啊。。
你那个其实不错,就是需要处理一下背景呢
腾讯那个真不如原来的企鹅好
嗯,把外边的一圈拿掉,光用企鹅轮廓,应该会好很多
分析很有道理哦.什么时候帮我的意识流也做个favicon 把~ 呵呵~
很容易啊,A就是你的标识,只需要考虑下配色就可以了…
啊呀
我怎么样才能把blog设计成你这样呢
你那是ycul,yo2 用的是 WordPress。你可以改投 yo2, 改投 WordPress,哈哈
受益匪浅。
发现我自己设置的favicon有挺多问题的~呵呵
嗯,主题有点不明确,不能让人迅速看清画的什么:)
我昨晚在PS里面弄了半天都没画出好看的favicon来,想请你帮忙做一个呢。你看我现在用的自己画的C好丑啊。哎。
你那个 favicon 本来我打算在文章里作为好的例子介绍的呢。。。汗
我在想怎么搞才能在IE里也显示,很多网站的Favicon在IE里同样能够显示的.
那是因为 IE 只认根目录下的 favicon.ico, 其他路径、文件名就不行了。Firefox, Opera, Safari 都没有这个问题…
完全看不懂啊。。。。sigh~
favicon自己设计了一个,但是不好看,还是用回72松的松树图标还好看点——–
下一篇希望肥哥介绍一下如何在16×16上面制作自己的favicon,要简单易做哈,毕竟自己做出来的东西会很有成就感。
准备先启用download.com的icon,fisio给点意见?
download.com 的 favicon 挺形象的,有点像那个快车 其实 favicon 真的没什么必须要怎样,只要能给人留下印象(别是坏的)就可以啦
太妙了,不错,告诉朋友去,呵呵
好东西!不顶真是对不起自己啊!!
谢谢博主的精彩介绍!
蛮不错的说,谢谢 老肥兄牛了
好,不错
呵呵。感觉老肥同学的就不错! 👿
写得不错,另外你的favicon也很漂亮。 👍