2026 年 favicon 尺寸指南：品牌真正需要哪些檔案

發布於 2026年8月7日 · 更新於 2026年8月7日 · 5 分鐘閱讀

大多數品牌都不該只準備一個 favicon 檔案。2026 年更實用的組合是：一個包含多尺寸回退的 favicon.ico、一個 32x32 PNG、一個 180x180 的 Apple touch icon，以及在網站可安裝時準備 192x192 和 512x512 的 manifest 圖示。這樣同一個 logo 才能同時對應瀏覽器分頁、Google Search、iOS 主畫面儲存與類 app 安裝場景。

在 2026 年 7 月 6 日檢查 kitnex.ai 和現有 Kitnex 部落格後，可以看到站點已經把 prompt、mockup、配色、檔案格式、商用授權與上線清單說得很完整，但仍缺少部署層的說明：當 logo 已經選定後，應該如何拆成使用者會在分頁、搜尋結果、捷徑與主畫面裡真正看到的小圖示組合。

核心重點

• Google Search 只接受每個站點一個方形 favicon，至少 8x8，並建議大於 48x48。
• iOS 主畫面儲存依賴 apple-touch-icon，而不是只看 rel=icon。
• 可安裝網站更適合同時提供 manifest 圖示，必要時再補一個 maskable 圖示。
• 重點不是多匯出幾個檔案，而是確保符號在極小尺寸下仍然可讀。

favicon 應該做多大

Google 目前要求 favicon 必須是方形，至少 8x8 像素，並建議使用大於 48x48 的檔案，才能在不同表面上維持清晰。它也只支援每個站點或 hostname 一個 favicon。所以與其做很多變體，不如先保證圖形本身足夠穩定清楚。對多數團隊來說，真正可上線的答案不是單一 PNG，而是一組瀏覽器小尺寸回退、一個 Apple touch icon 與一組 manifest 圖示。

• Google 最低要求：方形，至少 8x8。
• 更實用的清晰度目標：大於 48x48。
• 基礎組合：favicon.ico + Apple touch + manifest。
• 圖形語言應一致，只調整檔案尺寸。

為什麼一個檔案不夠

HTML 允許宣告多個 rel=icon 檔案，瀏覽器會依據類型與 sizes 挑選合適版本；而 iOS 對 Web Clip 不使用 rel=icon，而是尋找 apple-touch-icon。Apple 文件也列出 152x152、167x167、180x180 這類 touch icon 尺寸。這代表同一個品牌符號需要按場景拆分，而不是把所有期待都放在單一圖示上。

• 瀏覽器分頁與書籤：rel=icon。
• Google Search：從首頁讀取站點級 favicon。
• iOS 主畫面儲存：apple-touch-icon。
• 可安裝網站：manifest 圖示與 maskable 版本。

大多數品牌該準備的檔案集

可以先從 favicon.ico 開始，內含常見的小尺寸回退，例如 16x16、32x32、48x48；再補一個 32x32 PNG 給現代瀏覽器；接著準備 180x180 的 apple-touch-icon 給 iPhone 主畫面使用，最後加上 192x192 與 512x512 的 manifest 圖示對應安裝與 splash。這也正好補上 Kitnex 既有檔案格式文章沒專講到的部署層。

• favicon.ico：瀏覽器與舊場景回退。
• favicon-32x32.png：現代分頁 raster 版本。
• apple-touch-icon.png 180x180：iPhone 主畫面。
• icon-192x192.png：常見安裝尺寸。
• icon-512x512.png：更大系統表面。
• 可選 maskable-icon-512x512.png：更適合 Android 式裁切。

什麼時候要加 maskable 圖示

MDN 說明 manifest 圖示可以設定 any、maskable、monochrome 等 purpose；web.dev 則指出關鍵圖形應放在中央安全區，半徑約為圖示寬度的 40%，外圍 10% 可能在部分平台上被裁掉。這代表你不該直接把完整字標硬縮小，而是應該提早準備一個更精簡的 symbol 版本。

• 可安裝場景要優先準備 maskable。
• 核心圖形放在中央安全區。
• 避免長文字、細線與低對比細節。
• 在淺色與深色背景下都預覽一次。

上線前如何測試 favicon 資產

Google 要求 Googlebot-Image 能抓到 favicon 檔案，Googlebot 能抓到首頁，並提醒重新抓取可能需要幾天到幾週。因此最穩妥的方式是讓圖示放在穩定路徑、從首頁 head 正確引用，並避免上線後頻繁更名。接著做真實測試：打開瀏覽器分頁、把網站存到 iPhone 主畫面、檢查 Chrome 或 Android 的安裝流程，再把圖形縮到 16 到 32 像素去看。

• 一起檢查 head 標籤與 manifest。
• 在 iPhone 主畫面實際儲存並查看。
• 如果網站可安裝，就檢查安裝畫面。
• 在 16 到 32 像素、深淺介面裡都測一次。
• 上線後盡量固定生產檔名。

常見問題

參考來源

• Define a favicon to show in search resultsGoogle Search Central
• Links - HTML StandardWHATWG
• icons - Web app manifestMDN Web Docs
• HTML attribute: relMDN Web Docs
• Configuring Web ApplicationsApple Developer
• Adaptive icon support in PWAs with maskable iconsweb.dev

繼續了解