【electron】 打包应用修改图标和进程名字

在 Electron 的主进程代码中，通常是`main.js`文件，在创建`BrowserWindow`实例时，使用`icon`选项来设置窗口图标。

Electron 更换窗口图标、exe执行文件图标

1.首先这些图标必须是结尾的图片,如果你将其他格式的图片改成.ico的,也不行哦,至于为什么,我也没深入研究,按着规定来就好.2.如何获取.ico格式的图片或者说如何将其他格式的图片转换成.ico格式的图片呢,这里推荐一个app,名字是,大家自行搜索安装使用哈,给大家看下大概的界面:3,前两步弄好后,咱们就有了ico的图片,现在替换默认的图片,在你声明主进程的地方这是修改应用左上角的图标4,修改桌面的图标, .exe前面的图标。

修改窗口图标 更换Electron应用程序的桌面图标 准备好你想要作为图标的图片文件，可以是PNG格式 安装一个可以转换图片格式为ICO的工具，例如在线转换工具“在线转换icon图标工具”。将你的PNG图片文件上传并转换为ICO格式 将转换得到的ICO文件放到你的Electron项目的public或assets文件夹中（桌面应用图标要求大小不能超过256*256这个，且后缀为【.ico】,将图标放到固定文件目录中（自建）） 在package.json文件中，找到"build"字段

重新打包，安装后就是新图标了。完成后会在根目录多出来一个。

​ 最近做了一个vue3+electron-vue+elementplus的小软件，最终打包生成exe应用程序，应用程序的logo和启动logo状态栏logo、安装logo全部正常，本地yarn run serve ，左上角logo也正常，但是一打包。如果去掉图标配置，electron使用默认logo，就可以正常显示。踩坑良久，搜了许许多多解决方案，终于解决了这一问题。electron必须使用256*256的图片，所以需要提前准备这样大小的图片。我们需要先准备一张256 * 256的png格式的图片。

【打包】 接上回Electron那些事01：起步_uikoo9的专栏-CSDN博客 简单介绍了electron，以及做了简单demo使用electron做了一个桌面应用demo， 相信大家现在最想做的事情就是将桌面应用打包后发个其他人体验，本节开始electron打包 【electron-packager】 官方推荐的打包工具有3个 几个工具的区别后续单独写一篇文章介绍， 简单的说electron-forge和electron-builder都是打包工具集功能比较多，适合想快速上...

最近利用Electron来创建跨桌面应用的趋势似乎很火。看了几个用Electron开发的应用，这些应用在windows下面的安装方式，都是类似一个绿色软件的安装方法，下载.zip->解压到相应目录->进入文件夹点击exe使用。这种安装方法有两个缺点，第一，更新繁琐，用户需要删除之前的软件目录，下载新的软件，在跑一遍解压流程，不然电脑里面就会出现两个软件，不好区分。第二，安装之后无法自动创建快捷方式

vue项目打包成exe可执行文件 在学习的过程中，发现关于 Electron ，常见的有两种打包方法： 将自己的 vue 项目打包，放到官方的 demo 文件中，改变打包路径 在自己的 vue 的项目中引入插件，然后打包 经过一番尝试，我决定采用第一种，原因是：特！别！简！单！ 下面详细介绍下第一种方法： 打包成exe可执行文件 1、把electron的官方例子扒下来，下面简称A，留着待用： git clone https://github.com/electron/electron-quick-sta

1、打包配置 在vue.config.js中 pluginOptions: { electronBuilder: { builderOptions: { win: { icon: './public/app.ico' }, mac: { icon: './public/app.png' }, productName: 'AppDemo' } }

vue + electron 打包成桌面应用exe 1. 背景 由于老板突然让我将之前做的一个vue项目套壳成一个桌面应用程序，一头雾水的我开始百度，然后就找到了electron。他是一个跨平台的桌面应用开发工具。看了看后就开始了了解之路。 2. electron 安装 electron是基于Chromium 和 Node.js 来构建一个跨平台应用的。所以首先要确保你的电脑上有node环境。 先从Github上将electron项目下载下来 1. git clone https://github.com/

需分「基础配置（开发环境生效）」和「打包配置（生产环境生效）」两步操作，且需适配 Windows/macOS/Linux 不同平台的图标格式要求。通过以上步骤，即可完成 Electron 项目的名称和图标更换，且确保在开发和生产环境、不同平台下都能正常显示。需在打包工具中指定图标路径，确保生成的安装包/绿色版应用显示新图标。不同平台对图标格式和尺寸要求不同，需提前准备对应格式的图标文件，建议放在项目根目录的。. mulu 是打包这个exe的名字和 目录名字。完整package.json代码。

在用electron开发桌面端的时候，打包成exe文件，需要更改默认的图标： 具体做法： 在根目录新建新建存放icon图标的目录： 需要两个icon：icon.icns，icon.ico 注意： 1、这两个图标大小不能256*256 2、不能直接用png的图片，把后缀改为.ico 否则会报错（可以到在线生成icon的网站上传下载） 改配置文件：根目录下 package.json 重新打包，就发现生成的exe文件的图片改变了。 但是，打包后运行发现， 窗口的图标并未改变，那么.

electron-vue 图标 提示：图标包括：启动项目时桌面主题图标，窗口左上角图标，菜单栏图标，系统托盘图标，打包安装图标、开始菜单图标、快捷方式图标等。 文章目录electron-vue 图标1. 启动项目默认图标与窗口左上角图标2. 菜单栏图标3. 系统托盘图标4. 打包安装包图标5. 开始菜单图标和快捷方式图标总结 1. 启动项目默认图标与窗口左上角图标 这两个图标均由 mainWindow 的 icon 属性决定： 代码如下（示例）： mainWindow = new BrowserWi

请注意，以上步骤可能因Electron版本和操作系统的不同而有所差异。在实际操作中，建议参考Electron的官方文档和社区资源以获取最新和详细的信息。包来自动生成不同尺寸的图标，或者利用在线转换工具将PNG图片转换为ICO或ICNS格式。这些方法可以进一步提高工作效率和准确性。此外，还有一些工具和方法可以帮助简化图标更改的过程，如使用。

1、安装生成icon图标依赖 npm install electron-icon-builder --save-dev 2、配置启动命令 "scripts": { "electron:generate-icons": "electron-icon-builder --input=./public/icon.png --output=build --flatten" }, 3、生成icon yarn electron:generate-icons 完成后会在根目录多出来一个build目录

electron修改项目打包后的exe图标和打开之后的窗口图标