【整理】favicon.ico 相关内容整理

      所谓 favicon，即 favorites icon 的缩写，顾名思义，是可以是的浏览器收藏夹中除显示相应标题外，还能以图标方式区别不同的网站。当然，这不仅仅是 favicon 的全部，根据浏览器的不同，favicon 显示也有所区别：在大多数主流浏览器如 firefox 和 internet explorer (5.5 及以上版本)中，favicon 不仅在收藏夹中显示，还会同时出现在地址栏上，这时用户可以拖曳 favicon 到桌面以建立到网站的快捷方式；除此之外，标签式浏览器甚至还有不少扩展的功能，如 firefox 甚至支持动画格式的 favicon 等。 

      favicon.ico 图标是网站的缩略标志，可以显示在浏览器标签、地址栏左边和收藏夹，是展示网站个性的缩略 logo 标志，也可以说是网站头像，如果要让网站看起来更专业、更美、更有个性，favicon.ico 是必不可少的。 

      从特定的技术角度看，favicon 也并不只是仅仅让网站给人更专业的观感，也可以在一定程度上减轻服务器的流量带宽占用，一般为了提高网站的可用性，我们都会为自己的网站创建一个自定义的 404 错误文件，在这种情况下，如果网站没有相应的 favicon.ico 文件，每当有用户收藏网站/网页时， web 服务器都会调用这个自定义的 404 文件，并在网站的错误日志中记录。这显然是应该予以避免的。 

      浏览器调用 favicon 的原理是，首先在网页所在目录寻找 favicon.ico 文件，如果没有找到就去网站的根目录寻找。所以最简单的方法就是将制作好的 favicon 文件命名为 favicon.ico 然后上传到网站的根目录下。 

      如果您需要将 favicon.ico 放到其他目录下，或者希望让不同的网页显示不同的 favicon ，就需要在网页 html 文件中做设定了。 

本文主要讨论了各个浏览器对 favicon.ico 的不同处理。 

针对如下网页代码进行讨论 

<a href="http://my.oschina.net/moooofly/blog/295837#">?</a>

1

2

3

4

5

6

7

8

9

10

11

<code>&lt;!</code><code>doctype</code> <code>html&gt;</code>

<code>&lt;</code><code>html</code> <code>xmlns</code><code>=</code><code>"http://www.w3.org/1999/xhtml"</code><code>&gt;</code>

<code>&lt;</code><code>head</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>title</code><code>&gt;home page&lt;/</code><code>title</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>link</code> <code>rel</code><code>=</code><code>"icon"</code> <code>href</code><code>=</code><code>"images/wangyi.ico"</code> <code>type</code><code>=</code><code>"image/x-icon"</code> <code>/&gt;</code>

<code>    </code><code>&lt;</code><code>link</code> <code>rel</code><code>=</code><code>"shortcut icon"</code> <code>href</code><code>=</code><code>"images/wangyi.ico"</code> <code>type</code><code>=</code><code>"image/x-icon"</code> <code>/&gt;</code>

<code>&lt;/</code><code>head</code><code>&gt;</code>

<code>&lt;</code><code>body</code><code>&gt;</code>

<code>    </code><code>home page</code>

<code>&lt;/</code><code>body</code><code>&gt;</code>

<code>&lt;/</code><code>html</code><code>&gt;</code>

目录结构如下 

<code>folder</code>

<code>  </code><code>|</code>

<code>  </code><code>|-- baidu.ico    百度 icon</code>

<code>  </code><code>|-- home_childe.html</code>

<code>images</code>

<code>  </code><code>|-- wangyi.ico   网易 icon</code>

<code>favicon.ico        博客园 icon</code>

<code>home.html</code>

测试通过 http://localhost:3529/home.html 进行网页访问，结果如下： 

通过 360 浏览器浏览网页时，会忽略端口 3529 ，发送的获取 icon 请求是 http://localhost/favicon.ico ，因为发送的目的端口不是 3529 ，所以该请求会发送到网络上，此时获得的 icon 可能是 google 的 icon 。

通过 firefox 浏览器浏览网页时，请求到的 icon 是 link 标签中 href 所对应的图标，即 images/wangyi.ico 。

通过搜狗浏览器浏览网页时，发送的获取 icon 请求是 http://localhost:3529/favicon.ico ，即获取根目录下保存的 icon 图标。

该文章解释了为什么网站应该提供 favicon.ico 和 robots.txt 文件。 

      網站的根目錄最好有 favicon.ico 和 robots.txt 存在其主要的原因是：有些瀏覽器還是會嘗試去存取網站根目錄的 favicon.ico；搜尋引擎的 bots 就是會去一直檢查網站根目錄是否有 robots.txt，所以最好這兩個檔案都存在，以避免你的網頁伺服器，例如: apache web server，寫了一堆的「file does not exist: …./favicon.ico」或「file does not exist: …./robots.txt」到 error_log 檔案中，浪費儲存空間和伺服器資源。 

【关于 favicon】 

总是被命名为 favicon.ico ；

默认存放在网站 web 根目录。我们常常看到这样的一个请求 /favicon.ico ；

它总是显示在浏览器地址栏，网址的左边；

