为网站添加小图标Favicon.ico

很多网站都有自己的小图标Favicon.ico,在浏览器的地址栏显示一个很漂亮的小图标,既个性又美观,通过下面的方法,可以为你的网站添加属于自己的网站小图标Favicon。

制作Favicon.ico

制作Favicon.ico的方法相当简单,准备好一个好看的图片。自己制作也好,从网络搜集也好,自己喜欢就好了。至于在浏览器中使用时16×16像素的图片已经足够,为什么还要准备32×32像素的图片,原因在于,正如上文所言,favicon也显示在地址栏中,用户可以拖曳favicon到桌面以建立到网站的快捷方式,而桌面图标则要以32×32显示的,如果您的Favicon.ico不包括32像素的 图片,系统就只能使用默认的浏览器图标来标注网站/网页,如Internet Explorer的蓝色“e”,起不到我们意欲通过Favicon.ico打造网站品牌的作用。

图片选定以后,使用如Image2Ico之类的小程序,也可以通过可以在线制作Favicon的网站来制作,我推荐的是:

http://www.htmlkit.com/favicon/,这个还可以生成动态的图标。

在网页中使用Favicon.ico

浏览器调用Favicon的原则是首先在网页所在的目录下寻找Favicon.ico文件,如果没有,便到网站的根目录下寻找。因此,在网页中使用Favicon最简单的办法便是将制作好的图标文件命名为Favicon.ico,然后将其上传到网站的根目录即可。上传好了之后,修改你所用主题的header.php,找到 <head> </head> 这段代码,然后在<head> </head>标签之间插入下面的那段代码

<link rel=”shortcut icon” href=”favicon.ico” />

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

<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以及opera等浏览器还支持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” >

我试了好几次才成功显示出favicon,发现是之前制作favicon的网站生成的ico有问题,这个大家注意了,动态的我没有时间尝试了,赶着下班,也不打算尝试了,毕竟主流的IE,唉,不说了大家都明白。

This entry was posted in 技术相关 and tagged , , . Bookmark the permalink.

5 Responses to 为网站添加小图标Favicon.ico

  1. aikur says:

    其实你的ICO放在根目录下自然就会显示的,不知道这个是WP的功能还是默认规则

  2. 刘冲 says:

    不错啊 就是看了 也弄了 就是不显示~

  3. 追梦 says:

    呵呵,没在意, 等我也去弄个。

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

注意: 评论者允许使用'@user空格'的方式将自己的评论通知另外评论者。例如, ABC是本文的评论者之一,则使用'@ABC '(不包括单引号)将会自动将您的评论发送给ABC。使用'@all ',将会将评论发送给之前所有其它评论者。请务必注意user必须和评论者名相匹配(大小写一致)。