Let's talk briefly about favicon, simple favicon_PHP tutorial-PHP Tutorial-php.cn

Table of Contents

简单谈谈favicon，简单favicon

Home

Backend Development

PHP Tutorial

Let's talk briefly about favicon, simple favicon_PHP tutorial

Jul 13, 2016 am 09:51 AM

简单谈谈favicon，简单favicon

favicon.ico介绍

favicon.ico是个什么东西呢，也许见得太多都习以为常了（我就是这样，直到写这篇文章之前才知道），看看维基百科的解释：

复制代码代码如下:
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标签设置网页图表的位置和名称，就像下面这样
<link href="favicon_baoman.ico" type="image/x-icon" rel="icon">

注意点

浏览器会缓存图标的信息，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 ^((&#63;U).+\.php)(/&#63;.+)$;
     fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
     fastcgi_param PATH_INFO $fastcgi_path_info;
     include fastcgi_params;
     rewrite ^/(.*)$  /index.php/$1 break;
   }
 }

Copy after login

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 ^((&#63;U).+\.php)(/&#63;.+)$;
     fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
     fastcgi_param PATH_INFO $fastcgi_path_info;
     include fastcgi_params;
     rewrite ^/(.*)$  /index.php/$1 break;
   }
 }

Copy after login

总结

找到这个原因并修改后，我又仔细看了看nginx配置，发现其他虚拟主机都有配置这个favicon.ico的匹配规则！囧。。。，总结下，就是要多看看，多想想为什么，不要对很多东西失去兴趣、见怪不怪

以上所述就是本文的全部内容了，希望大家能够喜欢。

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn