選擇正確的網站圖示尺寸，對於在各種裝置上呈現清晰、專業的圖示至關重要。這份完整的 網站圖示尺寸指南 涵蓋您在 2026 年所需的所有尺寸——從經典的 16×16 瀏覽器分頁圖示，到 512×512 可遮罩的 PWA 圖示——此外還包含各種格式與最佳實務，確保您的品牌在各平台上都能保持鮮明形象。.
為什麼網站圖示的大小很重要
網站圖示會在各種瀏覽器、作業系統和主畫面中以多種尺寸顯示。由於每個平台都會要求特定的尺寸，因此單一來源檔案無法滿足所有情境的需求。若您僅提供一種尺寸，瀏覽器便會將其放大或縮小——這往往會導致畫面模糊或被裁切，進而削弱您的品牌形象。.
為每個平台提供正確的網站圖示尺寸，可確保圖片以原生解析度呈現，這意味著邊緣清晰、色彩準確，且透明度穩定可靠。本指南列出了所有值得生成的尺寸，並說明各尺寸的適用情境，讓您能自信地發布完整的資源包。.
完整的網站圖示尺寸參考表
下表列出了現代網站在 2026 年應提供的網站圖示（favicon）尺寸、各尺寸所採用的格式，以及使用該圖示的平台。在準備資源包時，請以此表作為唯一的參考依據。.
| 尺寸 | 格式 | 用途 |
|---|---|---|
| 16×16 | ICO / PNG | 經典瀏覽器分頁，相容舊版功能 |
| 32×32 | ICO / PNG | Retina 螢幕上的標準瀏覽器分頁 |
| 48×48 | ICO | Windows 工作列、部分書籤檢視方式 |
| 64×64 | PNG | 高 DPI 顯示器上的瀏覽器網址列 |
| 96×96 | PNG | 桌面書籤與捷徑 |
| 120×120 | PNG | 較舊版本的 Android 主畫面 |
| 152×152 | PNG | iPad 觸控圖示（舊版） |
| 167×167 | PNG | iPad Pro 觸控圖示 |
| 180×180 | PNG | iPhone apple-touch-icon（現行） |
| 192×192 | PNG | Android Chrome 主畫面、PWA |
| 512×512 | PNG | PWA 啟動畫面、可遮罩圖示 |
必須生成的尺寸
雖然上方的完整清單相當詳盡，但一套精簡的清單已足以涵蓋絕大多數使用者。我們的 網站圖示生成器 只需一次上傳，即可生成這個必備套件：
- 16×16 和 32×32—這是標準螢幕和 Retina 螢幕上，桌面瀏覽器分頁最常用的尺寸。.
- 48×48—包含於 ICO 檔案中，用於 Windows 工作列顯示及舊版書籤。.
- 180×180—iOS 要求用於主畫面捷徑的「apple-touch-icon」。.
- 192×192 及 512×512—您在 Web 宣言中宣告的 Android 和 PWA 檔案大小。.
這套資源除了包含適用於現代瀏覽器的 SVG 版本外，幾乎涵蓋了訪客在 2026 年可能使用的所有裝置。您無需手動追蹤每種舊版尺寸——生成器會自動為您整合這些尺寸。.
網站圖示格式比較
檔案大小僅是考量因素之一；檔案格式則決定了相容性與檔案大小。以下比較表彙整了您應一併提供的三種格式：
| 格式 | 決議 | 檔案大小 | 最適合 |
|---|---|---|---|
| ICO | 已修正（多尺寸容器） | 中小型 | 舊版瀏覽器，/favicon.ico 備用方案 |
| PNG | 已修正（每個檔案僅限一種尺寸） | 小型 | 現代瀏覽器、apple-touch-icon、Android |
| SVG | 向量（與解析度無關） | 微小 | Safari、Chrome、支援深色模式的圖示 |
SVG 在 2026 年尤其具有價值，因為它能完美適應任何像素密度，並可包含能自動適應深色模式的媒體查詢。當您上傳向量原始檔時，我們的生成器會自動輸出 SVG 檔案，使其成為您資源包中最具前瞻性的格式。.
各平台專屬的尺寸要求
桌面瀏覽器
Chrome、Firefox、Safari 和 Edge 等桌面瀏覽器會請求 16×16 及 32×32 像素的網站圖示。在 Retina 顯示器上，標籤頁會使用 32×32 像素的版本。 ICO 格式可將這兩種尺寸整合於單一檔案中，因此即使在今天，提供 /favicon.ico 仍是一項良好的做法——它能作為自動的備用方案。.
Apple iOS 與 iPadOS
Apple 裝置在將網站新增至主畫面時，會忽略標準的 favicon 連結。取而代之的是，它們會尋找一個以 rel=”apple-touch-icon” 標示的 180×180 PNG 檔案。 若缺少此檔案，iOS 將使用該頁面的截圖或通用圖示，這不僅顯得不專業，更會破壞在最受歡迎的行動平台上品牌形象的一致性。.
Android 與漸進式網路應用程式
Android 版 Chrome 及 PWA 安裝程式會從網路應用程式的清單檔案中讀取圖示。所需的兩種尺寸分別為 192×192 和 512×512。其中 512×512 的版本亦用於 PWA 的啟動畫面。 對於可遮罩圖示（即能適應不同 Android 圖示形狀的圖示），您應在清單檔案中將 512×512 的 PNG 檔案標記為「purpose」:「maskable」。.
網站圖示尺寸設定的最佳實務
請遵循以下最佳實務，確保您的網站圖示在各種尺寸和平台上都能保持清晰：
- 從大處著手。. 請使用 512×512 或更大的原始圖像進行生成，以確保每次縮放後仍能保持清晰。.
- 可寄送各種尺寸的包裹。. 提供 16、32、48、180、192 及 512 種規格，並搭配 SVG 格式以實現全面覆蓋。.
- 請將 /favicon.ico 保留在根目錄中。. 當沒有連結標籤時，瀏覽器會預設使用此網址。.
- 以 16×16 進行測試。. 如果你的設計在最小尺寸下依然能維持良好效果，那麼無論在什麼尺寸下都會看起來很棒。.
- 在可能的情況下，請使用向量。. SVG 可適應任何解析度，並支援深色模式。.
如何一次生成所有尺寸
若要手動製作所有這些尺寸，將會非常費時費力。我們的免費 網站圖示生成器 只需四個簡單步驟，即可為您處理這項工作：
- 上傳一張 512×512 或更大的正方形原始圖片。.
- 請檢視 16×16、32×32 及 180×180 尺寸的即時預覽。.
- 點擊「建立」以下載一個 ZIP 檔案，其中包含上述所有尺寸與格式。.
- 請將隨附的 HTML 連結標籤和清單複製到您的網站中。.
整個過程不到一分鐘，即可產生一個符合本指南所涵蓋所有平台要求的檔案包。您無需費心記住哪個尺寸該放哪裡——生成器會正確命名每個檔案，並提供相應的連結標籤。.
常見問題
網站的標準網站圖示（favicon）尺寸是多少？
最常見的標準網站圖示（favicon）尺寸為 32×32 像素（用於瀏覽器分頁），並在 ICO 檔案中包含 16×16 像素的備用圖示。 現代網站還應提供 180×180 尺寸的圖示供 iOS 使用，以及 192×192 和 512×512 尺寸的圖示供 Android 及 PWA 使用。.
原始圖片應該是什麼尺寸？
請使用至少 512×512 像素的正方形原始圖片。較大的原始圖片可讓生成器流暢地將圖片縮放至任何所需尺寸，確保您的網站圖示在 Retina 顯示器及高解析度行動裝置螢幕上依然清晰銳利。.
apple-touch-icon 的大小是多少？
目前 apple-touch-icon 的大小為 180×180 像素。iOS 會將此 PNG 圖檔用於主畫面捷徑，並忽略標準的 favicon 連結，因此必須在 HTML 中透過 rel=”apple-touch-icon” 來宣告此圖檔。.
Android 對網站圖示（favicon）有哪些尺寸要求？
Android 版 Chrome 及漸進式網路應用程式（PWA）需要在網路應用程式清單中宣告 192×192 和 512×512 的 PNG 圖示。512×512 的圖示應標記為「可遮罩」，以便 Android 能根據不同的主畫面形狀進行調整。.
我的網站圖標應該使用 SVG 還是 PNG 呢？
兩種格式都用。SVG 能在現代瀏覽器中完美縮放並支援深色模式，而 PNG 則能確保與 iOS、Android 及舊版瀏覽器的相容性。同時提供這三種格式——ICO、PNG 和 SVG——可確保您的網站圖示在任何地方都清晰鮮明。.
尺寸如何影響效能與載入速度
提供正確尺寸的網站圖示（favicon）不僅是視覺上的考量，更會影響網站的載入速度。當瀏覽器請求 32×32 的分頁圖示，而您卻傳送 512×512 的 PNG 檔案時，訪客為這個微小的螢幕元素所下載的位元組數量，遠超過實際所需。 隨著訪客次數增加、頁面載入次數累積，這些浪費的頻寬會不斷累積。透過將每種尺寸的圖檔分別儲存為獨立檔案，並在連結標籤中使用正確的 `sizes` 屬性進行宣告，您就能讓瀏覽器自動選擇最小的合適檔案。 其結果是「首次繪製」速度更快，且頁面結構更精簡，這對於使用者體驗以及 2026 年的「核心網路指標」都至關重要。此生成器會透過精確命名及設定每個檔案的大小，為您處理這項優化工作。.
立即產生所有尺寸的網站圖示
您無需再記住每個平台所需的尺寸。只需將一張正方形圖片上傳至我們的生成器，即可下載一個完整的套件，其中包含本指南中所述的所有尺寸與格式，以及可直接貼上的 HTML 程式碼和清單檔案。 這是 2026 年滿足所有瀏覽器與裝置需求的最簡便方法。無論您重視 Retina 螢幕平板電腦上的畫質清晰度、iOS 主畫面上的簡潔捷徑圖示，還是完美的 PWA 啟動畫面，一次下載即可滿足所有需求。.
