electorn更换窗口图标

川长思鸟来 2022-12-17 11:54 931阅读 0赞

在用electron开发桌面端的时候，打包成exe文件，需要更改默认的图标：

具体做法：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4_size_16_color_FFFFFF_t_70][]

需要两个icon：icon.icns，icon.ico

**注意**：

1、这两个图标大小不能256\*256

2、不能直接用png的图片，把后缀改为.ico 否则会报错（可以到在线生成icon的网站上传下载）

改配置文件：根目录下 package.json

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4_size_16_color_FFFFFF_t_70 1][]

重新打包，就发现生成的exe文件的图片改变了。

但是，打包后运行发现，

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4_size_16_color_FFFFFF_t_70 2][]

窗口的图标并未改变，那么如何修改窗口的图标呢？

在主文件mian.js当中

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4_size_16_color_FFFFFF_t_70 3][]

const { app, BrowserWindow, Menu, globalShortcut } = require('electron');
    // import { autoUpdater } from 'electron-updater';
    const path = require('path');
    let win;
    function createWindow() {
      Menu.setApplicationMenu(null);
      win = new BrowserWindow({
        webPreferences: {
          nodeIntegration: true
        },
        width: 1000,
        height: 563,
        useContentSize: true,
        titleBarStyle: 'hidden',
        icon: path.join(__dirname, './dist/logo.ico')
      });
      if (process.platform === 'darwin') {
        app.dock.setIcon(path.join(__dirname, './dist/logo.jpg'));
      }

然后将package.json当中设置图标的地方全部删除，并且删除"buildResources": "dist",然后打包运行

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4_size_16_color_FFFFFF_t_70 4][]

再次运行发现一切都清爽了

这个是左上角标题的图标，如果更换软件的图标需要在package当中配置，每次打包时候最好更换一下软件的名字，即productName字段。否则，可能会产生缓存。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4_size_16_color_FFFFFF_t_70]: /images/20221122/ab1bc25b19014bd5ab7bde24ee00c050.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4_size_16_color_FFFFFF_t_70 1]: /images/20221122/9cbb9801b10241cb92e909f912a2aced.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4_size_16_color_FFFFFF_t_70 2]: /images/20221122/0417e198b86443959b4fc44ef357a137.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4_size_16_color_FFFFFF_t_70 3]: /images/20221122/d5bbce2bb94141d99fbd750ac8428c4c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4_size_16_color_FFFFFF_t_70 4]: /images/20221122/ea1d5f5c982844bb822e8e8755c422f1.png