本文于2015年底完成，发布在个人博客网站上。 考虑个人博客因某种原因无法修复，于是在博客园安家，之前发布的文章逐步搬迁过来。

背景

某一天在办公室分析产品首页加载速度时，无意中从Chrome浏览器的调试窗口看到浏览器在请求一个名为favicon.ico文件，由于Web系统的根路径下不存在这个文件，Chrome仅报了404访问失败，但当时没有太关注。

直到后来在某一次版本上线结束后的下午，还是在分析产品首页的加载速度，突然发现浏览器加载favicon.ico文件时，Web服务器居然把整个首页重新返回了一次，拖累了首页的加载速度。

如是，摆在眼前有两个问题：

  • favicon.ico是何方神圣，为什么浏览器会要求加载这个文件？
  • IE11加载favicon.ico文件失败后，居然再次下发加载首页的请求，导致首页加载了两次？

为什么浏览器要访问favicon.ico？

favicon.ico是什么

从百度百科中，可以找到如下描述：

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

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

从资料可以得出解决本问题的方法。

解决方法

在首页的<head>增加如下的代码：

<link rel="icon" href="/favicon.ico" type="image/x-icon" />

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

这时清理浏览器缓存，并强制浏览器不缓存数据，多次刷新页面，观察浏览器控制台监控到的HTTP请求，发现浏览器可以成功获取favicon.ico。Web服务器按照预想返回了图片，而不是首页页面。

这样就成功的消除了一次多余的页面返回动作。

没想明白的怪事

不过有件事情没有想明白。我使用WordPress 4.1在SAE上搭建的博客网站，在网站根目录下没有找到favicon.ico，但使用前述的测试手段来做验证时，居然没有观察到浏览器要求下载favicon.ico的请求。

为什么？

IE11加载favicon.ico文件失败后，为什么会再次下发加载首页的请求？

其实问题还有一个，为什么之前分析页面加载过程的时候，没有观察到首页被加载两次的现象。

使用IE11的调试工具仔细观察首页的刷新过程，发现其实不只是在访问favicon.ico失败时服务器返回首页，IE11在访问jquery.min.map文件失败时，服务器也会返回首页。

jquery.min.map又是什么鬼？

查阅jquery的官方资料，原来这是jquery 1.9版本的新特性。通常情况下，为了降低浏览器下载js文件的时延，我们在Web系统的生产环境里只会部署压缩版本的jquery.js。这没有什么问题，而且通常情况下都很好，但凡事总有例外。当客户投诉页面访问时出现js报错，而我们本地又无法重现问题，只好直接用浏览器来调试生产环境，问题就来了。压缩版本的jquery里，变量名、代码全部缩在一起，查看非常不方便，理解很困难。source maps就是解决这个问题的利器。jquery 1.9发布比较早，彼时只有Chrome支持source maps；现在已过去好多年，从IE11的表现看，应当也已实现了source maps的支持。

虽然知道了jquery.min.map是什么鬼，但对于定位问题本身并没有什么帮助。因为我还是不知道如何观察浏览器的行为。

分析问题的笨方法

最初想了很久不知如何下手，后来想代码里引用到首页的地方应该不多，干脆在相关的地方全打上断点，调试一下看看，说不定会有所发现。于是在代码里全局搜索首页的文件名，找出引用到首页的几处代码，在相关的Java代码中打上了断点。这时启动容器，用浏览器登录首页，打开浏览器的调试器，刷新页面，监控Java代码。

在几处正常的访问点上，代码表现正常，但在处理favicon.ico的下载请求时，服务器返回了重定向的消息。我精神一振，预感神秘的问题快要找到原因了。仔细查阅重定向操作相关的代码，外加几次调试，终于搞清楚了问题所在。原来系统的代码实现了对URL的访问控制，限定浏览器只能访问以.css、.js、.png、.jsp、.action为结尾URL，浏览器对其它形式URL的访问均会被重定向到首页。

代码分析到这里，问题就清楚了。

问题原因

  • favicon.ico和jquery.min.map文件的结尾不在前述文件后缀范围之内，于是加载这两个文件的请求被服务器的代码重定向回了首页，因而IE11按照服务器的要求重新加载了首页。
  • 之前调试代码的时候，我并没有设置禁止IE11访问缓存；因此当IE11被服务器代码要求重新加载首页时，IE11发现首页已加载过，于是直接使用了缓存中的页面，这样我自然看不到第二次加载首页的请求了。

问题清楚了，解决的手段自然就有了。

解决方法

  • 找项目组的美工MM，参照产品的Logo制作了一个16*16的favicon.ico文件，上传到的WebRoot的根路径，这下favicon.ico文件就有了。
  • 修正代码，调整权限控制的部分，把.ico和.min.map加入到免认证的列表里，避免浏览器访问这两类文件时被重定义向。这个问题的发生，完美的诠释了我同事的口头禅，诡异的问题通常都是愚蠢的错误引入的。

参考资料

在网上搜索到一些材料，对于问题的定位起到了很大的作用，这里记录下来。

