WEB服務與NGINX（16）-網站logo之favicon.ico文件

---

目錄

• 1. 網站logo之favicon.ico文件
  • 1.1 favicon.ico文件的作用
  • 1.2 favicon.ico文件帶來的問題

---

1. 網站logo之favicon.ico文件

1.1 favicon.ico文件的作用

favicon.ico文件是瀏覽器記錄的網站的圖標，當客戶端使用瀏覽器訪問頁面時，瀏覽器會自己主動發起請求獲取頁面的favicon.ico文件（瀏覽器緩存過此頁面的不會再次請求），例如百度的favicon.ico文件圖標如下：

下面我們來制作一個自己的網站圖標，借用一下百度的圖標。

#1.下載baidu的網站圖標
[root@nginx01 ~]# wget https://www.baidu.com/favicon.ico

#2.修改nginx的配置文件
[root@nginx01 ~]# vim /etc/nginx/conf.d/virtualhost.conf 
server {
        listen 80;
        server_name www.nginx01.com;
        charset utf-8,gbk;
        
        access_log /var/log/nginx/access_nginx01.log access_json;
        
        location / {
                root /data/nginx/html/web1;
                index index.html;
        }       
        location = /favicon.ico {
                root /data/nginx/html/web1/image;
        }       
}       

#3.將favicon.ico文件
[root@nginx01 ~]# ll /data/nginx/html/web1/image/favicon.ico 
-rw-r--r-- 1 root root 16958 Mar 10 10:33 /data/nginx/html/web1/image/favicon.ico

瀏覽器測試訪問，發現已經存在圖標了。

1.2 favicon.ico文件帶來的問題

當服務器上對用的站點不存在favicon.ico文件時，當客戶端進行訪問時會在服務器上生成一條favicon.ico 404的報錯日志，而且在瀏覽器上也會有響應的報錯。

客戶端的報錯如下：

服務器上產生的錯誤日志如下：

[root@nginx01 ~]# tail /var/log/nginx/access_nginx02.log 
{ "@timestamp": "2021-06-19T23:00:23+08:00", "remote_addr": "192.168.20.1", "referer": "-", "request": "GET / HTTP/1.1", "status": 200, "bytes":16, "agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:89.0) Gecko/20100101 Firefox/89.0", "x_forwarded": "-", "upstr_addr": "-","upstr_host": "-","upstreamtime": "-" }
{ "@timestamp": "2021-06-19T23:00:24+08:00", "remote_addr": "192.168.20.1", "referer": "http://www.nginx02.com/", "request": "GET /favicon.ico HTTP/1.1", "status": 404, "bytes":146, "agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:89.0) Gecko/20100101 Firefox/89.0", "x_forwarded": "-", "upstr_addr": "-","upstr_host": "-","upstreamtime": "-" }

為了避免上述404報錯的產生，解決方法有兩種：

#方法一：服務器不記錄相關的訪問日志
location = /favicon.ico {
      access_log off;
}    

#方法二：制作圖標，並將圖標放置在響應的位置,如上例。
location = /favicon.ico {
      root /data/nginx/html/web1/image;
}