2026 年的網站圖標（Favicon）尺寸與格式：您的網站實際上需要哪些？
閱讀時間 7 分鐘
搜尋關於「網站圖示」（favicon）的建議，你會發現許多清單要求提供二十多個圖示檔案：針對每一代 iPad 都有一個 PNG 格式的圖示、Windows 磁磚圖片、browserconfig.xml 檔案，以及固定分頁遮罩。其中大部分都是 2014 年的過時做法，適用於已經不再使用或已改回使用標準圖示的平台。 到了 2026 年，你只需要六個圖片檔案、一個資訊檔，以及大約五行 HTML 程式碼。這樣就能涵蓋瀏覽器分頁、書籤、Google 搜尋結果、iOS 主畫面，以及包括已安裝的網頁應用程式在內的 Android 系統。本指南將逐步說明哪些檔案很重要、每個檔案存在的理由、你可以安全刪除哪些檔案，以及如何從單一的品牌標誌產生整個圖示集，而無需安裝任何東西或將你的設計作品上傳到任何地方。
您的圖示實際上會顯示在何處。
Favicon 早已不再僅僅是一種網頁標籤的裝飾。現在，這些小圖標會被應用到各種重要的位置，而且每個位置都有自己偏好的尺寸和格式。
瀏覽器分頁、書籤和瀏覽紀錄會以 16x16 CSS 像素的大小顯示您的圖示，在高解析度螢幕上則會放大至 32x32 像素。Google 會在搜尋結果旁邊顯示網站圖示（favicon），因此如果您的圖示遺失或模糊不清，會讓您的網站看起來不如競爭對手的網站那麼可靠。當有人將您的網站儲存到 iPhone 的主螢幕時，iOS 會使用您的「apple-touch-icon」作為完整的應用程式圖示。在 Android 系統上，Chrome 瀏覽器會使用您的「manifest」圖示來執行相同的任務，如果您的網站可以安裝為網頁應用程式，則 512 像素的圖示將會變成載入時顯示的啟動畫面。
這就是值得我們為之設計的完整清單。Windows 啟動畫面上的應用程式圖示、Safari 瀏覽器中固定標籤頁的圖示，以及數十種舊版 iPad 的螢幕解析度，都不包含在內——後續會再詳細說明。
2026 方案：包含七個檔案，五行 HTML 程式碼。
以下列出了一個正常網站所需的一切。如果一份清單要求您產生比這更多的內容，那表示這份清單內容過多。
這些檔案應該放在您網站的根目錄中（尤其是 `favicon.ico` 檔案）。HTML 程式碼中，在 `<head>` 標籤內，會有幾個連結標籤：一個用於 ICO 檔案，各一個用於兩個 PNG 檔案，一個 `rel="apple-touch-icon"`，以及一個 `rel="manifest"`，指向 `webmanifest` 檔案。
- `favicon.ico`——一個單一的 ICO 檔案，其中包含 16、32 和 48 像素的版本。這是確保相容性的關鍵；後續將詳細說明其為何能繼續使用。
- favicon-16x16.png 和 favicon-32x32.png——這是用於標準螢幕和高解析度螢幕上瀏覽器分頁和書籤工具列的清晰 PNG 格式圖示。
- `apple-touch-icon.png`，尺寸為 180x180 像素——這是 iOS 系統中顯示在主畫面的圖示。目前，這個尺寸適用於所有現有的 iPhone 和 iPad；iOS 系統會根據需要自動調整其大小。
- android-chrome-192x192.png 和 android-chrome-512x512.png——這些圖片檔案來自應用資訊檔（manifest），用於 Android 裝置的主畫面、應用程式切換器，以及安裝時顯示的啟動畫面。
- `site.webmanifest` 是一個小型 JSON 檔案，其中列出兩個 Android 圖示，以及您的應用程式名稱和主題顏色。這是讓 Android 系統能夠正確識別圖示，並使網站能夠被安裝的必要檔案。
- 選用：透過連結標籤，使用類型為 image/svg+xml 的 SVG 網站圖示。它能完美地調整大小，並且可以透過內嵌的媒體查詢來重新調整樣式，以適應深色主題的瀏覽器分頁，但請同時保留 PNG 和 ICO 格式的備用圖示。
為什麼 `favicon.ico` 檔案總是無法被刪除？
ICO 是一種 1990 年代的 Windows 檔案格式，但即使到了 2026 年，捨棄它仍然是一個錯誤。原因在於，瀏覽器、網路爬蟲、RSS 閱讀器以及無數的資料擷取程式，都會依照慣例從您的網站根目錄請求 `/favicon.ico` 檔案，而不會讀取您的 HTML 程式碼——任何網站伺服器日誌都會顯示持續不斷的這些請求。如果檔案遺失，它們會收到 404 錯誤，並且您的圖示將在這些情況下顯示為空白。
這種格式還有一個巧妙之處：單個 .ico 檔案就像一個容器，可以同時儲存多種尺寸的圖檔。一個正確的 favicon.ico 檔案內部會包含 16、32 和 48 像素的圖片，而讀取該檔案的程式會選擇最接近的尺寸，而不是將錯誤尺寸的圖片強制縮放，導致畫面模糊。因此，如果將單張 PNG 圖片轉換為單一尺寸的 favicon.ico 檔案，實際上會降低品質——較小的圖片會即時調整大小，並失去其清晰的邊緣。
因此，實用的做法是：針對所有符合規範的要求，在網站根目錄提供多種尺寸的 `favicon.ico` 檔案；同時，透過連結標籤提供 16 像素和 32 像素的 PNG 檔案，以供現代瀏覽器使用，因為現代瀏覽器更偏好使用這些檔案。
iOS 的陷阱：透明化反而變成了黑箱操作。
apple-touch-icon」具有銳利的邊緣，幾乎每個人都會注意到它。iOS 不會將透明圖示疊加在漂亮的背景上，而是會用純黑色填滿透明區域。如果將圖示以透明背景匯出，在其他地方看起來會很好，但在 iPhone 的主螢幕上，它會變成一個帶有漂浮標記的黑色方塊。
解決方法是在匯出之前，先將圖示壓平，使其置於一個明確的背景顏色之上：可以是白色、您的品牌顏色，或是任何您選擇的顏色。之後，iOS 會自行將圖示的四個角做圓角處理，因此請勿預先對圖示進行圓角處理——如果預先進行圓角處理，圖示會被再次裁切，並且在四個角上會出現深色的陰影。
也要為標誌預留一些空間：因為 iOS 會套用自己的邊緣遮罩，所以如果圖案碰到 180x180 畫布的邊緣，就會被裁剪。將標誌置於大致的中心區域 80% 範圍內是一個比較安全的做法，而且這樣做也能讓標誌在應用程式圖示中看起來更好。
什麼是過時的（從你的腦海中刪除這些想法）
舊版的網站圖標標記雖然很少會造成問題，但它會增加每個網頁的載入時間，並讓網站維護人員花時間尋找沒有人使用的圖片檔案。以下所有內容都可以移除：
- `browserconfig.xml` 檔案以及 `msapplication-TileColor` / `TileImage` 這兩個中繼標籤。這些檔案和標籤曾用於設定 Windows 8 的開始畫面磁磚，以及 Internet Explorer 11 的外觀。但現在它們已經不再使用了。
- `apple-touch-icon-precomposed`。這個設定會抑制 iOS 6 為圖示新增的亮面效果。從 2013 年開始，隨著 iOS 7 的推出，亮面效果就不再出現；因此，您只需要使用簡單的 `apple-touch-icon` 即可。
- 蘋果裝置圖示大小的規格：57、72、76、114、120、144、152。這些規格對應於特定的舊款 iPhone 和 iPad 裝置的螢幕解析度。單一的 180x180 圖示即可適用於所有目前的裝置。
- `rel` 屬性用於指定快捷方式圖示。雖然「shortcut」這個詞彙是 Internet Explorer 瀏覽器獨有的特性，但並非標準。簡單的 `rel` 屬性加上 `icon` 已經可以讓圖示在各種瀏覽器上正常顯示，而且已經有十多年的歷史了。
- Safari 遮罩圖示釘選分頁 SVG 檔案。現代版 Safari 會使用您的一般 favicon 作為釘選分頁的圖示，因此單色遮罩檔案已成為多餘的負擔。
- 為了讓舊版 Chrome 和 Opera 瀏覽器正常運作，請使用 96、128、196 和 228 像素的 PNG 連結標籤。在 Android 系統上，這些連結標籤已被應用程式資訊檔中的圖示取代；在桌面系統上，則不需要這些連結標籤。
設計一款即使在 16 像素下也能清晰可辨的標誌。
格式問題是相對容易的部分。困難之處在於，您的圖示必須能在 16x16 像素的尺寸下正常顯示，否則原本是 256 像素的標誌就會變得模糊不清。以下是一些有助於解決問題的規則。
大幅簡化設計。使用品牌標誌中的圖案，而非文字標誌——除非文字標誌只有一到兩個字母，否則在 32 像素以下時，文字會變得難以辨認。如果您的品牌以文字設計為主，那麼在純色背景上使用單一字母的縮寫標誌，效果會比縮小後的完整品牌標誌更好。
比起細節，更偏好使用大膽的圖形和強烈的對比。細線在小尺寸下會變得不明顯，而微妙的漸層則會變成雜訊。請同時在淺色和深色的工具列中檢視圖示；如果沒有較淺的輪廓、背景色塊或透過「偏好色彩配置」規則來交換顏色的 SVG 版本，深藍色的圖示在深色主題下就會消失。
最後，請以 100% 比例檢視結果，不要在設計工具中進行縮放。以「標籤」大小呈現的渲染圖才是最真實的預覽效果。
從單一的標誌開始，在瀏覽器中完成整個設計。
您不需要使用 Photoshop 或透過命令列輸入 ImageMagick 指令來完成這些操作。FileTinker 的網站圖標產生器只需一張圖片，就能一次性產生上述所有內容：包含 16、32 和 48 像素大小的 favicon.ico 檔案，以及 favicon-16x16.png 和 favicon-32x32.png 檔案，還有一個 180x180 的 apple-touch-icon.png 檔案，該檔案會與背景顏色合併，以避免在 iOS 系統上顯示為黑色，以及 android-chrome-192x192.png 和 android-chrome-512x512.png 檔案，還有一個 site.webmanifest 檔案，用於設定 Android 系統的圖標，以及一個可以直接複製貼上的程式碼片段，其中包含對應的連結標籤。所有內容都會以單一的 ZIP 檔案形式提供，而且整個處理過程都完全在您的瀏覽器中進行——您的網站圖標永遠不會離開您的電腦。
從您擁有的最大、最清晰的商標版本開始；理想情況下，解析度應為 512 像素或更高，因為最大的輸出解析度為 512x512，而將較小的圖像放大會導致圖像模糊。如果原始圖像不是正方形，則生成器會提供「填滿」和「包含」兩種選項：「填滿」會將圖像填滿整個框架，並裁剪超出部分；「包含」則會將整個圖像納入框架內，並用您選擇的背景顏色填滿剩餘區域。為了精確控制寬型商標的哪個部分得以保留，請先使用裁剪工具將其裁剪成正方形，然後將正方形圖像輸入生成器。
即使您的標誌沒有透明度，也請仔細選擇背景顏色——這是 iOS 使用者在您的標誌後方所看到的內容，也是填滿信箱邊框（letterboxing）的區域。接著將壓縮包解壓縮至網站根目錄，將程式碼片段貼入 `<head>` 標籤內，然後部署。如果您只需要一個用於小型專案的快速 .ico 檔案，圖片轉換工具的 PNG 轉 ICO 功能可在幾秒鐘內產生單一尺寸的圖示；但若是用於公開場合，完整的壓縮包多花一分鐘是值得的。