制作浏览器地址栏与收藏夹里的小图标(favicon.ico)
Sep 22,2006 Farhill of CyberHome

如果您使用的 WEB 浏览器是 IE5 或以上版本(或FireFox),那么当您打开某些网站(如:新浪、百度等)或将其加入到 “收藏夹”后,您就注意到在这些网站标题的旁边还有一个独具个性的图标呢?这就是“收藏夹图标”(Favorites Icon)。

您是不是也希望为您的网站加上一个体现您主页风格和个性的图标呢? 下面我将引导你来完成。

第一步,准备一个图标制作软件或在线制作。

首先您必须了解所谓的图标(Icon)是一种特殊的图形文件格式,它是以 .ico 作为扩展名。普通的图像设计软件无法使用这种格式,所以您需要到一个软件下载站点去下载一个图标制作软件,如Axialis IconWorkshop 软件。您也可以访问提供免费在线图标生成器的网站,这里我做了一个集成。你可以试一试。

选择图片源:
从图标库中选取

这里给出我做的网园(http://www.cyberhome.cn)一个例子,相信对于你多少有些帮助。

CyberHome.cn 图标制作示例

第二步,下载导出图标。

点击Download FavIcon 图标下载到这个压缩文件,解压缩后有一个favicon.ico和extra文件夹,文件夹下有readme.txt说明。

第三步,上传并设置您自己网站的图标。

将您做好的.ico图标命名为:favicon.ico。 这个图标要能很好的代表您网站的风格和个性。然后将这个图标文件(favicon.ico)上传到您的网站所在的服务器的根目录下(如ftp://www.cyberhome.cn/进入的当前目录)。您不需要对您的网页文件作任何的修改,IE,FireFox 会自动搜索到您网站的根目录,只要它一发现了 favicon.ico 这个文件,就会将该图标显示在访问者的地址栏和收藏夹列表中了。 效果如下所示:
CyberHome.cn 网站图标示例

如果您希望为您不同的页面设置不同的收藏夹图标,那么您就需要在该网页文件的 HEAD 部分加入下面的内容:

<linkrel="bookmark" href="favicon.ico">

注意:该图标的路径一定要使用绝对路径。 如 <link type="text/css" rel="bookmark" href="http://www.cyberhome.cn/images/animated_favicon.gif">

如果需要改变图片的尺寸为16*16的,可以将preview_16x16.png文件用FireWork导出,保存为24位图,更改文件的后缀名为.ico即可。


    【打印本稿】  【给我留言】