定制书签条目前面的 favicon

Opera Mini 支持 favicon, 但是不少移动网页并没有设定图标，但还是有办法让书签列表（快捷键 # 然后 2）好看些，像右边这样。很简单， m.xianguo.com 没有 favicon, 但是 www.xianguo.com 有，编辑书签将 m 改成 www, 然后按一下 "fetch title and icon..." 取得图标后不要保存，将 www 改回 m, 如果标题改变了也再编辑一下，最后保存。

不从网页中侦测 RSS feed 和电话号码

默认状态下，如果网页 header 中有订阅链接，Opera Mini 将它提出来显示在顶端。实际上 Opera Mini 自带的 RSS 阅读器太过简陋，我想不会有多少人用，毕竟我们有 Google Reader, 鲜果等 更多选择。关闭的办法是从地址栏（快捷键 # 然后 1）中输入 opera:config 到达高级设置页面，将 Show feedindex 关闭。电话号码检测也是个推荐去掉的东西，在这页里面是 Phonenumber detection. 顺便说一下，Fit text to screen 将段落按手机宽度换行，默认开启，可以试试将它关闭，会发现不换行有多难受

小而强大的小书签

小书签 就是一些以 javascript: 开头的书签，比如 中译英，英译中，将任意网页选中部分分享到 Google Reader 等，非常实用。在 Opera Mini 上也可以使用小书签，比如翻译，查看 PageRank, 添加到 Google Reader, 美味书签等，火星人 sfufoet 有 详细介绍，推荐喜欢折腾的朋友细读。

善用搜索引擎

搜索引擎的快捷键是 # 然后 9, 可以对预置搜索引擎进行编辑，或者添加任意网页搜索框作为搜索引擎。我用的是英文版 Opera Mini, 所以我将预置的 Wikipedia 编辑一下，将 en 改为 zh, 就可以方便地搜索中文维基百科了。自己添加搜索的办法是点击网页上的输入框，从菜单中选择 Create Search... 就可以了。推荐将在线词典之类的网站做成搜索引擎。

谷歌生活搜索在手机上的使用

下图是在 Opera Mini 预置的谷歌中分别搜索“七龙珠”和“永华”的结果，如果您这时正在外面和女朋友为不知道电影院排片时间表而犯愁，会不会觉得这个搜索很强大呢 默认显示预设城市当天的排片，且不显示已经来不及的。当然谷歌绝不仅仅只能搜电影，其他的您就自己去发现吧。这些功能并不局限于手机，您在电脑上一样可以访问 www.google.cn/m 搜搜试试。

内置快捷键

Opera Mini 的内置快捷键简单说来就是 # 然后数字访问功能，* 然后数字访问书签里的快速拨号。如果您记不住也没有关系，可以只按 # 或者 *, 两秒之后会弹出列表。2468 是向四个方向滚屏，5 是缩放，1 是页面菜单，比如对一个链接按 1 可以查看链接地址。在 黑莓 上这些按键都不需要加 alt, 这样方便单手操作。

写完了，如果有补充可能会在 Twitter 上，不单独发文了。另外，博客的 FTP 管理我试过了 Transmit 和 Speed Download, 都不满意，不像 FlashFXP 那样可以给 FTP 设定远程和本地书签，如果谁知道好用的 Mac FTP 程序请推荐

www.google.com/s2/favicons?domain_url=http://fis.io/

再也不需要用 php 语句加工网址，http(任意协议名都可以) 开头的一样用，任意尾巴一样用，只需要把评论者网址（比如 $comment_url）代入 domain_url= 之后，然后把这个链接放在一个 <img> 标签内，就可以在网页上输出一个 这样的图标了，实用效果见本博侧栏。

不过前些天这个调用发生了一些变化。以前只需要将链接抹去 "http://", 域名后面即使还跟有东西，都可以返回正确的 favicon, 现在不能跟了，只能是域名部分，连跟个斜杠都不可以。使用方法当然也得更新，以下是新的用法语句，感谢 Shawn 提供：

假设评论者留下的网址在数据库中是 $url, 我们另外定义一个 $domain, 用作输出。先将 $url 转换成 $domain. 其中 $link 是一次代换，如果和原有变量名冲突，可以换个名字：

$link = clean_url(strip_tags($url));
$autArray = explode("/",$link);
$domain = "" . $autArray[2];

现在可以将 $domain 用到 favicon 调用地址里面去了，调用地址示例：

http://www.google.com/s2/favicons?domain=fis.io

输出为 这样的 16x16 png 图像。接下来……想怎么用就怎么用吧

前两天 Shawn 提示我 Google 有一个隐藏的 favicon 缓存服务可以完美解决这个问题，果然非常棒，现在分享给大家。这个缓存调用的地址是：

http://www.google.com/s2/favicons?domain=fis.io

简单吧？这个查询得到的是一个 png 图像，如果没有对应的 favicon, 则缺省是一个地球图标。WordPress 插件 Favicon Images for Comments 是最简单的用法，不过样式反正要自己改，喜欢动手的朋友、非 WordPress 的朋友请看下面的教程。

这个查询要求不能带有 http, 而域名后面无论跟什么都无所谓。所以首先要把评论者网址前的 http 过滤掉，例如 中文 WordPress 工具箱，在显示最新评论的循环语句 foreach ($comments as $comment) 下面添加一个 $domain 定义：

$domain = preg_replace('/^http:///', '', $comment->comment_author_url);

得到的 $domain 就没有前面的 http 了。然后把它用到输出去：

$output .= $before . '<img src="http://www.google.com/s2/favicons?domain=' . $domain . '" class="favicon" /><a href="' . $permalink . '" title="' . $comment_excerpt . '">' . $comment_author . '</a> ' . $comment_excerpt . $after;

这是我的例子，提供一个参考。我发现这样写还是很难看懂……呵呵，就当个参考吧。我把我的侧栏最新评论、本周嘉宾、友情链接都改成了这个显示方式，欢迎参观

最后，希望有博客的朋友都检查一下自己的根目录下是否有 favicon.ico 这个文件，yo2 用户好像也可以通过一个专用插件来上传它。这样您的博客可以在这里得到丰富的展示，happy blogging!

据博友 冰古 的测试，Google 的 favicon 缓存服务并不是直接获取根目录下的 favicon.ico, 而是需要 html header 里面含有：

<link rel="shortcut icon" type="image/x-icon" href="http://fis.io/favicon.ico" />

如果图标不对，一定要检查一下这里。谢谢冰古！

首先搞清楚两个概念：
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 下面的搜索结果效果图：