首页 > 1 软件使用心得 > 网站添加地址栏前面的自定义透明图标,及IconWorkshop的转换使用

网站添加地址栏前面的自定义透明图标,及IconWorkshop的转换使用

2010年4月1日 AEROFISH 2,490 views 发表评论 阅读评论

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

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

<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】就好。


本文对我无帮助,减1分本文对我有帮助,加1分 (本文对您有帮助吗?)
Loading ... Loading ...

  1. 本文目前尚无任何评论.
  1. 本文目前尚无任何 trackbacks 和 pingbacks.