帮你的网站制作个性Favicon

做网站的朋友都想做个有个性的Favicon，Favicon不仅是网站的一个标志，通过它我们还可以非常容易地从书签中辨认出你的网站。

今天我也弄了个，虽然不咋滴，但毕竟也还是第一次，以后有想法了再重新设计。

下面给想做Favicon的朋友提供一些资源，以方便你的设计。

1、创作灵感

首先你要有自己的设计，网上有很多“激发你的灵感：50个优秀的Favicons的文章，你可以去找找灵感。

2、设计工具

我们可以使用Photoshop、FireWorks、Illustrator等常规工具设计自己的Favicon，设计好了之后最后能先保存成PNG格式的文件。

当然也有些插件能让你的制图工具支持ICO文件，如使用插件ICOFormat-1.6f9-win可以使Photoshop支持Ico，下载后把.8bi文件解压到Photoshop安装路径下的\Plug-Ins\File Formats目录中即可使用，相关介绍请点击

3、转换工具

如果不想直接做成.ico文件，我们可以将设计好的png文件转换成ico文件，转换的方法有很多，下面是我整理的几种方法。

1>使用工具【AveIcon】这个工具使用起来很简单，具体的使用方法及下载地址可以查看soking的文章：“PNG 转 ICO的简单工具”

【IconWorkshop】据说是功能很强大的工具，不过我没用过，绿色版下载地址http://www.greendown.cn/soft/3280.html

2>在线转换 与使用AveIcon相比，我觉得在线转换的效果要好些。



下面有两个网站支持在线转换

http://www.html-kit.com/favicon/



4、使用Favicon

如果不想进行一些复杂的操作，你可以直接把制作好的Favicon.ico文件放入到网站根目录下使用，如果想实现更多其他效果，可以使用如下一些代码：

改变Favicon.ico保存位置

程序代码

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

复制代码

Firefox还支持动画效果的Favicon,使用方法如下:

程序代码

1. <link rel="shortcut icon" href="favicon.ico" >
   
2. <link rel="icon" href="animated_favicon.gif" type="image/gif" >

复制代码