帮你的网站制作个性Favicon


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

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

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

1、创作灵感

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

2、设计工具

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

当然也有些插件能让你的制图工具支持ICO文件,如使用插件ICOFormat-1.6f9-win可以使Photoshop支持Ico,下载后把.8bi文件解压到Photoshop安装路径下的Plug-InsFile 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/

http://209.59.146.86/favicon/index.php

4、使用Favicon

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

改变Favicon.ico保存位置

程序代码 程序代码
<link rel=”icon” href=”/dir/favicon.ico” mce_href=”/dir/favicon.ico” type=”image/x-icon”>
<link rel=”shortcut icon” href=”/dir/favicon.ico” mce_href=”/dir/favicon.ico” type=”image/x-icon”>



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

程序代码 程序代码
<link rel=”shortcut icon” href=”favicon.ico” >
<link rel=”icon” href=”animated_favicon.gif” type=”image/gif” >



关于Favicon使用的问题可参考soking的文章:网站个性标志Favicon的使用

Categories: 设计布局

Leave a Comment