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 文件應該進行壓縮優化。