Electron 圖示生成器:一張母版,全平臺交付
一個 Electron 應用要發 macOS、Windows 和 Linux 三個平臺,每個平臺存放圖示的方式都不同:應用包裡是 .icns,Windows 可執行檔案裡是 .ico,Linux 用 PNG。這個 Electron 圖示生成器從一句話畫出 1024px 母版,在 Dock 尺寸下檢查可讀性,留給 electron-builder 一張乾淨原始檔。
用文字生成的桌面應用圖示
為桌面應用畫的圖示:在 Dock 欄、工作列和安裝對話方塊裡都立得住的單個標記,全部來自一句話提示詞。
一個 Electron 應用對圖示的全部要求
electron-builder 把整件事壓縮成一條約定:在構建資源裡放一張至少 512px 的方形 icon.png(或 icon.svg),打包時它會自動為每個目標平臺完成轉換。難的從來不是轉換,而是拿到一張值得轉換的 1024px 母版:從 512px 安裝器到 32px 工作列都保持清晰。這一步正是這個Electron 圖示生成器用 AI 替你完成的。
build/ 約定負責轉換
electron-builder 自動識別 build/icon.png 或 build/icon.svg,打包時生成各平臺檔案。你要給的只有一張好的方形母版,512px 起步。
Dock 尺寸是裁判
桌面圖示活在 16px 標題欄字形和 512px 視網膜 Dock 卡片之間。每張候選圖都帶小尺寸預覽,讓你挑的是剪影,不只是一張好看的渲染圖。
AI 畫出你缺的那張母版
轉換器只縮放你已有的圖。標記還不存在時,這個生成器用一句話把它畫出來,同一套視覺語言,直接到匯出解析度。
Electron 圖示尺寸:icns、ico 和 Linux PNG 裡各裝了什麼
這些尺寸從來不需要手工逐個做。表格是 electron-builder 從你那張母版推匯出來的清單,把它當作一張 1024px 圖示必須經受住的檢查表。
build/icon.png,唯一源頭
構建資源裡一張至少 512px 的方形 PNG 覆蓋三個平臺;1024px 給最大的 .icns 變體留足餘量。這個生成器匯出的正是這張母版。
Windows:可執行檔案裡的 icon.ico
.ico 打包 16、24、32、48、64、128、256px 裁切,出現在資源管理器、工作列、快捷方式和檔案屬性裡。缺圖或尺寸不夠,正是構建回落預設圖示的常見原因。
macOS:應用包裡的 icon.icns
.icns 打包從 16px 到 1024px 的變體,覆蓋視網膜 Dock 和 Finder。沒提供 .icns 時,electron-builder 會從你的母版渲染。
Linux:按桌面環境給 PNG
Linux 目標引用 PNG 尺寸,典型是 512px 給應用商店,再往下到對話方塊尺寸的一階梯。electron-builder 從同一張母版輸出整套。
三步做出 Electron 應用圖示
從一句話到 electron-builder 想在構建資源裡看到的那一個檔案。
- 1
一句話描述應用
比如「聊天應用圖示,圓潤藍色對話氣泡,深色底,扁平風格」。一個主體,一種形狀語言。桌面圖示要在 Dock 欄裡和原生應用並排被評判,緊湊剪影贏。
- 2
在 Dock 尺寸下評審候選
每張候選圖都帶小尺寸預覽。挑那個 32px 下依然可讀的標記,因為使用者在工作列和視窗切換器裡最先遇到的就是這個尺寸。
- 3
把 1024px 母版放進 build/
匯出 PNG,存為 build/icon.png。下次打包時 electron-builder 自動轉換出 .icns、.ico 和 Linux PNG,不需要單獨的工具。
產出 Electron 圖示的三條路
npm 包、線上轉換器和 AI 生成器最終都指向同一個 build/ 資料夾;差別在母版從哪來,以及你要做幾次手工搬運。這也是 Electron 圖示生成器往前多走一步的原因。
| npm 圖示構建包 | 線上轉換器 | SparkIconAI | |
|---|---|---|---|
| 母版從哪來 | 你在別處設計,工具只負責裁 | 上傳一張已有圖片 | 從文字提示詞生成 |
| 是否輸出平臺全套 | 是,輸出到 build/icons/ | 通常一次一種格式 | 1024px 母版,electron-builder 負責裁 |
| 執行在哪 | 你的 devDependencies 和 CI | 瀏覽器標籤頁 | 瀏覽器標籤頁 |
| 小尺寸判斷 | 沒有,只見全尺寸 | 很少 | 每張候選帶 Dock 和工作列預覽 |
| 改設計 | 回設計工具 | 回原始檔重新匯出 | 改句子重跑 |
| 試錯成本 | 免費,花的是時間 | 免費有限制 | 免費額度起步 |
對比 electron-icon-builder 一類 npm 包、線上圖示轉換器與 AI 圖示生成器在 2026 年的典型形態。三條路線的最終平臺轉換都由 electron-builder 完成;個別工具存在差異。
經受得住 Dock 考驗的 Electron 圖示提示詞
複製一條,換掉主體。好用的桌面圖示提示詞寫清一個主體、一種形狀語言和一個背景決策;平臺檔案是後來推導的,不是在這裡畫。
工具類應用
終端視窗圖示,圓角深色底,綠色提示符字形,扁平風格,32px 可讀
媒體類應用
音樂播放器圖示,漸變底上的黑膠唱片,柔和陰影,無文字
開發者工具
程式碼編輯器圖示,靛藍圓角方塊上的尖括號,扁平幾何風格,透明背景
從母版到打包成品
生成器的終點是母版;electron-builder 接手剩下的事。一個放在約定位置的檔案,替掉一整架圖示資產和維護它們的指令碼。
把母版存為 build/icon.png
buildResources 目錄就是 electron-builder 掃描的約定位置。一張至少 512px 的方形 PNG,命名 icon.png,就是它的全部要求;1024px 覆蓋 macOS 最大的變體。
讓 electron-builder 轉換
打包時它為 macOS 應用包渲染 .icns,把 .ico 打進 Windows 可執行檔案,輸出 Linux PNG。只有需要覆蓋時才去配 win.icon 或 mac.icon 指向自定義檔案。
檢查打包結果
安裝或解包產物,看 Dock 和工作列。Windows 對圖示快取很激進,換品牌後殘留舊圖,多半是系統快取,不是你的構建。
Electron 圖示生成器替你處理的事
從那句話,到躺在 build/ 裡的母版檔案,中間全部由它完成。
直接到匯出解析度
候選圖直接以 1024px 渲染,正是 electron-builder 生成完整 .icns 階梯偏好的尺寸,生成與打包之間沒有放大環節。
每張候選帶小尺寸預覽
Dock 和工作列預覽伴隨每張渲染圖,因為打包後的應用在 32px 被遇見的次數遠早於 512px。
透明或實底背景
Windows 和 macOS 的形狀遮罩各不相同。導透明底,讓每個平臺套自己的遮罩;或烘焙一張圓角底,放哪兒都像故意的。
不離風格的變體
對入圍候選生成變體,調剪影和顏色,視覺語言不動。
生態認識的格式
PNG 和 WEBP 匯出,透明或實底;商店或文件頁要別的裁切,站內縮放工具從母版直接切,不用出站。
桌面與網站共用一個品牌
同一族提示詞餵給站點圖示頁和 favicon 頁,桌面應用和官網共享一個標記。
Related Workflows
Neighboring generators for the jobs around a favicon.
部落格
延伸閱讀
關於圖示、風格與匯出工作流的長文。
Electron 圖示生成器常見問題
尺寸、build/ 約定、npm 路線,以及那個不肯消失的預設圖示報錯。
什麼是 Electron 圖示生成器?
產出 Electron 應用打包所需圖示資產的工具。這個頁面用 AI 生成 1024px 母版並在 Dock 尺寸下預覽;electron-builder 再在打包時從這一個檔案推導 .icns、.ico 和 Linux PNG。
Electron 應用需要哪些圖示尺寸?
一張至少 512px、最好 1024px 的方形母版,存為 build/icon.png。electron-builder 從它渲染 macOS 的 .icns 階梯(16px 到 1024px)、Windows 的 .ico 裁切(16px 到 256px)和 Linux 的 PNG 尺寸。
還需要 electron-icon-builder 這類 npm 包嗎?
如果你的構建走 electron-builder 預設行為,不需要:單個 build/icon.png 或 icon.svg 會被自動轉換。npm 構建包仍然有用的場景,是管道里不跑 electron-builder、必須交給它指定 .ico 或 .icns 的情況,這對 Electron 圖示生成器的工作流來說很少見。
為什麼我的 Electron 應用顯示預設圖示?
日誌會寫「Default electron icon is used, reason: application icon is not set」。常見原因:build/icon.png 缺失、母版低於最小尺寸,或自定義 win.icon 路徑解析不到。修好檔案或路徑再重新構建。
electron-builder 配置裡怎麼設定圖示?
預設優先:build/icon.png 不需要任何配置。要按平臺覆蓋時,mac.icon 指向 .icns 或 512px 以上的 PNG,win.icon 指向 256px 以上的 .ico,linux.icon 指向你的 PNG 路徑。
可以直接生成圖示而不是轉換現有圖片嗎?
可以,這正是這個 Electron 圖示生成器頁面的意義。轉換器假定標記已存在;這裡你描述應用,拿到候選,再把勝出者匯出成 1024px,直接進構建資料夾。
這個 Electron 圖示生成器免費嗎?
免費額度覆蓋最初的生成。每張候選圖渲染消耗一個積分,付費方案提供更大的量和放大能力;定價見上方價格區。
Linux 各發行版自己的圖示主題怎麼辦?
Linux 桌面環境透過圖示主題縮放 PNG,乾淨的 512px 裁切在哪裡表現都好。釋出 electron-builder 輸出的標準套裝,遮罩交給主題處理。
.ico、.icns、.png 哪個最重要?
母版最重要。三個平臺檔案都是同一張方形圖片的推導裁切,把注意力花在一張 32px 下可讀的母版上,所有平臺同時受益。
Windows 在我改版後顯示舊圖示,是構建錯了嗎?
通常不是。Windows 按路徑快取圖示,資源管理器和工作列可能在重新構建後仍保留舊字形。清圖示快取或給可執行檔案改名,新的 .ico 就露出來了。