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


本篇说说最常见的单字母/汉字构成的 favicon。上面这些除了比较饱满的 W,挖,易,其它都不同程度做了修饰,而圆角方框是最常见的方式。像 M,B,西,是类似阴文印章的风格,好处是比搜狗 S 那样的阳文少一道边框线;而且既可以做成 B 那样端端正正的,也可以像 M 和西那样内外相通。


同样是阴文印章,豆瓣的 favicon 就比西祠差很多了:撑得太满,且字体不合适。豆这个字上下都有分离的横,一不小心就把它们弄丢了。第一眼我真的看成了“一只”。后面几个图标在字体、颜色上也都各有特色,和各自网站风格很搭配。阴文印章是最简单的样式,只需要简单的颜色、字体搭配就可以收到很好的效果。

下面是一个阴文印章的实例,如果用 Photoshop 的话会用到圆角矩形工具 (U),文字工具 (T),图层样式,裁切工具 (C)。

还有一种用得比较多的是镂空字体,有点类似于华文彩云,这是另一种让字符饱满起来的办法,很好的例子就是最上面的“”。

也给一个镂空文字的实例, 这个做起来更简单,选好字体,在图层样式里描边并视情况更改填充透明度,裁切到 16×16,存为 png,用图标工具存为带 α-channel 的图标就可以了。

OK,说完了两种用字符来画 favicon 的思路,今天就到这里吧,下次有空再说说带图形的。作图过程没有详细讲,如果您没有什么基础的话可以查查资料,有问题可以问我,但是请不要扔给我一句“帮我搞定”……

最新评论

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

发表您的评论

评论将回复给

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

目前有 54 条评论

好早啊….
学到了,什么时候把我的照你说的改改

你也早哦 :)

加个链接吧。

Done:D

“帮我搞定”是说我吧。。。。
走了,伤自尊了。。。

哈哈 哥们切勿对号入座!

我把背景改了改,阿肥哥帮我看看咋样~

嗯,边缘太锯齿了,有大图吗,我帮你试试?

这句话是我说的 : ( 不过真的太感谢老肥啦!

赞!都不时很难的ps操作啊:)不错:)

94,加工字符还是挺省事的~

好强!我是一点PS都不会呀。。。

contact里面那个小人画出邮箱地址的图是怎么做的?

你这里不接收pingback啊??

真抱歉,yo2 的trackback 坏好久了…

记号。

想问一下favicon做好了之后,怎么加到blog上去。。。

最妥当的是命名为 favicon.ico 放到网站根目录下。指定路径也行,但 IE 里就显示不出来了

来迟了,谢谢肥硕还帮我设计了一个如此漂亮的favicon~感动ing

不客气,我还怕简陋了拿不出手呢:D

好教程,学习之。

我用IE。根本看不到favicon。

地址栏前面,收藏夹,也有的嘛:)

我准备改成红色SB两个大字,也不要扭扭捏捏talk啥的了,2i2j的i,j我已经江郎才尽了,哈哈。还是你搞的好看,我就是瞎搞搞

汗你这俩大字…

“用图标工具存为带 α-channel 的图标就可以了。”是什么工具?我做的的都不透明的

我用的是 Icon Developer, 其实类似的工具非常多。做出来的不透明可能是源图像本来就没有透明背景,或者加工图标的时候出了错,嗯

看了这个,但是我还是不知道怎么设计我的图标,没有艺术细胞我~

恩,不错,期待下一篇~

赞!强烈的赞!

看了我得仔细去弄弄我的favicon,太简陋了~

PS:你说yo2.cn可以上传文件到根目录呢?怎么上传啊?欣喜若狂中~

试过了,也不是根目录,IE 下的问题还是谬解决…其他浏览器可以正常显示的,一直

学习了,觉得自己的松树icon也挺好看的,虽然不是自己弄的,:-)

不错,原来小A的图标是你作的啊

hehe,正是

挺实用的

强人啊,要多来这里学习学习。

哇 传说中的左飞!

呵呵,写的真好

那把图标生成以后怎么让这个图标显示在地址栏前面呢?=^=^=

命名为 favicon.ico 放在网站根目录下

帅哥啊,问下内个冰的字体是什么啊?我找了一堆,没有类似的…郁闷…

我想做一个字的ico,”光”,想用黑底白字,有没有推荐的字体啊? 还有内个”冰”内个ico的做法,能不能详细教俺一下啊.谢谢啦.

非常感谢啊…

好像叫 文鼎pop-4 来着?

哈哈,这个教程不错。
这个兔子套装是你设计的?真不错 :p

不是……很多人问这个问题,呵呵,我把链接加在页尾了 🙂

🙂 不错。学习了。

先锋部落格拜访,顺便留下自己的足迹

就算大图很美好,可要怎样在16×16上搞得光滑 :O


  1. 07年7月5日教你用纯命令行做简单的文字 favicon www.fire3.cn/2007/07/04/howto-use-cmd-to-make-an-text-icon.html
  2. 08年3月2日城堡迷路的挪威 www.kaol.org.cn/?p=276
  3. 08年3月4日电车上的玫瑰花 www.kaol.org.cn/2008/rose-in-the-train/
  4. 08年5月21日可凡网志 » 网站logo和favicon图标及在线工具 cofan.cn/blog/studynote/webdeveloper/logoandfacicon.html
  5. 08年12月27日冒牌的 K2 风格 at catch the digital flow|北极冰仔部落格 hellobmw.com/archives/fake-k2-style.html
  6. 12年1月19日粽 如何为博客设计一个出色的 favicon www.zhouziyang.com/?p=34