飞鱼博客

最近研究了下自己博客的地址栏图标透明效果，我把方法记录下来，希望所有新站长都能喜欢。

首先是给自己的网站添加地址栏图标代码：

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

这段代码一般要放在首页的head标签内，但实际上放到body标签中也行。中间的href="favicon.ico"，为图标保存路径+图标名称。为考虑兼容性，图标应放在网站根目录，图标名应取名【favicon.ico】。如果用其它路径和名字可能会有无法显示的现象。

第二步是制作favicon.ico图标。

favicon.ico图标的规格按图片大小有48x48、32x32、24x24、16x16像素四种规格。

制作思路是首先制作一张大图（比如500x500像素的），然后在通过工具转换到标准的图标格式。

大图的制作可以用自己习惯的图片处理软件，我只会使用Photoshop，用Photoshop处理透明或者半透明效果都很方便，但Photoshop却不支持ico图标文件。不过这没有关系，可先制作一个PNG的图片。然后使用专门工具转换成ICO图标。

第三步，ICO图标转换。

网上有很多ICO图标的在线制作网站，但有好坏之分，很多是不支持透明效果转换的。所以我比较推荐使用专门制作图标的软件－－IconWorkshop。

在IconWorkshop中打开之前做好的PNG文件，然后点击编辑→来自此图像的Windows图标项目

→出现参数设置页面

→这里选择所需要的格式就好，所有格式会被保存在一个ICO文件中，就像Photoshop中的多个图层差不多。

在使用中浏览器会自动调用最合适的规格来显示的。

最后点击“确认”，命名为【favicon.ico】就好。