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

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

右边这是我的 Firefox 搜索框里面的搜索引擎列表,这些搜索有的是从 Mycroft 找的,有的是自己生成的,但是图标乱七八糟很难看,被我统一加工了一下(这也算 favicon 吧,只是别人看不到罢了)。下面把 png 图标单独列出,可另存。

射手网字幕搜索,弓箭图案
迅雷狗狗,画了个简单的箭头
YouTube, 当然是播放按钮啦
Firefox 中文扩展站,一块拼图
丁丁地图,来自 Office 剪贴画
这几个是原 favicon 的再加工
这三个用了相关图标来代替


还有前段时间画给煎蛋的 favicon:主题很明确,就是画一只煎蛋嘛。在 Photoshop 里用三个钢笔轮廓加上样式得到:


一开始我把蛋白边缘画太淡了,缩到 16x16 之后根本看不清,只好重新煎得焦一点。总之要调整很多次,满意为止:)下面能看到它在蓝色和灰色的背景下都有不错的效果:


顺带说说我自己的 favicon: 简单的 f+i 字母组合,在 16x16 下辨识度还可以。后来在其他地方需要用大一点的头像,为了统一就还是用了它,但是在下方重新绘制了域名文字。我的 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,传达便捷、快速之意。

最新评论

  • 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
  • Doc And I was just wonrdeing about that too! 我在使用的 Android 应用程序(三)

发表您的评论

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

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

目前有 22 条评论

  

我不会画我不会画,你帮我画吧:)


fisio 回复: 看来我大篇大篇的都废话了...

咔咔,正是因为16x16的favicon,把我这个非专业logo设计者扼杀在摇篮里了。:)


fisio 回复: 呵呵,大家都是业余选手啊

不放在根目录 IE6 不能看到么。。。汗。。


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

8错8错, 我来继续学习了. 我那天画出来一个可惜...发现有人用了...哎, 创意不行啊.


fisio 回复: 哎,除了 C 和 冰,还有哪个?

我说下午在用的favicon怎么有点眼熟的,原来是firefox官网的……


fisio 回复: 不是 Mozilla 的红色恐龙么? ps: 你现在这个不错!

继续收藏啊。。。还有谢谢帮我处理的那个favicon

什么时候写(四)啊?


fisio 回复: 举手之劳不客气啦:) 四不会等多久的,周末吧~

同时推荐一个在线制作favicon的网站
http://www.favicon.cc/


fisio 回复: hehe,不错的,自己画像素。可惜不能画 α-channel

看来本人要恶补ps技术了~


fisio 回复: A叔您来晚啦

这个煎蛋实在是太可爱了,好想一口吃了他。

你自己的那个域名和上面的图片有点挤的感觉~


fisio 回复: 你说那个下面带一排文字的?故意做成那样的契合状啊,hiahia

收入delicious..

我自己设计了一个,以我的姓氏为主题,很简单
http://sego.yo2.cn/
大家看看还行不?


fisio 回复: 嗯,圆圈可以拿掉,把字写大一点:D

有一个问题,为什么favicon显示锯齿呢?

我的就是因为有锯齿,把它删掉了


fisio 回复: 这正是(四)要讲的话题,咳咳

唉, 我要logo呀.

长知识了,有没有更傻瓜一点的方法?


fisio 回复: 请看第二篇:)

不知能否出手做个荒字?


fisio 回复: mail 给你了:)

写的真不错,最近也正准备加个favicon,学习中。。。

射手网的那个弓箭不错,原来那个红色圈圈加个射字丑的要死


fisio 回复: nod...

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

支持一下,的确设计的不错

我也弄个去~


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

  1. 12年1月25日粽说纷纭 如何为博客设计一个出色的 favicon