wordpress安装后的N个优化之 favicon.ico

favicon,即收藏夹图标,一般是将logo作为favicon,可以显示在浏览器的Tab栏或者收藏夹栏中。

历史

Favicon功能最早由微软创设(最开始只是ico文件类型,下面会提到),而微软公司的Internet Explorer网页浏览器会对每一个网站都请求favicon。1999年3月,Internet Explorer最早仅仅将favicon用于收藏夹。然而在当时却产生了一些关于隐身问题的思考,因为网站运营者可以通过日志查看有多少用户请求了favicon.ico文件,判断有多少人将网站放在浏览器收藏夹中。后来,由于越来越多的浏览器开始将favicon.ico显示在浏览器的地址栏上,隐私问题就不再受人顾虑了。

标准化

虽然,Favicon功能最早由微软创设,但是微软支持的link标签不遵从World Wide Web Consortium(W3C,万维网联盟)的HTML建议,因为:

  • rel属性必须包含一个用空格作分隔符的link类型的列表,所以一个包含两词的link类型不能被遵守标准的浏览器理解。
  • “.ico”文件类型没有一个注册的MIME类型,而且似乎在当时也不能被多数浏览器理解。(随后在2003年,这一格式在IANA获得注册,其MIME类型是image/vnd.microsoft.icon,进而消除了此问题的第一部分。)
  • 在网站上使用保留地址与Architecture of the World Wide Web(互联网的结构)矛盾,同时被认为是link squatting(链接劫持)或URI squatting(URI劫持)。

随后,Mozilla浏览器通过一种遵从Web标准的方法添加了对favicon的支持。它采用rel="icon"并允许网络设计人员添加任何支持的图像格式的favicon。例如<link rel="icon" type="image/png" href="/path/image.png" />。后来鉴于此功能将被用于所有新内容,多数浏览器都对此功能增加了支持。

配置

按照W3C的定义,favicon图片的格式应为:16X16像素或者32X32像素,8位或者24位色,图片格式为PNG,GIF或者ICO。

HTML

<!DOCTYPE html 
      PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head profile="http://www.w3.org/2005/10/profile">
<link rel="icon" 
      type="image/png" 
      href="http://example.com/myicon.png">
[…]
</head>
[…]
</html>

XHTML

<!DOCTYPE html
      PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
      xmlns="http://www.w3.org/1999/xhtml"
      xml:lang="en-US"
      lang="en-US">
<head profile="http://www.w3.org/2005/10/profile">
<link rel="icon"
      type="image/png"
      href="/somewhere/myicon.png" />
[…]
</head>
[…]
</html>

WordPress配置方法:在WordPress中配置favicon就很简单了,最新版本的WordPress,只需要在外观>>自定义>>站点身份,上传图片(经测试,JPEG、PNG格式均可)即可自动生成网站的favicon。

很多人不注重favicon的设置,favicon对于网站的品牌塑造也很重要。

一般为了提高网站的可用性,我们都会为自己的网站创建一个自定义的404错误文件,在这种情况下,如果网站没有相应的favicon.ico文件,每当有用户收藏网站/网页时, Web服务器都会调用这个自定义的404文件,并在网站的错误日志中记录。因此,favicon不仅仅只是为了看上去专业,还可以减轻服务器的带宽和负载的压力。

共有 1 条评论

发表评论

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