F
Favicon.pub

Favicon 檢查器

檢查網站的 Favicon 配置是否完整，包括各種格式和尺寸的圖標文件。輸入要檢查的網站網址：

全面檢查

檢查網站的所有 favicon 檔案，包括各種格式和尺寸

兼容性檢測

驗證不同平台和裝置的 favicon 兼容性

優化建議

提供詳細的優化建議和最佳實踐指導

Favicon Checker 是做什麼的？

這款免費工具檢測一個網站的 favicon 設定是否完整。它會檢查經典 favicon 檔案、Apple 觸控圖示、Web 應用程式清單和常見 meta 標籤，並標出任何缺失或設定錯誤的項目。

適用於任何公開網站：輸入網域或 URL，立即取得一份報告——哪些 favicon 檔案已存在、哪些還需要補。

檢測器會發現的問題
  • 缺少 favicon – 找不到 favicon.ico 或 PNG 圖示
  • 尺寸錯誤 – 檔案尺寸與瀏覽器預期不符
  • 連結失效 – favicon 檔案回傳 404 或載入失敗
  • 缺少 apple-touch-icon – 沒有 iOS 主畫面圖示
  • 缺少 PWA 圖示或 Web 應用程式清單
如何使用 Favicon Checker
  1. 輸入要檢測的網站 URL。
  2. 點擊 Check，等待幾秒。
  3. 逐區查看結果：Classic Favicon、Touch Icons、Web App Manifest 和 Meta Tags。
  4. 修復所有標記為錯誤的項目，然後再次檢測。
檢測通過後，在各瀏覽器逐一驗證

檢測器確認的是檔案與 HTML 正確無誤——但每個瀏覽器快取圖示的方式不同。用這份逐項清單驗證新圖示真正生效。

  • Chrome 與 Edge：兩者共用 Chromium 圖示快取。在網址列開啟 chrome://favicon/https://your-site.com 檢視快取圖示；若仍是舊圖，用強制重新整理（Ctrl+Shift+R）或無痕視窗強制重新擷取。
  • Firefox：快取最激進，一個圖示可留存數天。用帶 ?v=2 之類參數的圖示網址在隱私視窗開啟以繞過快取，或在 設定 → 隱私與安全 → 快取的網頁內容 清除。
  • Safari（macOS）：自 14 版起才在標籤頁顯示圖示，且忽略 ?v= 參數。用新的隱私視窗測試，或在重新檢查頁面後透過 Safari 選單 → 清除記錄 清理。
  • iOS 主畫面：apple-touch-icon.png 只在「加入主畫面」當下擷取。刪除舊捷徑後重新加入——只改檔案永遠不會更新既存圖示。
  • Google 搜尋結果：搜尋結果裡的圖示來自索引副本而非瀏覽器快取。修改後請在 Google Search Console 重新提交首頁索引，通常數天內完成更新。
相關工具
Favicon 格式說明

經典格式

favicon.ico

傳統ICO格式，相容所有瀏覽器

favicon.png

現代PNG格式，支援透明背景

favicon.svg

向量格式，支援暗黑模式

行動裝置

Apple Touch Icon

iOS 裝置主畫面圖標

Android Chrome

Android PWA 圖標

Web App Manifest

PWA 配置檔案

Complete Configuration Example

<!-- Basic Favicon -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-48x48.png" sizes="48x48">

<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- Web App Manifest -->
<link rel="manifest" href="/site.webmanifest">

<!-- Android Chrome Icon -->
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/android-chrome-512x512.png" sizes="512x512">

<!-- Meta Tags -->
<meta name="theme-color" content="#ffffff">
<meta name="application-name" content="Your App Name">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
常見問題

為什麼需要多種格式的 Favicon？

不同的瀏覽器和裝置支援不同的格式和尺寸。提供多種格式可以確保在所有平台上都能正確顯示圖標。

ICO 格式還有必要嗎？

雖然現代瀏覽器都支援 PNG 格式，但 ICO 格式仍然是最相容的選擇，特別是對於舊版瀏覽器。

什麼是 Web App Manifest？

Web App Manifest 是一個 JSON 檔案，定義了 PWA（漸進式 Web 應用）的配置資訊，包括圖標、名稱、主題色等。

如何優化 Favicon 的載入速度？

使用適當的檔案大小，避免過大的圖標檔案。ICO 檔案應該包含多個尺寸，PNG 檔案應該進行壓縮優化。