favicon.ico制作与使用全攻略
1、Favicon.ico简介
所谓favicon，即Favorites Icon的缩写，顾名思义，便是其可以让浏览器的收藏夹中除显示相应的标题外，还以图标的方式区别不同的网站。当然，这不仅仅是Favicon的全部，根据浏览器的不同，Favicon显示也有所区别：在大多数主流浏览器如FireFox和Internet Explorer (5.5及以上版本)中，favicon不仅在收藏夹中显示，还会同时出现在地址栏上，这时用户可以拖曳favicon到桌面以建立到网站的快捷方式；除此之外，标签式浏览器甚至还有不少扩展的功能，如FireFox甚至支持动画格式的favicon等。
从特定的技术角度看，favicon也并不只是仅仅让网站给人更专业的观感，也可以在一定程度上减轻服务器的流量带宽占用：一般为了提高网站的可用性，我们都会为自己的网站创建一个自定义的404错误文件，在这种情况下，如果网站没有相应的favicon.ico文件，每当有用户收藏网站/网页时， Web服务器都会调用这个自定义的404文件，并在网站的错误日志中记录。这显然是应该予以避免的。
1.1、Favicon.ico简介
所谓favicon，即Favorites Icon的缩写，顾名思义，便是其可以让浏览器的收藏夹中除显示相应的标题外，还以图标的方式区别不同的网站。当然，这不仅仅是Favicon的全部，根据浏览器的不同，Favicon显示也有所区别：在大多数主流浏览器如FireFox和Internet Explorer (5.5及以上版本)中，favicon不仅在收藏夹中显示，还会同时出现在地址栏上，这时用户可以拖曳favicon到桌面以建立到网站的快捷方式；除此之外，标签式浏览器甚至还有不少扩展的功能，如FireFox甚至支持动画格式的favicon等。
从特定的技术角度看，favicon也并不只是仅仅让网站给人更专业的观感，也可以在一定程度上减轻服务器的流量带宽占用：一般为了提高网站的可用性，我们都会为自己的网站创建一个自定义的404错误文件，在这种情况下，如果网站没有相应的favicon.ico文件，每当有用户收藏网站/网页时， Web服务器都会调用这个自定义的404文件，并在网站的错误日志中记录。这显然是应该予以避免的。
2.2、Favicon.ico制作
favicon文件支持 16*16 和 32*32 两种格式。
先利用图形工具创建2个反映网站主题的256色的小图片：1个为32×32像素，另一个为16 ×16像素。然后生成favicon.ico文件。
注意：调色板要选用“Windows 默认调色板”，不然，在最终的效果展示中图形可能会发生迥异于您初衷的颜色上变化。
favicon.ico文件生成还是有些难度的，因为它不是标准的位图文件，需要用专门的favicon编辑器生成。
推荐一款小软件，魔法ICO v2.00.rar，可以让你把一张图片(支持 bmp,jpg,gif,png 等格式)转化成ico的图标文件，有16x16,32x32,48x48,64x64,72x72,96x96和128x128 多种尺寸，还可以提取程序里的图标。
不过我还是喜欢在线favicon服务：简单方便，直接上传图片，在线生成，预览，觉得不错点下载就可以了。
推荐几个在线favicon服务站点：
- http://www.html-kit.com/favicon/功能强大，推荐使用。不仅可在线生成favicon.ico，在线预览，还可以在线生成动画版favicon，并且有很多选项可以设置。
- http://www.bitbug.net/功能简单，只能在线生成favicon.ico，速度很快，操作简单。
- http://www.favicon.cc/功能强大，就是有点太专业了，感觉有点麻烦。
至于在浏览器中使用时16×16像素的图片已经足够，为什么还要准备32×32像素的图片，原因在于，正如上文所言，favicon也显示在地址栏中，用户可以拖曳favicon到桌面以建立到网站的快捷方式，而桌面图标则要以32×32显示的，如果您的Favicon.ico不包括32像素的图片，系统就只能使用默认的浏览器图标来标注网站/ 网页，如Internet Explorer的蓝色“e”，起不到我们意欲通过Favicon.ico打造网站品牌的作用。
3.3、Favicon.ico使用
上传favicon.ico到你的网站，如果希望出现动画效果的还须上传animated_favicon1.gif等相应的gif格式文件。如果是在线生成的，这些文件可以在你下载的压缩包里面找到，你也可以参考一下压缩包里面的ReadMe.txt文件。
然后在你的网页的“<head>”标记与“</head>”标记之间添加如下代码：
<link rel="shortcut icon" href="favicon.ico"> <link rel="icon" type="image/gif" href="animated_favicon1.gif">
注意：最后两句，顺序不要相反咯，要不firefox不会显示出动画图标咯。
