1. 为什么你的Electron应用需要一个“好皮肤”你可能已经用Electron开发了一个很棒的应用功能齐全逻辑清晰。但当你兴冲冲地打包出来准备分享给朋友或用户时却发现桌面上那个图标还是默认的Electron原子图标任务管理器里显示的进程名也是“Electron”。那一刻是不是感觉有点“出戏”就像一个精心设计的商品却贴着一个简陋的包装盒标签。自定义应用图标和进程名称远不止是“美化”那么简单。它关乎品牌识别和用户体验。一个独特、专业的图标能让你的应用在众多软件中脱颖而出让用户一眼就能找到它。而一个清晰的进程名称比如“我的笔记”而不是“Electron”则能让用户在任务管理器或系统监视器中轻松识别你的应用尤其是在需要排查内存或CPU占用问题时这显得尤为重要。我刚开始接触Electron时也忽略了这一点直到有用户反馈说“你们的软件和另一个Electron应用在后台分不清”我才意识到问题的严重性。修改这些信息本质上是在告诉操作系统和用户“这是我的应用它有自己独立的名字和身份。”这个过程并不复杂但细节决定成败。接下来我就把自己踩过的坑和总结的最佳实践一步步分享给你。2. 动手前的准备图标与工具在开始修改配置之前最核心的一步是准备好你的图标文件。这一步没做好后面全是白搭。2.1 图标尺寸为什么必须是256x256或更大原始文章里反复强调图标必须大于等于256x256像素这不是随便说的。Windows系统尤其是Windows 10/11在多种场景下会使用不同尺寸的图标任务栏通常使用24x24或32x32的小图标。桌面快捷方式常用32x32或48x48。开始菜单/大图标视图可能会用到64x64甚至更大的尺寸。文件属性对话框会显示最大的图标版本通常是256x256。如果你只提供一个16x16的小图标系统在需要大图标时只能强行拉伸结果就是模糊、锯齿显得非常不专业。一个.ico文件的神奇之处在于它可以内嵌多个不同尺寸的图标副本。当你把一个包含16x16, 32x32, 48x48, 64x64, 128x128, 256x256等多种尺寸的.ico文件交给系统时系统会根据显示场景自动选择最合适的那一个从而保证在任何地方都清晰锐利。我最初用一个在线的JPG转ICO工具只生成了单尺寸的ICO结果在任务栏上看起来还行但一点开文件属性那个模糊的大图标简直惨不忍睹。所以请务必确保你的源图像素材本身分辨率足够高建议从512x512或1024x1024开始设计这样才能生成高质量的各级缩略图。2.2 图标格式ICO、PNG与ICNS不同平台对图标格式的要求不同Windows: 主要使用.ico格式文件。macOS: 主要使用.icns格式文件。它和ICO类似也是一个包含多种尺寸的容器。Linux: 通常使用.png格式但需要准备多个不同尺寸的PNG文件如256x256.png,128x128.png,64x64.png,32x32.png,16x16.png。对于跨平台应用你需要在配置中为每个平台指定对应的图标文件。好消息是Electron Builder等打包工具能很好地处理这些差异。2.3 工具推荐如何制作一个合格的图标原始文章提到了两个在线网站这里我补充一些更可靠的工具和心得在线转换工具快速上手CloudConvert非常强大的全能格式转换网站支持将PNG、SVG等转换为ICO并允许你选择需要内嵌的尺寸质量很高。ICOConvert专业的在线ICO生成器可以上传一张大图自动为你生成包含所有标准尺寸的ICO文件是我最常用的在线工具之一。专业桌面软件效果最佳GIMP免费开源强大的图像编辑器。你可以安装一个名为“BIMP”的插件批量导出不同尺寸的PNG然后再用其他工具合成ICO。对于设计图标本身GIMP也足够强大。IconSlatemacOS付费制作ICNS和ICO的神器界面直观拖拽即可生成包含所有尺寸的图标文件强烈推荐macOS用户使用。Greenfish Icon Editor ProWindows免费功能非常专业的图标编辑器可以直接绘制和编辑ICO文件内的各个尺寸图层。我的经验是先使用Figma、Sketch或Photoshop设计一个高分辨率的图标例如1024x1024导出为PNG。然后使用ICOConvert这样的在线工具一次性生成Windows用的ICO。对于macOS如果使用IconSlate就很简单如果没有可以搜索“PNG to ICNS”在线转换工具或者使用iconutil命令行工具macOS自带来制作。3. 核心配置实战修改package.json图标准备好了现在就是告诉Electron打包工具如何使用它。所有的秘密都在package.json文件的build配置项里。3.1 修改应用名称productNameproductName这个字段至关重要它决定了安装包和安装目录的名称。应用程序在系统菜单中显示的名称。在Windows任务管理器中显示的进程名称。{ build: { productName: 我的酷炫应用, appId: com.mycompany.myapp, win: { icon: build/icons/icon.ico }, mac: { icon: build/icons/icon.icns }, linux: { icon: build/icons } } }把我的酷炫应用换成你想要的名字。注意appId是类似Java包名的反向域名格式用于系统深层标识你的应用通常修改一次后就不动了而productName则可以更灵活地用于产品营销名称。3.2 指定图标路径如上例所示你需要为不同的平台指定图标路径。路径是相对于项目根目录的。通常的做法是在项目根目录下创建一个build或assets文件夹里面再建一个icons子文件夹把icon.ico,icon.icns以及Linux所需的各种PNG都放进去。对于Linux如果你指定的是一个目录如build/icons打包工具会自动在该目录下寻找256x256.png128x128.png等文件。一个更清晰的项目结构示例你的项目/ ├── package.json ├── build/ │ └── icons/ │ ├── icon.ico (Windows图标) │ ├── icon.icns (macOS图标) │ ├── 512x512.png (Linux图标源) │ ├── 256x256.png │ └── ...其他尺寸 └── src/ └── ...你的源代码3.3 关于“asar”目录与图标引用有时你会看到配置里写的路径是dist/electron/.../icon.ico这通常是因为项目构建流程会把资源文件复制到dist目录。关键在于图标文件必须能在打包时被electron-builder访问到。最稳妥的办法就是把图标放在项目源码目录之外比如上面例子中的build/icons或者在构建脚本中确保图标被复制到了最终资源目录。4. 执行打包与验证效果配置完成后运行你的打包命令。通常命令在package.json的scripts里定义比如scripts: { dist: electron-builder }然后在终端执行npm run dist # 或 yarn dist4.1 打包输出解析打包成功后你会在输出目录默认是dist看到类似下面的结构dist/ ├── 我的酷炫应用 Setup 1.0.0.exe (Windows安装包) ├── win-unpacked/ (绿色免安装版) │ ├── 我的酷炫应用.exe │ ├── resources/ │ │ ├── app.asar (你的代码被打包在这里) │ │ └── icon.ico (图标资源) │ └── ... ├── mac/ │ └── 我的酷炫应用.app (macOS应用包) └── linux-unpacked/ (Linux版)重点验证以下几点安装包/可执行文件名称是否变成了productName桌面快捷方式图标安装后桌面快捷方式的图标是否正确显示开始菜单/启动台在这里看到的图标和名称是否正确任务管理器这是最关键的一步运行你的应用打开任务管理器Windows或活动监视器macOS查看进程名是否已从“Electron”变成了你设置的productName。5. 进阶技巧与疑难杂症排查即使按照步骤操作你可能还是会遇到一些奇怪的问题。这里分享几个我亲身踩过的坑和解决办法。5.1 图标缓存改了图标但系统不更新这是最常见的问题。你换了新图标打包安装后桌面或任务栏上显示的却还是旧图标。这是因为操作系统对图标有缓存。Windows解决方案重启资源管理器在任务管理器中找到“Windows资源管理器”右键“重新启动”。清理图标缓存这是一个更彻底的方法。需要删除隐藏的图标缓存数据库文件。位置通常在C:\Users\你的用户名\AppData\Local\IconCache.db。你可以尝试删除它可能需要先结束explorer.exe进程然后重启电脑或重启资源管理器。网上也有专门的“图标缓存重建工具”可以使用。macOS解决方案运行sudo rm -rf /Library/Caches/com.apple.iconservices.store然后重启Dockkillall Dock。5.2 进程名改了但窗口标题还是“Electron”productName修改的是进程名和安装名称。应用窗口的标题通常由你的代码控制。在创建BrowserWindow时需要设置title属性// 在主进程 main.js 或 main.ts 中 const mainWindow new BrowserWindow({ width: 800, height: 600, title: 我的酷炫应用 - 主窗口 // 在这里设置窗口标题 });或者在网页加载前通过mainWindow.setTitle(‘新标题’)来设置。5.3 打包报错“Cannot find icon file”这意味着你配置的图标路径不对electron-builder在打包时找不到文件。请检查路径是否正确是否相对于项目根目录。文件名和扩展名是否完全匹配注意.ico和.png的区别。图标文件是否真的被提交到了代码仓库或者存在于你的本地目录中。5.4 为不同环境配置不同图标和名称在开发中你可能需要为测试版、正式版设置不同的图标或名称。可以通过环境变量和package.json配置的组合来实现。{ build: { productName: ${PRODUCT_NAME:-我的默认应用}, appId: com.mycompany.${APP_ID:-myapp}, win: { icon: ${WIN_ICON:-build/icons/icon.ico} } } }然后在打包时传入环境变量# Linux/macOS PRODUCT_NAME测试版应用 WIN_ICONbuild/icons/beta.ico npm run dist # Windows (Command Prompt) set PRODUCT_NAME测试版应用 set WIN_ICONbuild/icons/beta.ico npm run dist这样就能灵活地控制不同构建产出的标识了。6. 从“能用”到“专业”图标设计的小建议最后抛开技术聊一点设计心得。一个优秀的应用图标是成功的一半。简洁明了图标在小尺寸下必须能清晰辨认。避免过多细节和复杂文字。独特配色使用与你品牌一致的、有辨识度的颜色组合。风格统一如果你有一系列应用图标设计风格如圆角、线条粗细、透视角度应该保持一致形成家族感。测试不同背景把你的图标放在白色、黑色、杂色的桌面壁纸上都看看确保在各种环境下都醒目。利用负空间巧妙运用负空间图形周围的空白可以创造出令人印象深刻的双层含义图标。我自己的习惯是在完成功能开发后会专门花时间打磨图标和名称甚至会做一个小调查问问非技术朋友哪个图标更吸引人。这些看似表面的工作对于提升产品的整体质感和用户的第一印象有着意想不到的巨大作用。毕竟没有人会拒绝一个既好用又好看的应用。
【electron】 自定义应用图标与进程名称的完整指南
发布时间：2026/5/19 20:28:03
1. 为什么你的Electron应用需要一个“好皮肤”你可能已经用Electron开发了一个很棒的应用功能齐全逻辑清晰。但当你兴冲冲地打包出来准备分享给朋友或用户时却发现桌面上那个图标还是默认的Electron原子图标任务管理器里显示的进程名也是“Electron”。那一刻是不是感觉有点“出戏”就像一个精心设计的商品却贴着一个简陋的包装盒标签。自定义应用图标和进程名称远不止是“美化”那么简单。它关乎品牌识别和用户体验。一个独特、专业的图标能让你的应用在众多软件中脱颖而出让用户一眼就能找到它。而一个清晰的进程名称比如“我的笔记”而不是“Electron”则能让用户在任务管理器或系统监视器中轻松识别你的应用尤其是在需要排查内存或CPU占用问题时这显得尤为重要。我刚开始接触Electron时也忽略了这一点直到有用户反馈说“你们的软件和另一个Electron应用在后台分不清”我才意识到问题的严重性。修改这些信息本质上是在告诉操作系统和用户“这是我的应用它有自己独立的名字和身份。”这个过程并不复杂但细节决定成败。接下来我就把自己踩过的坑和总结的最佳实践一步步分享给你。2. 动手前的准备图标与工具在开始修改配置之前最核心的一步是准备好你的图标文件。这一步没做好后面全是白搭。2.1 图标尺寸为什么必须是256x256或更大原始文章里反复强调图标必须大于等于256x256像素这不是随便说的。Windows系统尤其是Windows 10/11在多种场景下会使用不同尺寸的图标任务栏通常使用24x24或32x32的小图标。桌面快捷方式常用32x32或48x48。开始菜单/大图标视图可能会用到64x64甚至更大的尺寸。文件属性对话框会显示最大的图标版本通常是256x256。如果你只提供一个16x16的小图标系统在需要大图标时只能强行拉伸结果就是模糊、锯齿显得非常不专业。一个.ico文件的神奇之处在于它可以内嵌多个不同尺寸的图标副本。当你把一个包含16x16, 32x32, 48x48, 64x64, 128x128, 256x256等多种尺寸的.ico文件交给系统时系统会根据显示场景自动选择最合适的那一个从而保证在任何地方都清晰锐利。我最初用一个在线的JPG转ICO工具只生成了单尺寸的ICO结果在任务栏上看起来还行但一点开文件属性那个模糊的大图标简直惨不忍睹。所以请务必确保你的源图像素材本身分辨率足够高建议从512x512或1024x1024开始设计这样才能生成高质量的各级缩略图。2.2 图标格式ICO、PNG与ICNS不同平台对图标格式的要求不同Windows: 主要使用.ico格式文件。macOS: 主要使用.icns格式文件。它和ICO类似也是一个包含多种尺寸的容器。Linux: 通常使用.png格式但需要准备多个不同尺寸的PNG文件如256x256.png,128x128.png,64x64.png,32x32.png,16x16.png。对于跨平台应用你需要在配置中为每个平台指定对应的图标文件。好消息是Electron Builder等打包工具能很好地处理这些差异。2.3 工具推荐如何制作一个合格的图标原始文章提到了两个在线网站这里我补充一些更可靠的工具和心得在线转换工具快速上手CloudConvert非常强大的全能格式转换网站支持将PNG、SVG等转换为ICO并允许你选择需要内嵌的尺寸质量很高。ICOConvert专业的在线ICO生成器可以上传一张大图自动为你生成包含所有标准尺寸的ICO文件是我最常用的在线工具之一。专业桌面软件效果最佳GIMP免费开源强大的图像编辑器。你可以安装一个名为“BIMP”的插件批量导出不同尺寸的PNG然后再用其他工具合成ICO。对于设计图标本身GIMP也足够强大。IconSlatemacOS付费制作ICNS和ICO的神器界面直观拖拽即可生成包含所有尺寸的图标文件强烈推荐macOS用户使用。Greenfish Icon Editor ProWindows免费功能非常专业的图标编辑器可以直接绘制和编辑ICO文件内的各个尺寸图层。我的经验是先使用Figma、Sketch或Photoshop设计一个高分辨率的图标例如1024x1024导出为PNG。然后使用ICOConvert这样的在线工具一次性生成Windows用的ICO。对于macOS如果使用IconSlate就很简单如果没有可以搜索“PNG to ICNS”在线转换工具或者使用iconutil命令行工具macOS自带来制作。3. 核心配置实战修改package.json图标准备好了现在就是告诉Electron打包工具如何使用它。所有的秘密都在package.json文件的build配置项里。3.1 修改应用名称productNameproductName这个字段至关重要它决定了安装包和安装目录的名称。应用程序在系统菜单中显示的名称。在Windows任务管理器中显示的进程名称。{ build: { productName: 我的酷炫应用, appId: com.mycompany.myapp, win: { icon: build/icons/icon.ico }, mac: { icon: build/icons/icon.icns }, linux: { icon: build/icons } } }把我的酷炫应用换成你想要的名字。注意appId是类似Java包名的反向域名格式用于系统深层标识你的应用通常修改一次后就不动了而productName则可以更灵活地用于产品营销名称。3.2 指定图标路径如上例所示你需要为不同的平台指定图标路径。路径是相对于项目根目录的。通常的做法是在项目根目录下创建一个build或assets文件夹里面再建一个icons子文件夹把icon.ico,icon.icns以及Linux所需的各种PNG都放进去。对于Linux如果你指定的是一个目录如build/icons打包工具会自动在该目录下寻找256x256.png128x128.png等文件。一个更清晰的项目结构示例你的项目/ ├── package.json ├── build/ │ └── icons/ │ ├── icon.ico (Windows图标) │ ├── icon.icns (macOS图标) │ ├── 512x512.png (Linux图标源) │ ├── 256x256.png │ └── ...其他尺寸 └── src/ └── ...你的源代码3.3 关于“asar”目录与图标引用有时你会看到配置里写的路径是dist/electron/.../icon.ico这通常是因为项目构建流程会把资源文件复制到dist目录。关键在于图标文件必须能在打包时被electron-builder访问到。最稳妥的办法就是把图标放在项目源码目录之外比如上面例子中的build/icons或者在构建脚本中确保图标被复制到了最终资源目录。4. 执行打包与验证效果配置完成后运行你的打包命令。通常命令在package.json的scripts里定义比如scripts: { dist: electron-builder }然后在终端执行npm run dist # 或 yarn dist4.1 打包输出解析打包成功后你会在输出目录默认是dist看到类似下面的结构dist/ ├── 我的酷炫应用 Setup 1.0.0.exe (Windows安装包) ├── win-unpacked/ (绿色免安装版) │ ├── 我的酷炫应用.exe │ ├── resources/ │ │ ├── app.asar (你的代码被打包在这里) │ │ └── icon.ico (图标资源) │ └── ... ├── mac/ │ └── 我的酷炫应用.app (macOS应用包) └── linux-unpacked/ (Linux版)重点验证以下几点安装包/可执行文件名称是否变成了productName桌面快捷方式图标安装后桌面快捷方式的图标是否正确显示开始菜单/启动台在这里看到的图标和名称是否正确任务管理器这是最关键的一步运行你的应用打开任务管理器Windows或活动监视器macOS查看进程名是否已从“Electron”变成了你设置的productName。5. 进阶技巧与疑难杂症排查即使按照步骤操作你可能还是会遇到一些奇怪的问题。这里分享几个我亲身踩过的坑和解决办法。5.1 图标缓存改了图标但系统不更新这是最常见的问题。你换了新图标打包安装后桌面或任务栏上显示的却还是旧图标。这是因为操作系统对图标有缓存。Windows解决方案重启资源管理器在任务管理器中找到“Windows资源管理器”右键“重新启动”。清理图标缓存这是一个更彻底的方法。需要删除隐藏的图标缓存数据库文件。位置通常在C:\Users\你的用户名\AppData\Local\IconCache.db。你可以尝试删除它可能需要先结束explorer.exe进程然后重启电脑或重启资源管理器。网上也有专门的“图标缓存重建工具”可以使用。macOS解决方案运行sudo rm -rf /Library/Caches/com.apple.iconservices.store然后重启Dockkillall Dock。5.2 进程名改了但窗口标题还是“Electron”productName修改的是进程名和安装名称。应用窗口的标题通常由你的代码控制。在创建BrowserWindow时需要设置title属性// 在主进程 main.js 或 main.ts 中 const mainWindow new BrowserWindow({ width: 800, height: 600, title: 我的酷炫应用 - 主窗口 // 在这里设置窗口标题 });或者在网页加载前通过mainWindow.setTitle(‘新标题’)来设置。5.3 打包报错“Cannot find icon file”这意味着你配置的图标路径不对electron-builder在打包时找不到文件。请检查路径是否正确是否相对于项目根目录。文件名和扩展名是否完全匹配注意.ico和.png的区别。图标文件是否真的被提交到了代码仓库或者存在于你的本地目录中。5.4 为不同环境配置不同图标和名称在开发中你可能需要为测试版、正式版设置不同的图标或名称。可以通过环境变量和package.json配置的组合来实现。{ build: { productName: ${PRODUCT_NAME:-我的默认应用}, appId: com.mycompany.${APP_ID:-myapp}, win: { icon: ${WIN_ICON:-build/icons/icon.ico} } } }然后在打包时传入环境变量# Linux/macOS PRODUCT_NAME测试版应用 WIN_ICONbuild/icons/beta.ico npm run dist # Windows (Command Prompt) set PRODUCT_NAME测试版应用 set WIN_ICONbuild/icons/beta.ico npm run dist这样就能灵活地控制不同构建产出的标识了。6. 从“能用”到“专业”图标设计的小建议最后抛开技术聊一点设计心得。一个优秀的应用图标是成功的一半。简洁明了图标在小尺寸下必须能清晰辨认。避免过多细节和复杂文字。独特配色使用与你品牌一致的、有辨识度的颜色组合。风格统一如果你有一系列应用图标设计风格如圆角、线条粗细、透视角度应该保持一致形成家族感。测试不同背景把你的图标放在白色、黑色、杂色的桌面壁纸上都看看确保在各种环境下都醒目。利用负空间巧妙运用负空间图形周围的空白可以创造出令人印象深刻的双层含义图标。我自己的习惯是在完成功能开发后会专门花时间打磨图标和名称甚至会做一个小调查问问非技术朋友哪个图标更吸引人。这些看似表面的工作对于提升产品的整体质感和用户的第一印象有着意想不到的巨大作用。毕竟没有人会拒绝一个既好用又好看的应用。
