favicon.ico的制作和使用

什么是favicon?
Favicon是favorites icon的缩写,亦被称为website icon(网页图标)、page icon(页面图标)或urlicon(URL图标)。Favicon是与某个网站或网页向关联的图标。网站设计者可以多种方式建立这种图标,而目前也有很多网页浏览器支持此功能。浏览器可以将favicon显示于浏览器的地址栏中,也可置于书签列表的网站名前,还可以放在标签式浏览界面中的页标题前。

如何制作Favicon.ico
制作Favicon.ico的方法相当简单,首先,利用图形工具创建2个反映网站主题的256色的小图片:1个为32×32像素,另一个为16 ×16像素。需要注意的是,调色板要选用“Windows 默认调色板”,不然,在最终的效果展示中图形可能会发生迥异于您初衷的颜色上变化。

需要说明的是,在很多关于Favicon.ico的说明中,常见到要求图片为16色的说法,应该说这类说法大大过时:在早期如Windows 95时期,16色的Favicon.ico可能是个稳妥的选择,保证其在大多数情况下正常使用,但现在,完全不存在那类限制,16色只能使图标的展示效果大大降低。

可以通过可以在线制作Favicon的网站来制作。 可以在线制作favicon.ico的地址:
http://www.chami.com/html-kit/services/favicon/
http://www.favicon.cc/

在网页中使用Favicon.ico

浏览器调用Favicon的原则是首先在网页所在的目录下寻找Favicon.ico文件,如果没有,便到网站的根目录下寻找。
因此,在网页中使用Favicon最简单的办法便是将制作好的图标文件命名为Favicon.ico,然后将其上传到网站的根目录即可。(一般根目录位于:/public_html/)

如果您需要将Favicon.ico放到其他目录下,或者希望让不同的网页显示不同的Favicon,就需要在网页Html文件中做设定了,具体设置也很简单,在Html中的<head>部分加入如下的代码:

<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还支持GIF动画格式的Favicon,使用方法如下:
首先制作一个16*16的gif动画,然后在html代码<head></head>中加入如下代码:

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

效果如下:

http://itaboo.info/favicon.ico

http://itaboo.info/

参考地址:
Xiaorsz’s Blog:http://www.xiaorsz.com/faviconico/
wikipedia : http://zh.wikipedia.org/wiki/Favicon
baidu baike:  http://baike.baidu.com/view/1237286.html

五月 23rd, 2009 添加一条留言
首页 > Internet > favicon.ico的制作和使用
评论 (3) Trackback 添加留言
  1. 五月 18th, 2010 at 17:49 | #1

    请问一下,我将Favicon.ico放到了网站的根目录下,可是网站前面的小图标还是没有改过来。。

    在Html中的<head>部分在哪里呢???我都找不到。。 :sad:

    麻烦你了!!谢谢 :o

  2. 五月 24th, 2009 at 16:30 | #2

    囧 嗯 昨天email交流了下 很快就学会了哦 不错不错

  3. 五月 23rd, 2009 at 23:34 | #3

    来顶一下!!

容许的Html标签: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">
Trackbacks (0 ) 详情 Trackback