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

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

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

最新评论

  • fisio 可不,Google Reader 都去世十年了… Google Reader 的分享和效率
  • 轻重 天哪!今天整理Evernote,发现这条2010年的剪藏笔记,点击连接,原网站还在!12年了,中文互联网早已面目全非! Google Reader 的分享和效率
  • 小波 重新改博客,看看以前的wp小伙伴的博客,发现绝大部分都关了,没想到你的还在,只是停在11年了 我为什么爱 Twitter
  • 心灵博客 当年有这个效果已经很不错哦 diy 山寨投影家庭影院
  • fisio 可不咋地!您也是老司机了 我为什么爱 Twitter

发表您的评论

评论将回复给

😀🙂😯😁🙁😄😆😝😜👍🌈💖🎂

目前有 38 条评论

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

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

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

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

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

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




还有 3 条 pingbacks 从其它网站引用了本文