favicon是什么?就是网站头像意思,一般网站都会有这样的图标,其意义和Logo有点相似.
以前一直想做一个透明的favicon文件,但是做出来的效果和gif一样,要么可以做的精确到像素,要么就做的方方正正,就不能如png图像格式那样显示的效果那么完美.
最近看到很多站点做的都很圆润,如同png效果一样,于是便在网上搜索了一些关于制作一个透明ico文件的方法,整体效果非常棒.
第一步:制作png文件
favicon的大小规格是16*16像素,至于这个图像根据自己网站的logo来制作就可以了,尽量和网站的主体LOGO保持一致,完成后输出png格式就可以了。
第二步:转换为透明.ico文件
下载一款名为Axialis IconWorkshop的软件进行转换,这个软件很强大,这里我们仅用来转换ico格式.当然,如果你的favicon文件原本就是方方正正或精确到像素、背景不是透明的png文件就不需要用到这个软件了,在网上有很多在线转换ico格式的站点.
1.打开刚才制作的PNG
2.点击左上角的按钮
3.选择第一行的48*48,其他默认即可
4.保存为favicon.ico
第三步:上传文件
此时的favicon的效果如同png那样非常完美,也没有gif那种毛刺和白边.这时将favicon.ico上传到博客跟目录即可.最后在网页代码与之间添加以下代码即可
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
第四步:大工完成
好了,已经完成.当然还有一些动态的ico效果之类的,因为浏览器的兼容问题,这里就不介绍了.
效果图
