整理文章分类，基于 Silk Icons 为每个分类加上图标：

并且在 Denis 的帮助下实现了侧栏“最新文章”“随机文章”前显示文章所属分类图标。加上之前的 评论者 favicon, 已经有点小华丽喽

翻页按钮的样式

赶潮流学习了下 CSS 圆角，于是将 Pagebar 翻页按钮样式化成这个样子：

圆角样式仅支持 Firefox, Chrome, Safari, 其它浏览器下仍是方角。有兴趣可以查看我的 style.css 另外 CSS 圆角也运用到了评论输入框、鼠标放到图片链接上的样式 等地方，就不细说了，推荐阅读 sofish 的教程。

左上角的加载标签

在页面加载的时候显示一个友好的提示，尽量挽留一下急性子的访问者吧。实现方法请参阅 aw 和 Shawn 的文章。

标签云链接的鼠标悬停颜色

Simple Tags 生成的标签云可以按文章多少自动分配链接的颜色，但是鼠标放到链接上就不再改变颜色了。试试看本文右边的“热门标签”，像普通链接一样有 hover 样式，代码如下：

.st-tag-cloud a:hover {
color: #E58802 !important;
}

eMule 的工具栏图标可以直接调用 448x32 的 png 图像，只需要在工具栏右键菜单里选择一个本地图片就可以了，效果如上。下面是几个可以用的工具栏皮肤，可直接保存下来使用，更多可访问 eMule Skin Database.

Update: 由于上传 wp, 文件名被过滤的原因，另存图片之后需要把文件名改成 xxx.emuletoolbar.kad02.png 的样子，即是在 emuletoolbar 前后各加一个点。谢谢 某果 提醒！

在 Firefox 的安装路径如下目录放置一个图标文件 main-window.ico 然后重启 Firefox，就这么简单。这个路径的典型位置是：

%ProgramFiles%\Mozilla\Firefox\chrome\
iconsdefault\main-window.ico

如果没有这个目录那么自己新建就是了。但是这只会改变主窗口的图标，如果打开书签窗口什么的还会是默认图标。那么类似地，在这个目录下继续放置：

bookmark-window.ico
deviceManager.ico
downloadManager.ico
extensionsManager.ico
help.ico
jsconsoleWindow.ico
loadDevice.ico
metadata.ico

可以改变相应窗口的图标，按需添加。

然后说武的：参考主程序 firefox.exe 内置图标的尺寸和格式找到或者做好图标，用 Resource Hacker or eXeScope 打开 exe 替换之。提供一个用题图做成的图标 下载，格式和 firefox.exe icon:0 相符，可用于直接替换。该图标版权属于 Everaldo.

首先搞清楚两个概念：
256 色：图像中最多含有 256 种颜色，且只有 1 位透明通道，换句话说，一个像素只有透明和不透明两种状态。常见的例子是 GIF 和 PNG-8。
带 α-channel (8位透明通道) 的真彩色：除了颜色数的提升外，最重要的是引入了半透明，一个像素可以有 8位(2^8=256)透明状态。常见的例子是 PNG-24。

一个图标文件(.ico) 可以含有多种尺寸和格式的搭配，用来适配各种显示需求。以 Google Desktop 的 favicon 为例，用 图标工具 打开它可以看到这两种格式都有：

右边 PNG 图标里的像素有很多种透明状态，它可以更好地抗锯齿，更好地适配不同颜色的背景，而左边的 GIF 格式无法兼顾这两方面：

PNG 相对 GIF 来讲没有弱点，为什么他们会并存？因为很久以前 8 位透明并不被广泛支持，现在不同了，制作图标完全没有必要再带上 256 色 GIF。特别是上图那样带有曲线边缘的图标。

了解了格式，再来看看要点：

• 作图的时候要在大一点的画布上画，写字也是。满意了再缩小到 16x16，或者交给 图标工具 去缩小。
• 缩放的时候要用重新计算像素的方式，不要用邻近像素的方式。
• 为了图标文件不至于太大，可以只含有 16x16, 8 位透明真彩色 这一种格式。32x32 或者更高的尺寸在建立 .url 快捷方式图标时会用到，根据情况可以添加。

