为博客添加透明favicon图标

异泪 Post in 技术,Tags: , ,
0

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效果之类的,因为浏览器的兼容问题,这里就不介绍了.

效果图

收藏与分享 « Prev: :Next »
(25 投票, 平均: 4.84 / 5)
 Loading ...

Leave a Reply