一、前言

在開發一款桌面應用時，設置窗口圖標和桌面快捷方式圖標是兩個必須的需求。下面來看看我基于Electron開發的實際項目中是如何配置最終實現了這個需求吧。

二、實現設置窗口圖標和桌面快捷方式圖標

1、準備好你的Icon圖標

要得到一個icon圖標十分簡單，你需要有一張目標圖標的png格式圖片，然后找一個可以免費在線轉換icon圖標的網站轉換下載即可，這里我提供一個我用過的很不錯的在線轉換工具：在線轉換icon圖標工具。

這里需要說明一下，有的童鞋可能在糾結轉換成多大的圖標才可以呢？
我的快捷方式圖標尺寸是256×256，不過64×64、128×128的都行，建議快捷方式的圖標不要尺寸太秀珍。
那么窗口圖標可以使用多大的呢？經過我的嘗試，20×20、32×32、64×64的都可以正常顯示，窗口圖標和桌面快捷方式圖標可以使用同一個尺寸的，也就是最大256×256。我的窗口圖標選用的是20×20的。

2、代碼配置

由于Electron中這兩個圖標是分開配置的，所以由兩個地方需要進行配置。分別是：
01、package.json中，這里配置的是控制打包后的桌面快捷方式的圖標：

"build": {"productName": "XXX","appId": "XXX",...... // 因為這篇文章重點講解圖標配置，所以此處省略別的配置代碼"mac": {"icon": "./XXX/logo.ico"},"win": {"icon": "./XXX/logo.ico"},"linux": {"icon": "./XXX/logo.ico"},"nsis": {"oneClick": false,"guid": "idea","perMachine": true,"allowElevation": true,"allowToChangeInstallationDirectory": true,"installerIcon": "./XXX/logo.ico","uninstallerIcon": "./XXX/logo.ico","installerHeaderIcon": "./XXX/logo.ico","createDesktopShortcut": true,"createStartMenuShortcut": true,"shortcutName": "idea"}}

02、在主進程文件index.js（可能你的主進程文件叫main.js或者別的，總之領會精神就好，哈哈哈），這里配置的是窗口圖標：

mainWindow = new BrowserWindow({...... // 因為這篇文章重點講解圖標配置，所以此處省略別的配置代碼height: 600,width: 1020,// 下面這行代碼就是配置窗口圖標的核心代碼了icon: path.join(__dirname, './XXX/logo20.ico'), // 注意，這里的path是一個node模塊哦，需要npm安裝并且引入使用。最直接的作用就是拼接字符串。})

3、實現需求

經過上面的步驟，不出意外的話，你本地啟動項目應該已經可以看到窗口圖標已經變成你想要的樣子了，這個不需要打包即可看到效果。另外的快捷方式的圖標需要你使用打包工具進行打包后安裝即可看到效果。

三、效果展示（圖片）

1、窗口圖標效果

當一切沒有問題后這塊的圖標就是你的目標圖標了

出現這個情況的有3種可能：1、你沒有在主進程index.js中設置窗口圖標配置；2、你的圖標格式不是icon格式；3、你配置的icon路徑不對

2、快捷方式效果

哈哈，大名頂頂的VS Code也是electron做的，我只是借用舉個栗子。

參考鏈接
Electron官網文檔
electorn更換窗口圖標

歡迎大家一起討論、學習

總結

以上是生活随笔為你收集整理的Electron设置窗口图标、设置桌面快捷方式图标的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。