Favicon 圖示完整指南：設定方法、快取機制與 Nginx 路由問題解決

Favicon 圖示完整指南：設定方法、快取機制與 Nginx 路由問題解決

Favicon（Favorites Icon）是網站識別的關鍵細節。本文說明兩種設定方式、瀏覽器快取行為，並解決 PHP 框架路由攔截 favicon.ico 導致 404 的 Nginx 設定技巧。

什麼是 Favicon？

顯示於瀏覽器分頁、書籤列、網址列的 16x16 或 32x32 像素圖示，格式通常為 .ico，現代瀏覽器也支援 PNG、GIF、SVG。

兩種設定方式

1. 預設根目錄放置

將 favicon.ico 放置於網站根目錄（DocumentRoot），瀏覽器會自動請求 GET /favicon.ico。此請求不會顯示於開發者工具 Network 面板，需透過 Fiddler 或伺服器存取日誌觀察。

2. 使用 <link> 標籤指定

<link rel="icon" href="/images/favicon_custom.ico" type="image/x-icon">
<!-- 支援 PNG -->
<link rel="icon" href="/images/favicon.png" type="image/png" sizes="32x32">

優點：可自由命名、放置位置、提供多尺寸版本。

瀏覽器快取行為

• Firefox：約每 2 分鐘重新驗證一次。
• Chrome：極度積極快取，需手動清除瀏覽資料或更換檔案名稱才會重新請求。
• 開發期間建議加上查詢字串 ?v=20240101 強制更新。

Nginx + PHP 框架路由陷阱與解決

問題： PHP 框架（如 ThinkPHP、Laravel）使用 PATH_INFO 路由，Nginx 將所有請求轉發至 index.php。瀏覽器自動請求 /favicon.ico 會被框架視為不存在的路由，記錄 404 日誌甚至拋出異常。

錯誤設定範例：

location / {
  rewrite ^/(.*)$ /index.php/$1 break;
  fastcgi_pass 127.0.0.1:9000;
  ...
}

正確解決： 在 location / 之前優先匹配 favicon.ico 直接由 Nginx 靜態檔案服務處理。

server {
  listen 80;
  server_name example.com;

  location = /favicon.ico {
    root /var/www/public/images/; # 實際檔案所在目錄
    access_log off;
    log_not_found off;
  }

  location / {
    root /var/www/public;
    fastcgi_pass 127.0.0.1:9000;
    fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    include fastcgi_params;
    rewrite ^/(.*)$ /index.php/$1 break;
  }
}

同理，若有 robots.txt、靜態資源（css/js/images）也應優先以 location 直接服務，避免進入 PHP 框架處理。

總結

1. 務必提供 favicon.ico，提升專業度與品牌辨識。
2. 建議使用 <link> 標籤明確指定，方便版本控制與多尺寸適配。
3. Nginx 層面攔截靜態檔案請求，避免框架路由誤判產生垃圾日誌。
4. 善用查詢字串或檔案名稱版本號解決快取更新問題。