如何为博客设计一个出色的 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
  • Kaylin Pra quem leva a sério esses argumentos desses links, é melhor nunca mais assistir um filme de Holywood. Todos sabem que Disney era conaorvsder para os padrões de lá. 人脸标签!体验 Picasa 网络相册新功能
  • Justice | | | | | inmidderen film izleme sitesi bedava filmler canlı film seyret binlerce filmler online sinema izletir beleÅŸ filmler filmini full izle ücretsiz sinema izleme sitesi filmini izle direk filmler son çıkan filmler vizyondan sonra full sinema izleme sitesi filmleri tam izle indirmeden bedava filim filmler full ve bedava 非常有创意的献血慈善广告
  • Mikel Congratulations on your spicy new name; and the expansion of your services.As a long time patron of ‘Chef Sazon’, I look forward to Roho Kitchen’s future success. Whether it is cooking classes, food and beverage pairing classes,event catering, or pop- up reratusants— I know that Roho Kitchen will always deliver an amazing culinary experience!. Semih Sayginer的开伦表演
  • Charlotte Gee willekirs, that's such a great post! 超牛的flash忍者游戏: N-Game

发表您的评论

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

: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 « 粽