在前面的文章中，請看之前文章,我們已經完成了使用 electron做文件瀏覽器這么一個應用，現在我們需要為應用創建圖標操作。為應用創建圖標以后，我們就可以從計算機中與其他應用區分開來，如果我們自己會做icon圖片的話，我們自己使用ps做一個icon圖標來當做我們的應用圖標。針對不同的操作系統，文件格式不同，顯示應用圖標的方式也是不一樣的。因此我們需要自己手動做一個比較好。
因此第一步：需要創建一個512*512像素高清的PNG圖片，下面我是從網上官網找一個一張icon過來(https://github.com/paulbjensen/lorikeet/blob/master/icon.png)，我們查看網絡，把該圖片下載下來，放到我們的 項目中的 images 下，並命名為icon.png. 我們有了這個文件以后，我們就可以針對不同的操作系統制作不同版本的圖標了。
Mac OS
Mac OS 系統要求應用圖標的文件格式為ICNS. 該文件格式包含以下不同分辨率版本的應用圖標。
16px、32px、48px、128px、256px
根據我們使用的不同的操作系統，我這邊使用的是Mac系統，有不同的創建ICNS文件的方法。我這邊在網上下載了一款破解版的 Icon Composer. 下載地址請看
(http://www.xue51.com/mac/6136.html#xzdz), 下載以后我們會進行安裝，安裝完成以后我把它拖進應用程序里面，因此它在我們應用圖標是如下這樣的：
然后我們雙擊打開，看到如下這樣的：
我們首先需要把我們的第一項勾選去掉，我們需要第二項、第三項、第四項、如下圖所示：
現在我們就可以把我們之前下載的 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源碼查看