【整理】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的两三事】

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

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

 
        <!
        DOCTYPE 
        html> 
       
 
        <
        html 
        xmlns
        =
        "http://www.w3.org/1999/xhtml"
        > 
       
 
        <
        head
        > 
       
 
            
        <
        title
        >home page</
        title
        > 
       
 
            
        <
        link 
        rel
        =
        "icon" 
        href
        =
        "Images/wangyi.ico" 
        type
        =
        "image/x-icon" 
        /> 
       
 
            
        <
        link 
        rel
        =
        "shortcut icon" 
        href
        =
        "Images/wangyi.ico" 
        type
        =
        "image/x-icon" 
        /> 
       
 
        </
        head
        > 
       
 
        <
        body
        > 
       
 
            
        home page 
       
 
        </
        body
        > 
       
 
        </
        html
        > 
       

目录结构如下

        folder
       
        | 
       
        |-- baidu.ico    百度 icon 
       
        |-- home_childe.html 
       
        Images
       
        | 
       
        |-- wangyi.ico   网易 icon 
       
        favicon.ico        博客园 icon
       
        home.html

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

【WEB优化Favicon请求】

【关于 Favicon】

总是被命名为 favicon.ico ；
默认存放在网站 web 根目录。我们常常看到这样的一个请求 /favicon.ico ；
它总是显示在浏览器地址栏，网址的左边；
当访问一个页面的时候，不管怎么样，浏览器都会请求这个文件，即 /favicon.ico ；
可以通过在页面的 <head> 部分加入 <link> 元素来重新指定它的位置 <link rel=”shortcut icon” href=http://www.cctv.com/favicon.ico />
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 增加这样的设置。缓存时间可以是一个月，甚至可以是一年。

1

2

3

4

5

        <IfModule mod_expires.c>
       
        ExpiresActive On 
       
        ExpiresByType image
        /ico 
        "access plus 1 year" 
       
        ExpiresByType image
        /icon 
        "access plus 1 year" 
       
        <
        /IfModule
        ><span style=
        "font-family:'Microsoft YaHei';font-size:14px;line-height:1.5;"
        >    <
        /span
        >

通过 <link> 更新缓存。/favicon.ico 名字和位置总是固定死的，如果你需要更新缓存的话，可以通过 <link> 元素重新指定它的位置；
保持较小的图片大小。虽然 ico 格式文件支持不同的分辨率，但是我们推荐 16×16 大小，并且文件大小在 1kb 左右。

【nginx忽略favicon.ico日志】

若无法找到 favicon.ico 文件，则会在 nginx 的 error_log 中生成大量错误日志信息，把我们真正需要查看的日志给覆盖。因此这里，我们通过log_not_found off 关闭它。
实现方式为，把如下配置放到 server {} 块，用于当 favicon.ico 不存在时，不写错误日志。

1

2

3

4

 
        location = 
        /favicon
        .ico { 
        ## 采用完全匹配模式 
       
        log_not_found off;    
        ## 不写 error.log 
       
        access_log off;       
        ## 不写 access.log 
       
        }

配置项 log_not_found 默认为 on ，用于启用或禁用 404 错误日志，这个指令可以用来禁止 nginx 在找不到 rebots.txt 或 favicon.ico 这类文件时记录错误信息。
若设置了 log_not_found off; 则 error.log 中将不出现如下日志

1	`2014` `/07/28` `17:02:49 [error] 3697` `#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"`

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

1	`[172.16.80.111][-][28` `/Jul/2014` `:17:02:49 +0800][GET` `/favicon` `.ico HTTP` `/1` `.1][404][570][-]‘[Mozilla` `/5` `.0 (Windows NT 5.1) AppleWebKit` `/537` `.36 (KHTML, like Gecko) Chrome` `/31` `.0.1650.63 Safari` `/537` `.36][-]`

若配置为

1 2	`location` `/favicon` `.ico {` `## 相当于模糊匹配` `}`

则当访问

1	`http:` `//172` `.16.81.112` `/favicon` `.ico 或 http:` `//172` `.16.81.112` `/favicon` `.icoXXX`

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

若配置为

1 2	`location =` `/favicon` `.ico {` `## 完全匹配` `}`

则当访问

1	`http:` `//172` `.16.81.112` `/favicon` `.ico`

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

1	`http:` `//172` `.16.81.112` `/favicon` `.icoXXX`

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

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

热门文章

最新文章

相关电子书