简单谈谈favicon

            favicon.ico介绍
favicon.ico是个什么东西呢，也许见得太多都习以为常了（我就是这样，直到写这篇文章之前才知道），看看维基百科的解释：
[U]复制代码[/U] 代码如下:
Favicon是favorites icon的缩写，亦被称为website icon（网页图标）、page icon（页面图标）或urlicon（URL图标），下面是链接 http://zh.wikipedia.org/wiki/Favicon
其实说白了就是这个东西，大部分网站都会在打开的浏览器tab最左侧显示这个小图标，这个就是favicon.ico

这个图标怎么设置的呢，有多少同学跟我一样对这个小细节习以为常了，但是不清楚怎么设置举个手（这里检讨下自己，有好多细节东西把脸都能碰肿，但我却不真正的了解他，更可怕的是我的潜意识里认为我了解他......）。
favicon设置
这个怎么设置呢，设置方法很简单，有两种法子：
默认放置在服务器根目录下面
就是将文件命名为favicon.ico并放在网站根目录下就可以，浏览器会自动方请求去获取http://host/favicon.ico，这个请求在浏览器中通过F12是看不到的，需要借助其他工具（比如说Fiddler）去看，或者打开服务器访问日志，比如我这个，nginx日志中会显示网页图标请求
"13/May/2015:16:07:31 +0800" "192.168.X.X" "test.test.com" "200" "GET /favicon.ico HTTP/1.1" "4409" ......
通过link标签修正网页图标位置和名称
这种方法就是通过html的link标签设置网页图表的位置和名称，就像下面这样

注意点
浏览器会缓存图标的信息，firefox我试了下是每隔一段时间（2分钟左右）就会请求一次favicon，chrome要删除数据才可以重新请求~~
这个有什么影响呢
发现这个问题是因为PHP框架，PHP框架通过pathinfo去解析路由，路由方式为【mod/controller.method】，如果不匹配的话就记录日志并返回404，我访问一个正确的路径也会报错说是路由不存在，但是接口返回是ok的，访问一个错误的路由会记录两条错误日志，这个是怎么回事呢，下面是我的nginx配置
server {
   listen  80;
   server_name test.test.com;
   location / {
     root /export/adsz/boss/php/sphp;
     fastcgi_pass  127.0.0.1:9000;
     fastcgi_index  index.php;
     fastcgi_split_path_info ^((?U).+\.php)(/?.+)$;
     fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
     fastcgi_param PATH_INFO $fastcgi_path_info;
     include fastcgi_params;
     rewrite ^/(.*)$  /index.php/$1 break;
   }
}
nginx配置导致了这个问题的存在，浏览器请求一个接口的时候，会默认带上http://test.test.com/favicon.ico，这个时候报出路由错误就想的通了，浏览器发出两条请求，一条使我们想要的，另一条就是这个ico网页图标请求，这个问题解决方法也很简单，只需要在配置中添加这个图表或者将favicon请求定位到其他地方：
server {
   listen  80;
   server_name test.test.com;
  location = /favicon.ico {
    root /wwroot/public/images/;
  }
   location / {
     root /wwroot/;
     fastcgi_pass  127.0.0.1:9000;
     fastcgi_index  index.php;
     fastcgi_split_path_info ^((?U).+\.php)(/?.+)$;
     fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
     fastcgi_param PATH_INFO $fastcgi_path_info;
     include fastcgi_params;
     rewrite ^/(.*)$  /index.php/$1 break;
   }
}
总结
找到这个原因并修改后，我又仔细看了看nginx配置，发现其他虚拟主机都有配置这个favicon.ico的匹配规则！囧。。。，总结下，就是要多看看，多想想为什么，不要对很多东西失去兴趣、见怪不怪
以上所述就是本文的全部内容了，希望大家能够喜欢。
            
            
您可能感兴趣的文章:

激发你的灵感:50个优秀的Favicons

给自己的网站制作一个favicon.ico图标的实现方法

Icon Craft-完美的Favicon制作工具下载

nginx关闭favicon.ico、robots.txt日志记录配置

node.js中的favicon.ico请求问题处理