如何为博客设计一个出色的 favicon （二）
本篇说说最常见的单字母/汉字构成的 favicon。上面这些除了比较饱满的 W，挖，易，其它都不同程度做了修饰，而圆角方框是最常见的方式。像 M，B，西，是类似阴文印章的风格，好处是比搜狗 S 那样的阳文少一道边框线；而且既可以做成 B 那样端端正正的，也可以像 M 和西那样内外相通。
同样是阴文印章，豆瓣的 favicon 就比西祠差很多了：撑得太满，且字体不合适。豆这个字上下都有分离的横，一不小心就把它们弄丢了。第一眼我真的看成了“一只”。后面几个图标在字体、颜色上也都各有特色，和各自网站风格很搭配。阴文印章是最简单的样式，只需要简单的颜色、字体搭配就可以收到很好的效果。
下面是一个阴文印章的实例，如果用 Photoshop 的话会用到圆角矩形工具 (U)，文字工具 (T)，图层样式，裁切工具 (C)。
还有一种用得比较多的是镂空字体，有点类似于华文彩云，这是另一种让字符饱满起来的办法，很好的例子就是最上面的“挖”。
也给一个镂空文字的实例， 这个做起来更简单，选好字体，在图层样式里描边并视情况更改填充透明度，裁切到 16×16，存为 png，用图标工具存为带 α-channel 的图标就可以了。
OK，说完了两种用字符来画 favicon 的思路，今天就到这里吧，下次有空再说说带图形的。作图过程没有详细讲，如果您没有什么基础的话可以查查资料，有问题可以问我，但是请不要扔给我一句“帮我搞定”……
目前有 54 条评论
好早啊….
学到了,什么时候把我的照你说的改改
你也早哦 ：)
加个链接吧。
Done：D
“帮我搞定”是说我吧。。。。
走了，伤自尊了。。。
哈哈 哥们切勿对号入座！
我把背景改了改，阿肥哥帮我看看咋样～
嗯，边缘太锯齿了，有大图吗，我帮你试试？
这句话是我说的 : ( 不过真的太感谢老肥啦!
赞！都不时很难的ps操作啊：）不错：）
94，加工字符还是挺省事的~
好强！我是一点PS都不会呀。。。
contact里面那个小人画出邮箱地址的图是怎么做的？
试试这个： http://tools.fodey.com/generators/animated/ninjatext.asp
你这里不接收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
有 6 篇其他博客的文章引用了本文