ICO 圖標雖小，卻是軟體品牌的「臉面」。本教程展示如何用 Illustrator 純矢量流程繪製軟體界面圖標，並解決多尺寸適配、像素銳利度、透明通道等工程化難題。

ICO 圖標規格速查表

尺寸	用途	設計要點
16×16	瀏覽器標籤/收藏夾	極簡輪廓，無細節，強對比
24×24	工具欄/快速啟動	保留核心識別特徵
32×32	桌面圖標/任務欄	標準細節層級
48×48	資源管理器大圖標	豐富細節、光影
64×64	高 DPI 系統	精細質感
128×128	Mac/Retina/應用商店	完整藝術表現
256×256	Vista+/高解析度	PNG 壓縮存儲於 ICO 容器

矢量母版繪製原則

1. 以最大尺寸 (256px) 為母版，所有細節在大尺寸下完成
2. 圖層結構化：背景/主體/高光/陰影/細節/文字分層命名
3. 全局色板：主色/輔助色/高光色/陰影色建立全局色塊，一鍵換色
4. 像素預覽模式 (Alt+Ctrl+Y)：隨時檢查邊緣銳度、抗鋸齒情況
5. 避免細線 < 0.5pt：小尺寸下會斷裂/消失，關鍵線條做粗或簡化

多尺寸導出自動化工作流

方法一：畫板導出（推薦）

1. 建立 7 個畫板，分別對應 7 個標準尺寸
2. 將母版藝術圖複製到每個畫板，按比例縮放（Object > Transform > Scale，勾選 Scale Strokes & Effects）
3. 針對小尺寸畫板手動微調：簡化細節、加粗關鍵線、調整間距
4. File > Export > Export for Screens / Export As > 選擇 PNG 格式、勾選「Use Artboards」
5. 第三方工具（如 ICOConvert、IconWorkshop、在線 ICO 生成器）將 7 張 PNG 打包為單一 .ico 文件

方法二：腳本批量導出

使用「Export Artboards to PNG」腳本或自定義 JSX 腳本，一鍵完成：縮放 → 像素對齊 → 命名 → 輸出 → 打包 ICO。

關鍵技術細節

• 透明背景：View > Show Transparency Grid (Shift+Ctrl+D) 確認透明區域
• 銳利邊緣：Object > Make Pixel Perfect (Ai 2017+) / 像素預覽下手動對齊
• 色彩一致性：sRGB IEC61966-2.1 色彩空間，嵌入 ICC 配置文件
• 檔案大小優化：PNGOUT / OptiPNG 壓縮，256px 圖層用 PNG 而非 BMP 存儲於 ICO

進階：動態/狀態圖標擴展

• 懸停/按下/禁用/通知徽章等狀態變體
• 同一矢量母版通過外觀面板非破壞性切換：色相偏移、亮度調整、描邊顏色變更
• 導出套裝：基礎態 + 4-6 個狀態變體，命名規範：icon_name_state@size.png

ICO 製作的核心矛盾是「矢量無限縮放」vs「像素級精準控制」。解決之道：矢量母版保真度 + 針對性像素級微調 + 自動化導出管線。把這套流程標準化，你就擁有了專業圖標交付能力。