Favicon地址栏图标

[蜀山劍客]

Favicon，即Favorites Icon的缩写，顾名思义，便是其可以让浏览器的收藏夹中除显示相应的标题外，还以图标的方式区别不同的网站
（来自百度百科）。

您是不是也希望为您的网站加上一个体现您的主页的风格和个性的图标呢？其实要实现这一目的非常简单。

第一步，准备一个图标制作软件。

首先您必须了解所谓的图标（Icon）是一种特殊的图形文件格式，它是以 .ico 作为扩展名。普通的图像设计软件无法使用这种格式，所以您需要到一
个软件下载站点去下载一个图标制作软件。您也可以访问http: //www.favicon.com/，这里提供一个免费的在线“收藏夹”图标生成
器，如果您 E 文够好的话，在这里您还可以了解到更多的关于“收藏夹”图标的知识。

第二步，确定“收藏夹”图标的规格。

“收藏夹”图标有着它特有的规格：图标的大小为 16 * 16（以像素为单位）；所使用的颜色不得超过 16 色。 (为了清晰)

第三步，设计一个属于您自己的图标。

您可以将您的网站的 LOGO 做成一个缩图或者另外设计一个别具特色的图案来作为“收藏夹”图标。总之，它一定要是属于您自己的，并且能很好的代表您
的网站的风格和个性。然后将这个图标文件命名为：favicon.ico。

最后，将这个图标文件（favicon.ico）上传到您的网站所在的服务器的根目录下。

看一些著名的 favicon：
favicons 以某字母、汉字为主体
favicons-2 以 logo 等简洁图案为主体
google-favicons Google 的部分服务
这些图标都非常具有代表性，让人看了之后留下深刻的印象。由此我们看出两个通用的 favicon 设计路线：

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

简单制作favicion的网站

256pixels(http://www.256pixels.com/)
Converticon(http://converticon.com/)
Dynamicdrive(http://tools.dynamicdrive.com/favicon/)
Degraeve(http://www.degraeve.com/favicon/)
Faviconfactory(http://www.faviconfactory.com/)
FavIcon From Pics(http://www.html-kit.com/favicon/)
Antifavicon(http://www.antifavicon.com/)
Favicon.co.uk(http://www.favicon.co.uk/)
Dagondesign(http://www.dagondesign.com/tools/favicon-generator-tool/)
Faviconprime(http://www.faviconprime.com/)
Favicon.jp(http://www.favicon.jp/)
Favicon.cc(http://www.favicon.cc/)
Favicon.ru(http://favicon.ru/en/)
Favicon maker v1(http://shaheeilyas.com/favicon/)
Favicon2dots(http://favicon2dots.com/)
Favicontool(http://www.favicontool.com/)
Faviconsfor.us(http://faviconsfor.us/)
比特虫(http://www.bitbug.net/)

图标搜索站：
http://www.iconfinder.net/

还有一个德国人收集了很多favicon:
http://www.julian-bez.de/icon/

马上行动，让您的网站也拥有一个“收藏夹”图标吧!