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配置文件
完整配置示例
<!-- 基礎 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 圖標 -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- Web App Manifest -->
<link rel="manifest" href="/site.webmanifest">
<!-- Android Chrome 圖標 -->
<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 標籤 -->
<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 文件應該進行壓縮優化。