網站圖示的現代標準與重要性
在現代網頁開發中，網站圖示（Favicon）已不僅僅是瀏覽器分頁上一個 16 × 16 像素的微小標誌。隨著流動裝置與漸進式網頁應用程式（PWA）的普及，網站圖示承載了品牌識別與用戶體驗的重要角色。一個完整的網站圖示包需要支援多種不同的裝置與平台，包括傳統的桌面瀏覽器分頁、Apple 裝置的 iOS 主畫面（Apple touch icons），以及 Android 系統與 PWA 所需的圖示。
為了滿足這些不同平台的需求，開發人員需要準備多種尺寸與格式的圖示檔案。本工具旨在簡化此流程，只需提供一張來源圖片，即可自動轉換並打包成符合現代標準的完整圖示包，並提供可直接部署的 HTML 程式碼。
支援的輸入格式與參數設定
本工具支援上傳最大 50 MB 的圖片檔案，接受的格式包括 PNG、JPG 及 SVG。在處理輸入圖片時，系統提供以下設定選項以確保輸出效果符合預期：
1. 尺寸與解析度建議
- SVG 向量圖：若來源圖片為 SVG 格式，系統會將向量圖本身納入圖示包中，確保圖示在任何尺寸下都能保持絕對銳利。
- 點陣圖（PNG/JPG）：建議使用至少 512 × 512 像素的圖片。若來源圖片尺寸較小，系統會顯示警告訊息：「來源圖片較小 (
{w}×{h}px)，大尺寸圖示可能模糊。建議用 512 × 512 以上的圖片或 SVG。」 雖然工具仍會處理，但強行放大可能會導致大尺寸圖示顯得鬆散或模糊。
2. 非正方形圖片的處理方式
由於所有輸出圖示皆為正方形，若上傳的來源圖片非正方形，用戶可選擇以下兩種適應模式：
- 完整顯示（Fit / pad）：完整保留畫面，將整張圖片置中顯示，並在四周加上留白。
- 裁切填滿（Fill / crop）：讓圖片鋪滿整個正方形，超出邊緣的部份會被裁切掉。
3. 背景設定
- 透明：不設背景色。透明背景非常適合用於瀏覽器分頁圖示。
- 顏色：用戶可自訂背景顏色。由於 iPhone 與 iPad 的主畫面會將圖示的透明區域自動渲染為黑色，因此若預期訪客會將網站加至 iOS 主畫面，選擇實色背景會比透明背景更為穩妥。
輸出檔案清單與規格
產生完成後，工具會提供一個 ZIP 壓縮檔供下載，其中包含以下檔案：
| 檔案名稱 | 格式與尺寸 | 主要用途與說明 |
|---|---|---|
favicon.ico |
包含 16、32、48 像素 | 經典瀏覽器分頁圖示，單一檔案內嵌三種尺寸。 |
favicon-16x16.png |
PNG (16 × 16 px) | 用於現代瀏覽器的分頁圖示。 |
favicon-32x32.png |
PNG (32 × 32 px) | 用於現代瀏覽器的分頁圖示。 |
apple-touch-icon.png |
PNG (180 × 180 px) | 用於 iPhone 及 iPad 主畫面的圖示。 |
android-chrome-192x192.png |
PNG (192 × 192 px) | 用於 Android 裝置及可安裝的網頁應用程式。 |
android-chrome-512x512.png |
PNG (512 × 512 px) | 用於 Android 裝置及可安裝的網頁應用程式。 |
site.webmanifest |
JSON 文字檔 | 一個小巧的文字檔，列出大圖示的配置資訊，告訴裝置圖示的位置。 |
| 向量圖檔 | SVG（僅限 SVG 輸入） | 若以 SVG 開始，會保留向量圖本身以供現代瀏覽器使用。 |
部署與安裝指南
要將產生的圖示應用到網站中，請按照以下步驟操作：
- 上傳檔案：下載並解壓 ZIP 檔案，將所有圖示檔案（包括
site.webmanifest）上傳至網站的根目錄，確保可以透過/favicon.ico直接存取該檔案。 - 加入 HTML 程式碼：複製工具產生的 HTML 程式碼片段，並將其貼到網站每個網頁的
<head>標籤內。瀏覽器與流動裝置在載入網頁時，會自動根據自身規格挑選最合適的圖示尺寸進行顯示。
本機處理與私隱說明
本工具採用瀏覽器本機處理技術。當你選擇並載入圖片時，所有的圖示生成、尺寸裁切與 ZIP 打包程序均直接在你的瀏覽器本機完成，圖片不會上傳到 BroBroGo 伺服器。
常見問題
圖示包裡有哪些檔案？
包含 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> 裡。瀏覽器會自動挑選合適的尺寸。