ICON 快速產生小記
Contents
在開發 PWA、網站捷徑或原生行動應用時，最容易被低估的小工作之一，就是產生各平台需要的圖示尺寸。手動縮圖不只耗時，還很容易漏尺寸或把透明背景弄壞，所以我後來都直接找現成工具處理。
這篇把我當時找到的幾個快速工具整理一下，順便補上為什麼不同平台會要求不同尺寸。
為什麼 icon 不能只做一張
不同平台對圖示的要求都不太一樣：
- Android 有不同 density，像 mdpi、xhdpi、xxhdpi。
- iOS 會要求一整組固定尺寸。
- PWA 也會在 manifest 裡宣告多個 icon，讓不同裝置自行挑選。
所以如果只準備一張單尺寸圖片，通常不是顯示模糊，就是有些平台根本不吃。
我當時找到的幾個工具
PWA 圖示
如果是要做 PWA，這種工具很方便，丟一張高解析原圖進去，就能快速產出多個尺寸，省掉手動裁切時間。
iOS 圖示
這類工具通常會幫你把 iPhone、iPad 需要的 icon 一次包好。原本我有看到建議上傳 180px 圖片，但實務上如果原圖夠大、夠乾淨，通常效果會更穩。
Android 圖示
這個算是很常見的 Android 圖示工具，可以順手處理前景、背景和一些簡單效果。
使用時我會注意什麼
1. 原圖品質要先顧好
如果原始圖片本身就模糊，後面不管轉幾種尺寸，效果都不會好。通常我會建議先準備較大的正方形圖檔，再往下縮。
2. 透明背景要先確認
有些 icon 需要透明底，有些平台或設計稿不一定適合透明。這個如果一開始沒確認，最後容易全部重做。
3. 命名與目錄結構別亂掉
工具幫你產出尺寸後，還是要確認輸出的檔名、資料夾結構和專案要求一致，不然最後還是會花時間手動整理。
小結
ICON 產生這件事看起來小，但其實很容易在交付前卡住。對工程師來說，最省時間的方式通常不是自己慢慢縮圖，而是先準備好高品質原圖，再交給對應平台工具一次產生完整尺寸。這樣比較不會在 Android、iOS、PWA 各自的規格上反覆踩雷。