favicon.ico介紹

favicon.ico是個(gè)什么東西呢，也許見得太多都習(xí)以為常了（我就是這樣，直到寫這篇文章之前才知道），看看維基百科的解釋：

其實(shí)說白了就是這個(gè)東西，大部分網(wǎng)站都會(huì)在打開的瀏覽器tab最左側(cè)顯示這個(gè)小圖標(biāo)，這個(gè)就是favicon.ico

這個(gè)圖標(biāo)怎么設(shè)置的呢，有多少同學(xué)跟我一樣對(duì)這個(gè)小細(xì)節(jié)習(xí)以為常了，但是不清楚怎么設(shè)置舉個(gè)手（這里檢討下自己，有好多細(xì)節(jié)東西把臉都能碰腫，但我卻不真正的了解他，更可怕的是我的潛意識(shí)里認(rèn)為我了解他......）。

favicon設(shè)置

這個(gè)怎么設(shè)置呢，設(shè)置方法很簡(jiǎn)單，有兩種法子：

默認(rèn)放置在服務(wù)器根目錄下面

就是將文件命名為favicon.ico并放在網(wǎng)站根目錄下就可以，瀏覽器會(huì)自動(dòng)方請(qǐng)求去獲取http://host/favicon.ico，這個(gè)請(qǐng)求在瀏覽器中通過F12是看不到的，需要借助其他工具（比如說Fiddler）去看，或者打開服務(wù)器訪問日志，比如我這個(gè)，nginx日志中會(huì)顯示網(wǎng)頁圖標(biāo)請(qǐng)求
"13/May/2015:16:07:31 +0800" "192.168.X.X" "test.test.com" "200" "GET /favicon.ico HTTP/1.1" "4409" ......

通過link標(biāo)簽修正網(wǎng)頁圖標(biāo)位置和名稱

這種方法就是通過html的link標(biāo)簽設(shè)置網(wǎng)頁圖表的位置和名稱，就像下面這樣
<link href="favicon_baoman.ico" type="image/x-icon" rel="icon">

注意點(diǎn)

瀏覽器會(huì)緩存圖標(biāo)的信息，firefox我試了下是每隔一段時(shí)間（2分鐘左右）就會(huì)請(qǐng)求一次favicon，chrome要?jiǎng)h除數(shù)據(jù)才可以重新請(qǐng)求~~

這個(gè)有什么影響呢

發(fā)現(xiàn)這個(gè)問題是因?yàn)镻HP框架，PHP框架通過pathinfo去解析路由，路由方式為【mod/controller.method】，如果不匹配的話就記錄日志并返回404，我訪問一個(gè)正確的路徑也會(huì)報(bào)錯(cuò)說是路由不存在，但是接口返回是ok的，訪問一個(gè)錯(cuò)誤的路由會(huì)記錄兩條錯(cuò)誤日志，這個(gè)是怎么回事呢，下面是我的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配置導(dǎo)致了這個(gè)問題的存在，瀏覽器請(qǐng)求一個(gè)接口的時(shí)候，會(huì)默認(rèn)帶上http://test.test.com/favicon.ico，這個(gè)時(shí)候報(bào)出路由錯(cuò)誤就想的通了，瀏覽器發(fā)出兩條請(qǐng)求，一條使我們想要的，另一條就是這個(gè)ico網(wǎng)頁圖標(biāo)請(qǐng)求，這個(gè)問題解決方法也很簡(jiǎn)單，只需要在配置中添加這個(gè)圖表或者將favicon請(qǐng)求定位到其他地方：

 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;
   }
 }

總結(jié)

找到這個(gè)原因并修改后，我又仔細(xì)看了看nginx配置，發(fā)現(xiàn)其他虛擬主機(jī)都有配置這個(gè)favicon.ico的匹配規(guī)則！囧。。。，總結(jié)下，就是要多看看，多想想為什么，不要對(duì)很多東西失去興趣、見怪不怪

以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。

最新評(píng)論