In the previous article, see previous articles , we have completed using electron do such a file browser application, now we need to create an icon for the application operation. After the application icon is created, we can come from your computer with other applications distinguish, if we ourselves do icon picture, using our own icon icon to make a ps as our application icon. For different operating systems, different file formats, the application icon is not the same way. So we need to manually do a better.
So the first step: create a 512 * 512 pixel high-definition PNG images, here is my official website from the Internet to find a an icon over (https://github.com/paulbjensen/lorikeet/blob/master/icon.png) later we see the network to download the picture down and put under our project images, and named icon.png. we have this document, we can create different versions of the icons for different operating systems.
Mac OS
Mac OS system requirements of the application icon file format ICNS. The file format includes the following different resolution versions of the application icon.
16px、32px、48px、128px、256px
Depending on the operating system we use, here I use a Mac, there are different ways to create ICNS files. I am here in the online download a cracked version of Icon Composer. Download Look
( http://www.xue51.com/mac/6136.html#xzdz ), we will install after downloading, installation is complete I drop it into the application inside, so we use it in this icon is as follows:
Then we double-click to open, see this as follows:
First we need to check our first removed, we need the second, third, fourth, as shown below:
现在我们就可以把我们之前下载的 icon.png 拖放到 应用的虚框区域中，它会打开一个选择文件夹的对话框，让我们选择保存生成图标文件的地方，我们这边选择我们项目中根目录下的 images 下，然后生成完成后，我们会发现我们的 images 下多了 png 图片，如下图所示：
在如上生成的 icon文件夹下，也有我们的 如下5张图片；如下图所示：
如上操作以后，我们现在已经有了 ICNS文件了。这是针对Mac系统下的操作。
Windows 系统下
微软的Windows系统要求图标文件使用ICO文件格式的，在web浏览器中显示的网站图标也使用的是该格式。比如我们上面已经使用了的iConvert Icons了，我们也可以使用iConvert Icons来生成ICO文件了。
Linux系统下，我们这边忽略不计，说实话，工作了这么久，目前还没有使用过nginx系统了。所以这边暂时忽略不计。
二：对应用程序打包
在electron中，我们使用的一款叫 electron-builder. 它打包electron应用非常好用，我们首先需要使用 npm 来安装它，安装命令如下：
npm install electron-builder electron --save-dev
安装完成后，因此我们的package.json 文件配置如下代码：
{ "name": "electron-filebrowser", "version": "1.0.0", "description": "a filebrowser", "main": "main.js", "scripts": { "pack": "build", "dist": "build" }, "author": "tugenhua", "license": "ISC", "dependencies": { "async": "^3.1.0", "fs": "0.0.1-security", "lunr": "^1.0.0", "osenv": "^0.1.5", "path": "^0.12.7" }, "devDependencies": { "electron": "^5.0.6", "electron-builder": "^20.44.4" } }
然后我们可以通过 npm run pack 进行打包了，打包命令如下：
等命令打包完成后，我们就可以看到在我们项目的根目录下会生成dist文件夹。如下所示：
我们到我们的电脑目录下再查看下生成的文件，如下所示：
当我们点击 mac文件夹点击进去的时候，我们会生成一个 electron-filebrowser 应用图标。如下所示：
我们可以双击该图标，就会打开我们的 fileBrowser 应用程序了，如下所示：
2. 设置应用图标
如上我们可以看到，我们的应用程序由一个默认的图标，但是该图标并不是我们的 icon.png 图标，我们现在想设置我们自己的应用图标，我们现在需要如下做：在package.json中加上 build json, 如下所示：
{ "name": "electron-filebrowser", "version": "1.0.0", "description": "a filebrowser", "main": "main.js", "scripts": { "pack": "build", "dist": "build" }, "author": "tugenhua", "license": "ISC", "dependencies": { "async": "^3.1.0", "fs": "0.0.1-security", "lunr": "^1.0.0", "osenv": "^0.1.5", "path": "^0.12.7" }, "devDependencies": { "electron": "^5.0.6", "electron-builder": "^20.44.4" }, "build": { "mac": { "icon": "images/icon.icns" }, "win": { "icon": "images/icon.ico" } } }
因此我们使用 electron-builder 的时候会自动查找build这个配置，然后如果是mac系统的话，会使用 我们项目根目录下的 images/icon.icns 图标作为应用图标，同理如果是windows系统的话，也是一样的道理。因此我们现在再继续使用命令打包，如：npm run pack 后，我们会在我们的dist目录下mac文件夹下生成，如下所示：
然后我们双击我们的图标应用就可以打开我们的应用程序了，如下图所示：
注意：我们使用 iConvert icons 打包生成的 icns 感觉很模糊，为什么会生成这样的，目前还不清楚，等有空的时候可以去研究下，或者我们也可以用其他的方式来生成 icns 文件的。具体怎么弄下次再折腾下。或者我们可以看看这篇文章来使用png图片转icns图片也可以可以的。(https://newsn.net/say/electron-icns.html)
github源码查看