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

前一篇分析了一些用字符来做 favicon 的方法,这是一个捷径。今天我们来看看图形构成的图标,举几个自己做过的例子,抛抛砖吧。(今天在 Gtalk 上被 A叔 问到什么时候更新这第三篇,很受鼓舞:)

右边这是我的 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,传达便捷、快速之意。

最新评论

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

发表您的评论

评论将回复给

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

目前有 36 条评论

    1. 经我试验是这样的,还有那个在 Google 搜索结果里显示 favicon 的Greasemonkey 脚本,都只认 /favicon.ico…

  1. …这个煎蛋做的太可爱…天啊…我都盯着看了一晚上了…哈哈哈….超可爱…受不了了…什么时候我能有这么可爱的ico啊…不想走了….




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