如何在你的网站添加透明favicon图标?

favicon是什么?就是网站头像意思,一般网站都会有这样的图标,其意义和LOGO有点相似。 

以前一直想做一个透明的favicon文件,但是做出来的效果和gif一样,要么可以做的精确到像素,要么就做的方方正正,就不能如png图像格式那样显示的效果那么完美。最近看到很多站点做的都很圆润,如同png效果一样,于是便在网上搜索了一些关于制作一个透明ico文件的方法,整体效果非常棒,发出来给大家分享下。

第一步:制作png文件 
favicon的大小规格是16*16像素,至于这个图像根据自己网站的logo来制作就可以了,尽量和网站的主体LOGO保持一致,完成后输出png格式就可以了。 
第二步:转换为透明.ico文件 
下载一款名为Axialis IconWorkshop的软件进行转换,这个软件很强大,这里我们仅用来转换ico格式,演示的我也随便找一个图。当然,如果你的favicon文件原本就是方方正正或精确到像素、背景不是透明的png文件就不需要用到这个软件了,在网上有很多在线转换ico格式的站点。 

 


第三步:上传文件 
此时的favicon的效果如同png那样非常完美,也没有gif那种毛刺和白边。这时将favicon.ico上传到网站(博客)跟目录即可。最后在网页代码与之间添加以下代码即可: 

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

第四步:大工完成 
好了,已经完成。当然还有一些动态的ico效果之类的,因为浏览器的兼容问题,这里就不介绍了。有问题大家可以提出一起交流下。不在乎其它,只为有好东西与大家分享… 

摘自:http://xuweixing.cn/Go/1757.html

加入讨论

电子邮件地址不会被公开。 必填项已用*标注

This blog is kept spam free by WP-SpamFree.