Favicon 檢查器
檢查網站的 Favicon 配置是否完整,包括各種格式和尺寸的圖標文件。輸入要檢查的網站網址:
全面檢查
檢查網站的所有 favicon 檔案,包括各種格式和尺寸
兼容性檢測
驗證不同平台和裝置的 favicon 兼容性
優化建議
提供詳細的優化建議和最佳實踐指導
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 檔案應該進行壓縮優化。