favicon.ico请求处理
favicon.ico 图标⽤于收藏夹图标和浏览器标签上的显⽰，如果不设置，浏览器会请求⽹站根⽬录的这个图标，如果⽹站根⽬录也没有这图标会产⽣ 404。
出于优化的考虑，要么就有这个图标，要么就禁⽌产⽣这个请求。
在做 H5 移动端应⽤的时候，不希望产⽣ favicon.ico 的请求。
可以在页⾯的 <head> 区域，加上如下代码实现屏蔽：
<link rel="icon" href="data:;base64,=">
icon图标库或者详细⼀点
<link rel="icon" href="data:image/ico;base64,aWNv">
当然，既然是 dataURL ⽅式，IE < 8 等 old browser 就不适⽤了
在项⽬中使⽤node.js请求favican.ico的时候会出现2条请求，浪费资源，经过⼀番改进，记录下来过程，以后注意。
代码如下:
var http=require("http");
var ateServer();
<("request",function(req,res){5        console.log(req.url);
});
server.listen(1337,"127.0.0.1");
这样的代码在请求时会出现两条请求:
第⼀条时URL地址为⽤户输⼊的客户端请求的⽬标URL地址,"/"代表⽤户的⽬标url地址为web应⽤程序的根⽬录.
第⼆个⽬标URL地址问浏览器为页⾯在收藏夹中的显⽰图标.默认为favicon.ico.⽽⾃动发出的请求的⽬标URL地址.
可以对上⾯的代码做修改后屏蔽这样的请求
代码如下:
var http=require("http");
var ateServer();
<("request",function(req,res){
if(req.url!=="/favicon.ico")
console.log(req.url);
});
可以看到在浏览器的标签头上⾯显⽰了⼀个图标，这个图标是：，也就是我们常说的favicon.ico.
由于这篇⽂章主要讨论favicon.ico，以及各个浏览器对其的不同处理，所以还是新建web项⽬如下：
home.html 代码如下：
1.
<!DOCTYPE html>
2.
<html xmlns="/1999/xhtml">
3.
<head>
4.
<title>home page</title>
5.
<link rel="icon" href="Images/wangyi.ico" type="image/x-icon" />
6.
<link rel="shortcut icon" href="Images/wangyi.ico" type="image/x-icon" />
7.
</head>
8.
<body>
9.
home page
10.
</body>
11.
</html>
下⾯两⾏代码就可以告诉浏览器使⽤wangyi.ico 作为home.html的图标了：
1.
<link rel="icon" href="Images/wangyi.ico" type="image/x-icon" />
2.
<link rel="shortcut icon" href="Images/wangyi.ico" type="image/x-icon" />
基本上所有的现代浏览器都⽀持这种写法，例如firefox，ie9.
firefox:
ie9:
可惜的是普通⽤户⽤的基本上是360浏览器，搜狗浏览器,qq浏览器等。
搜狗浏览器：
可以知道，我们在⽹站根⽬录下⾯的favicon.ico 起作⽤了，所以显⽰的是⽹站根⽬录下⾯的favicon.ico 图标。打开360浏览器：
奇怪了，google的图标哪⾥来的。。。。
我们的faviconTestWeb 只有3个图标，⼀个是wangyi.ico.baidu.ico.favicon.ico(cnblogs的图标)。
为什么使⽤360显⽰的是google的图标？
firefox请求的是：link 的href所对应的图标。
证据就是打开360se的安装⽬录：
所以如果你的⽹站favicon.ico 不起作⽤，或者是想要让favicon.ico 的兼容性更好，要使⽤下⾯⼏个步骤：
3：如果你的⽹站带端⼝，或者是测试版本的话，那么尤其要注意360等浏览器，它们在请求favicon.ico 的时候会忽略端⼝号的。
另外，favicon.ico这个请求是浏览器⾃动发送的请求，我们过滤不了的。当我们访问⽹页的时候，浏
览器默认会发送favicon.ico这个请求来查⽹页的图标⽂件，这就是为什么我们设置⽹页图标的时候，只要把favicon.ico这个⽂件放到⽬录⾥去就⾏了的原因
注：
请求favicon.ico时如果请求不到东西那么是给favicon返回的response所以⽆论怎么弄
都不会影响review页⾯的html内容。。。。。。。。。。。。。。。。。。。
我的⽰例html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> -->
<link rel="icon" href="data:;base64,=">
<!-- <link rel="SHORTCUT ICON" href="111(这⾥⾯的内容就是默认请求的，只要rel值⾥⾯带icon关键字好像就可以)"> -->
<title>Document</title>
</head>
<body>
review.html
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。