網站圖示在現代網頁中的角色與重要性
網站圖示（Favicon）是建立網站品牌識別度不可或缺的元素。它不僅顯示在瀏覽器的分頁標籤上，還會出現在書籤選單、歷史紀錄、行動裝置的主畫面，以及漸進式網頁應用程式（PWA）的啟動畫面上。
在多螢幕與多平台的時代，單一尺寸的圖示已無法滿足所有裝置的需求。不同的作業系統與瀏覽器需要特定的圖示格式與尺寸，以確保圖示在任何解析度下都能清晰呈現。本工具能將單一來源圖片轉換為符合現代網頁標準的完整圖示包，並提供對應的 HTML 程式碼，協助開發者快速完成部署。
支援的輸入格式與參數設定
為了產生高品質的圖示，本工具針對輸入的圖片設有特定的規格與處理規則：
- 支援格式：僅支援 PNG、JPG 和 SVG 格式的圖片。若上傳其他格式，系統會顯示「僅支援 PNG、JPG 和 SVG 圖片。」。
- 檔案大小限制：上傳的圖片檔案大小上限為 50 MB。若超出此限制，系統將顯示「檔案超過 50 MB，請換一張小一點的來源圖片。」。
- 建議尺寸：若使用 PNG 或 JPG 等點陣圖格式，建議來源圖片尺寸至少為 512 × 512 像素。若圖片低於此尺寸，系統會載入並顯示「來源圖片較小(
{w}×{h}px)，大尺寸圖示可能模糊。建議用 512 × 512 以上的圖片或 SVG。」。 - 非正方形圖片處理：由於所有輸出圖示皆為正方形，若來源圖片非正方形，使用者可選擇以下兩種適應方式：
- 完整顯示：完整保留畫面，置中顯示，四周留白。
- 裁切填滿：畫面鋪滿正方形，超出的邊緣會被裁掉。
- 背景設定：
- 透明：無背景色，適合大多數瀏覽器分頁。
- 顏色：使用者可自訂背景顏色。由於 iOS 裝置會將 Apple touch icon 的透明區域填滿黑色，因此若需兼顧 iPhone 主畫面顯示，建議設定背景顏色。
輸出檔案清單與尺寸規格
產生完成後，工具會將所有圖示打包為一個 ZIP 檔供使用者下載，其中包含以下檔案：
| 檔案名稱 | 格式與尺寸 | 主要用途與說明 |
|---|---|---|
favicon.ico |
包含 16、32、48 像素 | 經典分頁圖示，相容於舊版瀏覽器。 |
favicon-16x16.png |
PNG，16 × 16 像素 | 現代瀏覽器的標準分頁圖示。 |
favicon-32x32.png |
PNG，32 × 32 像素 | 高解析度螢幕的分頁圖示。 |
apple-touch-icon.png |
PNG，180 × 180 像素 | 提供給 iPhone 與 iPad 主畫面書籤使用。 |
android-chrome-192x192.png |
PNG，192 × 192 像素 | Android 裝置與 PWA 整合使用。 |
android-chrome-512x512.png |
PNG，512 × 512 像素 | Android 裝置與 PWA 啟動畫面使用。 |
site.webmanifest |
JSON 格式文字檔 | 告訴裝置圖示在哪裡，列出大圖示的配置資訊。 |
| 來源 SVG 檔案 | SVG 向量格式（僅限來源為 SVG 時） | 向量圖示本身，確保在現代瀏覽器中任何尺寸都清晰。 |
瀏覽器本機處理與隱私說明
本工具採用瀏覽器端即時處理技術。當你選擇並載入圖片時，所有的圖示轉換、裁切、縮放與 ZIP 打包流程，皆直接在你的瀏覽器本機中完成，圖片資料不會上傳到 BroBroGo 伺服器。
在操作過程中，系統可能會根據圖片狀態顯示以下提示或錯誤訊息：
- 載入時顯示圖片寬高，格式如「
{w}×{h}px」。 - 檔案無法解析時顯示：「無法把這個檔案當作圖片開啟，它可能已損壞、為空,或者根本不是圖片。」。
- SVG 語法錯誤時顯示：「無法讀取這個 SVG，請確認檔案是有效的 SVG 文件。」。
- 產生失敗時顯示：「產生失敗，請換一張圖片試試。」。
安裝與部署指南
要在網站上啟用產生的圖示，請按照以下步驟進行部署：
- 下載並解壓縮：點擊「下載 ZIP」按鈕，取得完整的圖示壓縮包。
- 上傳至根目錄：將解壓縮後的所有檔案（包含
favicon.ico、各尺寸 PNG 圖示以及site.webmanifest）上傳至你網站的根目錄，確保能透過yourdomain.com/favicon.ico直接存取。 - 置入 HTML 程式碼：複製工具產生的 HTML 程式碼片段，並將其貼到網站每個網頁的
<head>標籤內。瀏覽器在載入網頁時，會根據裝置解析度與平台需求，自動挑選最合適的圖示檔案進行顯示。
常見問題
圖示包裡有哪些檔案?
包含 16、32、48 像素三種尺寸的 favicon.ico，16、32、180、192、512 像素的 PNG 圖示，以及列出大圖示的 site.webmanifest。如果來源是 SVG，向量圖示本身也會一併放入。所有檔案打包成一個 ZIP。
來源圖片要多大才合適?
最理想的是 SVG——每個尺寸都直接由向量繪製，16 像素也清晰銳利。PNG 或 JPG 建議至少 512 × 512，更小的圖片放大後會模糊。
背景該用透明還是顏色?
分頁圖示用透明沒問題;但 iPhone、iPad 的主畫面會把透明區域顯示成黑色——如果訪客可能把你的網站加到主畫面，建議選一個背景色。
圖片不是正方形會怎樣?
圖示是正方形的，但你的圖片絕不會被拉伸變形。預設把畫面完整置中、四周留白;切換到「裁切填滿」則會裁掉長邊。
這些檔案要放到網站的什麼位置?
上傳到網站根目錄，讓 favicon.ico 能透過 /favicon.ico 存取，再把產生的程式碼貼到頁面的 <head> 裡。瀏覽器會自動挑選合適的尺寸。