制作透明背景或是动画favicon

上次向大家介绍了如何利用在线生成网站制作自己博客的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中支持，其他的浏览器并不支持此效果！