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 就露出来了。