什麼是多尺寸網站圖示產生器？

上傳一張圖片，或輸入 1 到 3 個字母或一個表情，即可取得從 16×16 ICO 到 1024×1024 App Store 圖示的所有標準尺寸，外加一份可縮放的 favicon.svg。包含 Apple Touch、Android Chrome、MS 磚塊和 Safari 釘選分頁。逐個下載或打包為 ZIP 一次取得。

你可以從自己的 logo 開始，也可以用幾個字母或一個表情，搭配自訂顏色與字型快速做出圖示。生成器會輸出 17 個獨立 PNG 檔，涵蓋傳統 favicon 尺寸(16、32、48、64、96、128、256)、Apple Touch 圖示(152、167、180)、1024 的 App Store 圖示、Android Chrome(192、384)、MS Tile(144、150、310)與 512 PWA。可依平台篩選網格、選擇方形、圓角或圓形形狀，並在下載前對照淺色與深色分頁檢查 favicon。每個 ZIP 還會附上多解析度 favicon.ico、一份可縮放的 favicon.svg、可直接貼上的 HTML 片段以及在 Android 尺寸啟用 maskable purpose 的 manifest.json；填寫應用程式名稱與簡稱即可讓它作為 PWA 安裝。

使用方法

1. 上傳一張高解析度的正方形圖片（至少 512×512 像素）作為來源，或切換到文字模式輸入 1 到 3 個字母或一個表情，立刻產生一個。
2. 在格狀檢視中查看所有產生的尺寸，根據需要的平台勾選或取消勾選。
3. 可單獨下載任一尺寸,也能單獨下載多解析度 favicon.ico,或點「全部下載」取得內含所有勾選尺寸、ICO 包、HTML 片段與 manifest 的 ZIP。

何時使用

• 網站上線時，需要在所有瀏覽器與系統上顯示完整的favicon。
• 品牌改版:用新logo重新產生所有PWA和主畫面圖示。
• 新增加到主畫面功能時,讓Android能正確算繪maskable圖示。

結果

一家網頁公司為客戶品牌更新上傳了新Logo，立即取得12種尺寸，涵蓋桌面、iOS Safari、Android Chrome、Windows磚塊和PWA清單圖示，直接可用。

常見問題

原始圖片至少要多大尺寸？

至少512×512像素，正方形，logo置中並留少量邊距。小於這個尺寸放大到512 PWA圖示會變模糊。最好用向量檔(SVG匯出1024像素PNG)作為原始檔。

為什麼同時需要PNG和ICO兩種favicon？

現代瀏覽器透過 link rel='icon' 載入多種尺寸的 PNG，並越來越偏好單一可縮放的 SVG favicon。.ico 檔則仍是舊版 Windows 瀏覽器、部分主機商與釘選網站行為所需。本工具三種都會輸出:現代尺寸的 PNG、一份可縮放的 favicon.svg，加上一份內含 16、32、48px 三組畫面的 favicon.ico。

什麼是maskable圖示？為什麼Android需要它？

Android會依啟動器把主畫面圖示裁切成圓形、四邊圓角或圓角矩形。maskable圖示在中心保留約80%的安全區域，logo關鍵部分永遠不會被切掉。建議在原始圖片四周加約10%的留白。

產生的檔案要放在哪裡？

把所有PNG放進網站的public根目錄(或/static),把HTML片段複製到頁面head中,並引入manifest.json。Apple Touch和favicon連結放在HTML head裡,PWA圖示由manifest引用。

為什麼提供背景色和內邊距選項？

透明logo在瀏覽器分頁裡看起來沒問題,但Android或iOS加上自己的圓角矩形底色後位置可能很奇怪。在工具裡加一個純色背景再加8-12%內邊距,可以讓磚塊在各啟動器裡呈現一致。

相關工具