网站优化之favicon.ico的更多相关文章

  1. PHP获取网站图标（favicon.ico）文件

    有的网站源码中加入了这几行代码: <link rel="shortcut icon" href="/favicon.ico" type="ima ...

  2. 网站平台的favicon.ico的logo

        <link rel="shortcut icon" href="http://www.uuop.com/icotemp/2017061703035984/f ...

  3. favicon.ico显示，favicon显示，favicon图标显示

    favicon.ico显示,favicon显示,favicon图标显示 >>>>>>>>>>>>>>>> ...

  4. nginx access.log 忽略favicon.ico訪问记录的方法

    favicon.ico 文件是浏览器收藏网址时显示的图标,当第一次訪问页面时.浏览器会自己主动发起请求获取页面的favicon.ico文件.当/favicon.ico文件不存在时,服务器会记录404日 ...

  5. 让网站不去请求favicon.ico图标

    让网站不去请求favicon.ico图标 favicon.ico 图标用于收藏夹图标和浏览器标签上的显示,如果不设置,浏览器会请求网站根目录的这个图标,如果网站根目录也没有这图标会产生 404.出于优 ...

  6. [转载]网站地址栏小图标favicon.ico的制作方法

    有人也许会好奇,有的网址前面有个漂亮的小图标而且有的网站图标还会动,这是怎么做到的呢? 如下图所示: 那个小图标有个名字叫favicon.ico,网站图标虽小但可以起到很好的点缀作用,尤其是当浏览者将 ...

  7. 那么如何添加网站favicon.ico图标

    1.  获得一个favicon.ico的图标,大小为16px×16px最为合适 2. 将制作好的图标文件Favicon.ico上传到网站的根目录: 3. 在首页文件的html代码的头部中加入如下代码: ...

  8. favicon.ico 网站小图标标识

    随便打开一个网页:比如 http://www.baidu.com/ 可以看到在浏览器的标签头上面显示了一个图标,这个图标是:,也就是我们常说的favicon.ico. 由于这篇文章主要讨论favico ...

  9. 网站图标 favicon.ico

    默认情况下,浏览器访问一个网站的时候,同时还会向服务器请求“/favicon.ico”这个URL,目的是获取网站的图标. 若没有配置的话,Django就会返回一个404错误,并且浏览器接收到这个404 ...

  10. 网站微图标，页标签，favicon.ico

    随便打开一个网页:比如 http://www.baidu.com/ 可以看到在浏览器的标签头上面显示了一个图标,也就是我们常说的favicon.ico, 由于这篇文章主要讨论favicon.ico,以 ...

随机推荐

  1. 一文带你实现云上部署轻量化定制表单Docker

    本文分享自华为云社区 <[华为云云耀云服务器L实例评测|云原生]自定制轻量化表单Docker快速部署云耀云服务器 | 玩转华为云>,作者:计算机魔术师. 华为云的云耀云服务器L实例备受推崇 ...

  2. 6. 用Rust手把手编写一个wmproxy(代理，内网穿透等), 通讯协议源码解读篇

    用Rust手把手编写一个wmproxy(代理,内网穿透等), 通讯协议源码解读篇 项目 ++wmproxy++ gite: https://gitee.com/tickbh/wmproxy githu ...

  3. Sentinel系列之SlotChain、NodeSelectorSlot、ClusterBuilderSlot分析

    本文基于Sentinel 1.8.6版本分析 1. SlotChain 我们从入口com.alibaba.csp.sentinel.SphU#entry(java.lang.String) 开始分析. ...

  4. Django框架项目之课程主页——课程页页面、课程表分析、课程表数据、课程页面、课程接口、前台、后台

    文章目录 1-课程页页面 课程组件 2 课程主页之课程表分析 课程表分析 免费课案例 创建models:course/models.py 注册models:course/adminx.py 数据库迁移 ...

  5. 我看懂了oracle中pivot行转列的用法

    我看懂了PIVOT的用法 用法Select * From 表名,PIVOT(  SUM('要合并的列1'),MAX('要合并的列2'),....FOR 将值转换成列的列名 IN(列名1,列名2,列名3 ...

  6. oj练习题程序编程题

    打印图形Description按要求输出由*组成的图案Input无需输入Output输出下面由"组成的图案卡 11 print('*') print("***") pri ...

  7. oracle命令3 冷备份

    用户管理的备份:备份脚本要自己写:备份哪些文件要自己选:恢复时要复制那些文件自己判断:恢复需要的日志,自己找: 备份,需要备份保存关键SCN信息的文件:一次完成的备份包括:控制文件,数据文件,日志文件 ...

  8. 【Vue3响应式入门#01】Reactivity

    专栏分享:vue2源码专栏,vue3源码专栏,vue router源码专栏,玩具项目专栏,硬核推荐 欢迎各位ITer关注点赞收藏 背景 以下是柏成根据Vue3官方课程整理的响应式书面文档 - 第一节, ...

  9. Vue源码学习(十二):列队处理（防抖优化，多次调用，只处理一次）

    好家伙, 本篇讲的是数据更新请求列队处理 1.一些性能问题 数据更新的核心方法是watcher.updata方法 实际上也就是vm._updata()方法, vm._updata()方法中的patch ...

  10. linux 批量替换文件内容

    1.批量查找某个目下文件的包含的内容,例如: #   grep -rn "要找查找的文本" ./ 2.批量查找并替换文件内容. #   sed -i "s/要找查找的文本 ...