favicon.ico 的一些优化意见

2015-09-30 veryyoung 更多博文 » 博客 » GitHub »

原文链接 http://veryyoung.me/blog/2015/09/30/browser-request-favicon-ico.html
注:以下为加速网络访问所做的原文缓存,经过重新格式化,可能存在格式方面的问题,或偶有遗漏信息,请以原文为准。


大部分浏览器都会请求当前网页根目录下的 /favicon.ico ,如果处理得不得当,会返回 404,有的甚至会引其它意想不到的错误,比如被拦截器拦截到。

<!-- more -->


各个浏览器请求 /favicon.ico 的策略会不同。

Chrome 每次访问自动请求,FireFox 第一次访问请求,IE 不请求(需页面设置),国产浏览器的策略大都和 IE 相同。


浏览器请求 /favicon.ico 的地址也可能不同。(真是涨姿势了!)

Chrome、Firefox 浏览器默认会请求 link 的 href 所对应的图标,如果不存在 link, 则去请求 http://host:port/favicon.ico;

搜狗、IE 等浏览器默认会请求 link 的 href 所对应的图标,如果不存在 link,不请求。

360 等国产浏览器默认会请求 link 的 href 所对应的图标,如果不存在, 则去请求 http://host/favicon.ico,忽略掉端口。


建议:

  1. 配置根目录能访问到的 favicon.ico
  2. 尽量在每个页面 link href favicon.ico
  3. 如果你的网站带端口,那么尤其要注意360等浏览器,它们在请求 favicon.ico 的时候会忽略端口号的。
  4. 在 SpringMVC 可以在 webapp 目录下放置一个 favicon.ico, 然后在 web.xml 中配置

    <servlet-mapping>
            <servlet-name>default</servlet-name>
            <url-pattern>/favicon.ico</url-pattern>
     </servlet-mapping>
    
  5. 最好用 nginx 代理 /favicon.ico,设置一个比较长的过期时间,同时不打印访问 ico 相关的日志。

    location /favicon.ico {  
        root /data/asserts/;  
        gzip_static on;  
        expires max;  
        add_header Cache-Control public;
        access_log off;
    }