当访问一个页面的时候，不管怎么样，浏览器都会请求这个文件，即 /favicon.ico ；

可以通过在页面的 &lt;head&gt; 部分加入 &lt;link&gt; 元素来重新指定它的位置 &lt;link rel=”shortcut icon” href=http://www.cctv.com/favicon.ico /&gt;

ico 格式可以是不同分辨率的图像，比如 16×16 ，32×32 等。

（图略） 

      上图从客户端和服务端监测，可以知道每次访问页面的时候，都会访问 /favicon.ico ，不管该文件存不存在（一些工具像 httpwatch、firebug 不会将 /favicon.ico 请求罗列出来）。如果 /favicon.ico 文件不存在，则响应 404 错误。图-1和图-2比较而言，图-1(404 响应)反倒花费的时间更少，这是图-2需要传输 favicon.ico 文件，http 200 响应比 http 404 响应更大。通常在这种情况，我们应该减少对 /favicon.ico 请求来达到整体优化效果。 

【优化 favicon】 

      确定文件 /favicon.ico 存在，不应该返回 404 错误。404 错误意味着，每次访问浏览器都会重新请求一次 /favicon.ico 。我们应该减少这样的请求，将 /favicon.ico 缓存在客户端。减少不必要的 http 请求是 web 前端优化的一条重要准则 

      设置 expires 头，将 /favicon.ico 缓存在客户端。比如，apache 可以通过 mod_expires 增加这样的设置。缓存时间可以是一个月，甚至可以是一年。 

<code>&lt;ifmodule mod_expires.c&gt;</code>

<code>      </code><code>expiresactive on</code>

<code>      </code><code>expiresbytype image</code><code>/ico</code> <code>"access plus 1 year"</code>

<code>      </code><code>expiresbytype image</code><code>/icon</code> <code>"access plus 1 year"</code>

<code>    </code><code>&lt;</code><code>/ifmodule</code><code>&gt;&lt;span style=</code><code>"font-family:'microsoft yahei';font-size:14px;line-height:1.5;"</code><code>&gt;    &lt;</code><code>/span</code><code>&gt;</code>

通过 &lt;link&gt; 更新缓存。/favicon.ico 名字和位置总是固定死的，如果你需要更新缓存的话，可以通过 &lt;link&gt; 元素重新指定它的位置； 

保持较小的图片大小。虽然 ico 格式文件支持不同的分辨率，但是我们推荐 16×16 大小，并且文件大小在 1kb 左右。 

      若无法找到 favicon.ico 文件，则会在 nginx 的 error_log 中生成大量错误日志信息，把我们真正需要查看的日志给覆盖。因此这里，我们通过log_not_found off 关闭它。 

      实现方式为，把如下配置放到 server {} 块，用于当 favicon.ico 不存在时，不写错误日志。 

<code>location =</code><code>/favicon</code><code>.ico {</code><code>## 采用完全匹配模式</code>

<code>    </code><code>log_not_found off;   </code><code>## 不写 error.log</code>

<code>    </code><code>access_log off;      </code><code>## 不写 access.log</code>

<code>}</code>

      配置项 log_not_found 默认为 on ，用于启用或禁用 404 错误日志，这个指令可以用来禁止 nginx 在找不到 rebots.txt 或 favicon.ico 这类文件时记录错误信息。 

      若设置了 log_not_found off; 则 error.log 中将不出现如下日志 

<code>2014</code><code>/07/28</code> <code>17:02:49 [error] 3697</code><code>#0: *199 open() "/usr/local/nginx/html/favicon.ico" failed (2: no such file or directory), client: 172.16.80.111, server: 172.16.81.112, request: "get /favicon.ico http/1.1", host: "172.16.81.112"</code>

如设置了 access_log off; 则你自定义的 access.log 中将不出现如下日志 

<code>[172.16.80.111][-][28</code><code>/jul/2014</code><code>:17:02:49 +0800][get</code><code>/favicon</code><code>.ico http</code><code>/1</code><code>.1][404][570][-]‘[mozilla</code><code>/5</code><code>.0 (windows nt 5.1) applewebkit</code><code>/537</code><code>.36 (khtml, like gecko) chrome</code><code>/31</code><code>.0.1650.63 safari</code><code>/537</code><code>.36][-]</code>

若配置为 

<code>location</code><code>/favicon</code><code>.ico {  </code><code>## 相当于模糊匹配</code>

则当访问  

<code>http:</code><code>//172</code><code>.16.81.112</code><code>/favicon</code><code>.ico 或 http:</code><code>//172</code><code>.16.81.112</code><code>/favicon</code><code>.icoxxx</code>

时，则都会在 error.log 和 access.log 中记录日志，且因为匹配成功而不会走反向代理配置。 

若配置为  

<code>location =</code><code>/favicon</code><code>.ico {  </code><code>## 完全匹配</code>

则当访问

<code>http:</code><code>//172</code><code>.16.81.112</code><code>/favicon</code><code>.ico</code>

时，则在 error.log 和 access.log 中记录日志，且因为匹配成功而不会走反向代理配置。若访问 

<code>http:</code><code>//172</code><code>.16.81.112</code><code>/favicon</code><code>.icoxxx</code>

则会因为匹配失败而走反向代理。