favicon.ico制作与使用全攻略

作者: Cpder 分类: 杂七杂八 发布时间: 2009-10-06 14:21
本文目录
[隐藏]

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的图标文件,有16×16,32×32,48×48,64×64,72×72,96×96和128×128 多种尺寸,还可以提取程序里的图标。

不过我还是喜欢在线favicon服务:简单方便,直接上传图片,在线生成,预览,觉得不错点下载就可以了。
推荐几个在线favicon服务站点:

 

  1. http://www.html-kit.com/favicon/功能强大,推荐使用。不仅可在线生成favicon.ico,在线预览,还可以在线生成动画版favicon,并且有很多选项可以设置。
  2. http://www.bitbug.net/功能简单,只能在线生成favicon.ico,速度很快,操作简单。
  3. 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不会显示出动画图标咯。

Leave a Reply

Your email address will not be published. Required fields are marked *

Optimized by WPJAM Basic