上次向大家介绍了如何利用在线生成网站制作自己博客的favicon,但你会发现,在线生成的favicon有些地方并不怎么好看,比如其背景并不是透明的,而是白色的,这样在浏览器的地址栏里还好,看不出什么,但在浏览器标签中就会不怎么好看,但仔细观察的话,你会发现很多站点的favicon的背景都是透明的,比如常见的:
那要怎样透明背景的favicon呢?既然在线生成网站无法提供这样的功能,那只能由我们亲手来制作了!
和前面以前,我们首先要应用图片编辑软件photoshop等,制作出我们的favicon图片,保存为png形式的图片文件,接下来我们要应用到一款软件Axialis IconWorkshop,其实此款软件就是创建Windows桌面上的图标,为什么要用到此软件呢?其实我们说的favicon图标最初目的就是用于Windows图标,当你收藏某个站点的时候,其站点的favicon就会成为你桌面上快捷方式的图标。在那里下载此软件?Google下,下载安装完成后,打开软件,直接导入我们刚刚制作的图片,然后点击上方的“从图像创建Windows图标”按钮,
点击后,他会自动生成好几种形式供你选择,这是我们只需选择16X16 -XP,因为我们的favicon规定的尺寸为16X16。
点击下面的确定后,就会回到主页面,这时候我们只需保存转换后的favicon图标,点击保存,这时候其后缀名会自动变为.ico,我们把此文件命名为favicon
至此一个透明背景的favicon制作完成,现在只需上传覆盖你原先的favicon就行!
制作完了透明背景的favicon,那怎样制作动态的favicon,其实其制作非常简单,根本不需要任何软件,只需跟换一下代码,把之前的代码更改为:<link rel=”shortcut icon” href=”/favicon.ico” type=”image/gif”>,也就是把最后的x-icon更改为gif,然后把你的favicon.ico文件替换为gif动态图像文件,当然其尺寸也只能为16X16。OK,现在刷新下,你的favicon是不是动起来了!不过,要注意的是,貌似此效果只在firefox中支持,其他的浏览器并不支持此效果!