自己搭WORDPRESS博客一个重要目的之一就是完全的个性化,所以自定义favicon也是很重要的一项内容之一了。

1. 制作

首先当然是要制作favicon喽~

顾名思义,favicon是一个“icon”,最常用的就是.ico文件,而且出于兼容性考虑,最好是16*16、256色(但若你使用IE,且在桌面上保存一个到你的网站的URL LINK,此时若要使图标显示为你的favicon,则必须在ico文件中增加一帧32*32的分辨率)。

至于如何制作ico,你可以选择各种各样的图形软件(等一下,你想用PHOTOSHOP?不好意思,它不支持ico……还是用开源替代品gimp吧)。不过,在这样一个WEB大道的时代里,自然也是有一些神奇的网站能够帮你制作符合标准的favicon——我的favicon是在www.favicon.cc制作的,支持从其他图片格式生成ico,最后还能手动修改,支持多帧以及动画。

Firefox等其他浏览器还支持png、gif等格式,并且支持动画。

2. 设置

制作好以后就要放到网站上去了。IE是第一个提出favicon的,它会在你的服务器根目录下读取favicon.ico,所以你只需要将它上传至根目录即可。

不过,也有更美的方法,当今大部分浏览器支持在HTML头部设置favicon,这样你可以为不同网页指定不同的favicon。在你的HTML的<head>中添加这两个link:

1
2
<link rel="icon" href="http://YourAddress/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="http://YourAddress/favicon.ico" type="image/x-icon" />

可以忽略的几点HINT:

  1. 以上是XHTML,link标签以/>结束,若是HTML,则不需要/。
  2. 其实只需要第一行就可以了,因为按照标准,“shortcut ”会被忽略,不过为了兼容性和保险起见,还是加上了第二行(实际上,第一行是IE发明的,而第二行则是MOZILLA按照标准发明的)。
  3. 按照IANA标准,MIME-TYPE其实应当是“image/vnd.microsoft.icon”。
  4. 还是标准问题……根据W3C标准,使用以上代码需在head标签中添加profile属性,即<head profile=”http://www.w3.org/2005/10/profile“>…

3. 怨念的WORDPRESS

我用的notepad-theme的设置中有自带customize favicon选项,直接修改就可以了。如果没有的话,直接编辑主题的header.php文件,在head里加上刚才提到的那两行也完事了。

不过,灵异的是——如果我把favicon放到blog的根目录下,居然无法被访问到,直接就跳到index.php里的404提示了……我研究了一下,猜想是WORDPRESS的.htaccess中的rewrite导致的(有一行条件是:RewriteCond %{REQUEST_FILENAME} !-f,即如果找不到该文件才rewrite,可我的favicon.ico明明就在那儿啊……)。后来只好把文件放到wp-content底下了……