OK，看到这里想必您已经对 favicon 的制作相当了解了。PS 一下，前些天看到个篱的 Gtalk 状态信息显示“我在听什么歌”，问了一下才知道，Google Music Trends 就是靠它实现的，去访问了一下这个音乐趋势，发现它的 favicon 也很别致，呵呵。

再 PS，我宣布收回在第二篇里说过的“请不要扔给我一句：帮我搞定”，好像伤害到了某些朋友的感情 我当初只是怕请求太多没法一一帮助。看完我的教程还是不太明白的朋友尽管留言，我一定尽力帮忙！

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

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

	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，传达便捷、快速之意。

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

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

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

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

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

1. 取首字母，用 logo 配色、图案来修饰它。
   比如 Skype 的 S 图案，就是自家完整 logo 的精简。
   而汉字有着方块字的先天优势，一个汉字所包含的信息量又远远大于一个字母，我挖网采用类似于 digg 配色的“挖”字，把网站类型、功能都体现在小小的图标里了。
2. 使用一个简洁的图标。
   上面的苹果图标简单到只有灰色和白色，但它用 Mac 上常见的色彩搭配勾出了一个清晰的苹果图案。
   第三排我专门列出了 Google 系列服务的 favicon，像 Gmail, Calendar, Reader, Groups, 都很好地在图标中表达了一个信息：它是干什么用的。
   第二排最后一个是经典桌面资源站的 favicon，看似简单的一个绿色按钮，却有着不错的阴影，在标签栏上的显示效果非常好。
   

再看一些失败的例子：

meebo 本来是擅长于 UI 设计的，不知道为什么 favicon 这么逊：留白太多，显得单薄。如果使用 meebo rooms 的两个圈圈应该会好一点。另外一个致命的问题是使用了全白背景而不是透明背景，在上面那样不是白色的标签栏上，显出个白框很难看。

如果您对腾讯没有任何了解，能从这个图标中获得什么信息吗？什么都不会有。本来还不错的企鹅轮廓完全无法看清。配色是没有特色的红绿蓝黄。圆形的图标还非要用 256 色，导致边缘出现明显锯齿。

本来我还是很喜欢搜狐以前那个狐狸尾巴的 logo 的，现在这个呢，你说是脚印吧，看不出来是什么脚印，如果有人看成一只羽毛球我绝不奇怪。完全单色，而且同样没有反锯齿，给人的感觉是草草而就，辱没了一家成功门户网站应有的气派。

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

煎蛋与 digg 同步，网罗新鲜有趣的国外资讯

我要订阅煎蛋！

下面是浏览器里面的效果图，以及 Greasemonkey 插件: Google Icons 下面的搜索结果效果图：

40张 3200x1200 (-_-!) 的经典游戏墙纸，值得收藏。
From mydeskcity.com 专辑一 专辑二

何不自己动手diy呢？在下面的例子中可以看到，并不需要很多的工序，你只需要找到合适的大类图标，比如视频图标，音频图标，再加上后缀名称作识别，效果也会非常好，而且直观易于识别。OK，现在我有一个空白的文件图标和一个音符图标（透明背景的png格式），如何来制作一个mp3文件图标：

在Photoshop中打开png图像，把它们按照你喜欢的布局组合到一起。然后用文字工具在合适的位置添加文字，mp3, ogg, wma, 随便什么啦，调整满意之后另存为png图像，也可以把Photoshop文档存下以备今后使用。

最后用图标工具（比如 Stardock IconDeveloper ）把 png 转成 ico：不必输出太高的分辨率，一般WinXP系统图标最多64x64，所以输出五种分辨率，16x16, 24x24, 32x32, 48x48, 64x64, 一定要带alpha透明通道，比较低的色彩格式比如256色什么的没有必要带上。
要注意改变图像大小的时候的像素重组方式，千万不要用邻近像素的方式。可以多试试，选择合适的。

如果你 Photoshop 这些都很熟练的话做起来会非常快。在本文开始的地方我提供了一个我做过的东西的预览图，如果有朋友需要的话可以放出 psd 模板下载，或者我做过的 png/ico 下载。

注：部分素材来自苹果操作系统 Mac OS X Tiger.