什麼是圖示製作器？
圖示製作工具讓您為應用程式、網站和網頁圖示建立簡潔專業的圖示。在網格畫布上組合形狀、字母和顏色，還能為底色加上雙色漸層，然後以多種尺寸（16×16 到 512×512）匯出 PNG、SVG、多尺寸 .ico，或一鍵打包完整的 favicon ZIP。
底圖可選圓形、方形或圓角方形,搭配自訂的背景色和前景色,中央疊上一個字母或一個內建符號(打勾、星星、箭頭、愛心、加號)。微調字級和位移讓圖形置中,再一鍵匯出六種標準尺寸,從 16×16 的網站 favicon 到 512×512 的 PWA 圖示都能搞定。
使用方法
- 第一步 — 選擇一個基本形狀（圓形、方形、圓角方形）並設定背景顏色。
- 第二步 — 新增字母、符號或簡單形狀作為前景圖層。調整前景顏色、大小和位置。
- 第三步 — 在多種尺寸下預覽效果，然後匯出 PNG（16、32、48、128、256、512 像素）、SVG、.ico，或一鍵打包完整 favicon ZIP，連同可貼上的 HTML 代碼片段一併取得。
何時使用
- 做業餘專案時要替網站做 favicon,不想開 Figma 也不想花錢買圖示包。
- 原型階段替 Android 或 iOS 應用做暫時占位圖示,正式圖等美術完成。
- 替個人網站或 GitHub 頭像做一個帶首字的品牌色塊。
結果
一位開發者為待辦事項應用程式製作網頁圖示：藍色圓角方形背景（#3B82F6）搭配白色勾選符號，匯出 32×32 PNG 用於瀏覽器分頁和 512×512 PNG 用於 PWA 資訊清單。
常見問題
- 網站 favicon 到底需要哪些尺寸?
- 至少一張 32×32 PNG 給桌面瀏覽器分頁,加一張 180×180(或 192×192)給 iOS 主畫面和 Android 捷徑。若是 PWA,還要 512×512 給 manifest。「匯出全部尺寸」按鈕可以一次產出整套。
- 匯出 SVG 還是 PNG?
- SVG 縮放永遠清晰,適合在 App 內多種尺寸使用的圖示,例如側邊欄 logo。PNG 是 favicon、應用程式商店、任何不接受向量格式的平台所必需。匯出選單兩種都提供。
- 可以用自己的圖片或符號,不只內建那幾個嗎?
- 可以。把疊加方式切到「圖片」模式,上傳 PNG、JPG、SVG 或 WebP——圖片會依你選的形狀裁切,匯出前還能縮放、移動和旋轉。想要簡單標記,「字母」模式也接受任意單個字元,包括貼上的表情符號。要做完整自家 logo,直接傳透明 SVG 並把背景設為透明即可。
- 為什麼匯出小尺寸時字母看起來沒置中?
- 字體的視覺中心和幾何中心不一定相同。有下加部的字母(g、p、y)或較高的大寫,要稍微位移一兩個像素才顯得平衡。匯出前用 X 位移和 Y 位移滑桿微調即可。
- 圓角方形和 iOS、Android 系統的形狀一致嗎?
- 這是一個通用的圓角方形,接近 iOS 樣式。Android(圓形、squircle、水滴形)和 iOS 都會對圖示做自適應遮罩裁切,所以設計時按滿版輸出即可,系統會以當前形狀自行裁切。