談談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標籤設定網頁圖表的位置和名稱，就像下面這樣

注意點

瀏覽器會緩衝表徵圖的資訊，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的匹配規則！囧。。。，總結下，就是要多看看，多想想為什麼，不要對很多東西失去興趣、見怪不怪

以上就介紹了談談favicon和他帶來的問題，包括了方面的內容，希望對PHP教程有興趣的朋友有所協助。

