為什麼我的 Favicon 不顯示？

1. 檢查 HTML link 標籤

第一步是確認文件 head 裡有正確的 link 標籤。缺了或寫錯，圖示就不會顯示。

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

確認 href 路徑和實際檔案位置一致。不顯示時，對照網站根目錄再核一次相對路徑。

2. 清瀏覽器快取

瀏覽器會大力快取圖示，所以改完程式碼也可能暫時看不到。可以試：

• 強制重新整理（Windows/Linux：Ctrl+Shift+R，Mac：Cmd+Shift+R）
• 清除該網站的快取和 Cookie
• 用無痕／隱私視窗開啟
• 等 24–48 小時讓快取自然過期

如果這些之後仍不顯示，多半不是快取問題。

3. 核對檔案路徑和位置

確認圖示檔案確實在預期位置。檔案缺失或目錄不對就不會顯示。

常見放置位置：

• 網站根目錄： /favicon.ico or /favicon.png
• public 目錄： /public/favicon.ico （靜態網站產生器常用）
• assets 目錄： /assets/favicon.ico

HTML 裡的路徑必須和伺服器上的實際位置一致。

4. 核對格式和尺寸

不支援的格式或錯誤尺寸也會導致不顯示：

• ICO： 傳統格式，所有瀏覽器可用（16×16 或 32×32）
• PNG： 現代瀏覽器支援（16×16、32×32、48×48、96×96、192×192、512×512）
• SVG： 現代瀏覽器支援，可縮放、不依賴解析度

先確保檔案格式和尺寸正確。不行就先用標準 ICO 或 PNG 試。

5. 檢查伺服器設定

伺服器設錯也會導致不顯示：

• 確認 .ico、.png、.svg 的 MIME 類型設定正確
• 確認伺服器允許請求這些檔案
• 確認沒有重新導向規則擋住圖示請求
• 確認 HTTPS/HTTP 一致（沒有混合內容警告）

如果是伺服器問題，聯絡主機商或檢查伺服器設定檔。

6. 在不同瀏覽器裡測

有時一個瀏覽器不顯示，別的卻正常：

• 在 Chrome、Firefox、Safari、Edge 裡測
• 檢查手機瀏覽器（iOS Safari、Chrome Mobile）
• 確認書籤和瀏覽紀錄裡也能看到圖示
• 桌面和手機檢視都測一下

如果只在特定瀏覽器不顯示，查該瀏覽器的要求和已知問題。