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

一个简洁美观的 favicon 是网站、博客的面子,在标签浏览器(我们平时用的除了 IE6 之外基本都是)中它可以比 title 更醒目,在不同网页间切换的时候它就是导航标识。favicon 可以是 logo,也可以是 logo 一定程度上的精简,但是在 16x16 像素的画布上创作比画一个不受约束的 logo 要难得多。我们先来看一些著名的 favicon:
以某字母、汉字为主体
以 logo 等简洁图案为主体
Google 的部分服务
这些图标都非常具有代表性,让人看了之后留下深刻的印象。由此我们看出两个通用的 favicon 设计路线:

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

再看一些失败的例子:

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

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

本来我还是很喜欢搜狐以前那个狐狸尾巴的 logo 的,现在这个呢,你说是脚印吧,看不出来是什么脚印,如果有人看成一只羽毛球我绝不奇怪。完全单色,而且同样没有反锯齿,给人的感觉是草草而就,辱没了一家成功门户网站应有的气派。

这个话题落笔之后才发现比想象的大很多,今天就写到这里,以后继续:)

最新评论

  • 高午饭 博主现在的社交网络有么,想关注您呢 我为什么爱 Twitter
  • 西贝博客 很好的建议!谢谢分享! 如何为 blog 建立一个高效的标签系统
  • 苹果 老罗露脸了,哈哈,支持他现在的事业 我为什么爱 Twitter
  • 飞之梦 不错,第一次看到这些效果,以后要用一用了。 CSS 文字阴影在网页设计中的应用
  • QQ地带 大牛,pansou也是用的ajax search,为什么他不会被墙呢,因为他调用的地址是ip,不是直接的谷歌域名。请问怎么实现。 打造完美的 ajax 版 Google 自定义搜索

发表您的评论

您的评论将回复给 原评论者

:D:):O8):(8D;DXD:P:nice::rainbow::cafe::love::cake:

目前有 27 条评论

  

来坐沙发,强烈支持一下。
对照着看了一下,发现自己的favicon问题也很多。马上回去改


fisio 回复: 你的文章我也收获很多啊,一起研究:)

剖析的不错,有道理~~

老肥兄牛:)
期待第2篇哦:)

学习.学习

我现在只在注意文章。根本没想这个favicon。

觉得你之前设计的都很棒

有意思
第一次注意到favicon
偶用的都是别人的。。
看来有必要 自己设计一个


fisio 回复: 其实用现成的也不错,只要有特色,呵呵

恩,有些道理,其实早就注意到了~

以前从来都没想过这个问题,又长知识了,太赞了
不过你这么一说我忽然想起来,当时上太平洋电脑的时候就发现那个favicon真是土得掉渣。。。。


fisio 回复: 太平洋那个其实还不错啦,很鲜明嘛,可能从审美上来讲差了点,但是很商业:)

不想学啊。。。
肥兄帮做一个啊。。


fisio 回复: 你那个其实不错,就是需要处理一下背景呢

腾讯那个真不如原来的企鹅好


fisio 回复: 嗯,把外边的一圈拿掉,光用企鹅轮廓,应该会好很多

分析很有道理哦.什么时候帮我的意识流也做个favicon 把~ 呵呵~


fisio 回复: 很容易啊,A就是你的标识,只需要考虑下配色就可以了...

啊呀
我怎么样才能把blog设计成你这样呢


fisio 回复: 你那是ycul,yo2 用的是 WordPress。你可以改投 yo2, 改投 WordPress,哈哈

受益匪浅。

发现我自己设置的favicon有挺多问题的~呵呵


fisio 回复: 嗯,主题有点不明确,不能让人迅速看清画的什么:)

我昨晚在PS里面弄了半天都没画出好看的favicon来,想请你帮忙做一个呢。你看我现在用的自己画的C好丑啊。哎。


fisio 回复: 你那个 favicon 本来我打算在文章里作为好的例子介绍的呢。。。汗

我在想怎么搞才能在IE里也显示,很多网站的Favicon在IE里同样能够显示的.


fisio 回复: 那是因为 IE 只认根目录下的 favicon.ico, 其他路径、文件名就不行了。Firefox, Opera, Safari 都没有这个问题...

完全看不懂啊。。。。sigh~

favicon自己设计了一个,但是不好看,还是用回72松的松树图标还好看点--------

下一篇希望肥哥介绍一下如何在16x16上面制作自己的favicon,要简单易做哈,毕竟自己做出来的东西会很有成就感。

准备先启用download.com的icon,fisio给点意见?


fisio 回复: download.com 的 favicon 挺形象的,有点像那个快车 其实 favicon 真的没什么必须要怎样,只要能给人留下印象(别是坏的)就可以啦

太妙了,不错,告诉朋友去,呵呵

好东西!不顶真是对不起自己啊!!
谢谢博主的精彩介绍!

蛮不错的说,谢谢 老肥兄牛了

好,不错

呵呵。感觉老肥同学的就不错! 👿

写得不错,另外你的favicon也很漂亮。 :nice:


有 3 篇其他博客的文章引用了本文

  1. 08年6月9日Keo博客 » Blog Archive » 博客推荐——老肥博客(UI达人、Firefox达人)
  2. 08年6月15日Keo博客 » Blog Archive » 网站日志——博客图标制作完成
  3. 11年5月29日如何为博客设计一个出色的 favicon « 粽