CODEWITHSUNDEEP
electron
MarcJohnson
MarcJohnson

Reputation: 712

Electron Packager - set App Icons for OSX & Windows

I am building my electron application with electron packager for windows and OSX platform.

package.json:

"build": "electron-packager . $npm_package_productName --out=dist --ignore='^/dist$' --prune --all --icon=icon.icns"

I run my build process with npm run build.

Question:

How can I use the electron packager script in my package.json to set the windows AND osx Icon?

Problem:

The above script sets the app icon for OSX only.
It doesnt set the icon for the windows app (NPM throws failure).

Solution:

I had to install wine on my OSX. Otherwise it is not possible to build the windows exe with the --icon tag. Why? Because electron-packager uses node-rcedit for that, which requires wine.

in my package.json:

"pack:osx": "electron-packager . $npm_package_productName --out=dist/osx --platform=darwin --arch=x64 --icon=assets/build/osx/icon.icns && npm run codesign",
"pack:win32": "electron-packager . $npm_package_productName --out=dist/win --platform=win32 --arch=ia32",
"pack:win64": "electron-packager . $npm_package_productName --out=dist/win --platform=win32 --arch=x64 --version=0.36.2 app-version=1.0 --icon=assets/build/win/icon.ico",
"build": "npm run pack:osx && npm run pack:win32 && npm run pack:win64"

npm run build to start the process..

Upvotes: 27

Views: 36966

Answers (3)

Osei-Owusu
Osei-Owusu

Reputation: 301

You can package your electron app into an executable using electron-packager Which can be installed using

npm install --save-dev electron-packager

After that, run this command

  • dir - specify app source is stored
  • appName - The name you want to call the app
  • option --icon helps you add an app icon, eg: mine is stored in build folder
  • option --arch specifies target system architecture(s)
  • version option for specifying the version of electron you are compiling with(look in package.json for specific of electron you are using)

run

npx electron-packager dir appName --overwrite --asar --electron-version=13.4.0 --platform=win32 --arch=x64 --prune=true --out=release-builds --icon=./build/icon.ico

These are some of the most important options. if you need any certifications, Let me know

Upvotes: 5

ProxyTech
ProxyTech

Reputation: 1145

Holy moly, did this take me forever to figure out. The application name cannot contain any illegal characters (no uppercase or hyphens etc.). Oddly the executable name WOULD be correctly generated with this "illegal" characters, but the icon would fail to apply!

Wrong format

electron-packager ./electron APPLICATION-NAME --overwrite --asar --electron-version=13.1.7 --platform=win32 --arch=x64 --prune=true --out=release-builds --icon=./icon.ico"

Correct Format

electron-packager ./electron applicationname --overwrite --asar --electron-version=13.1.7 --platform=win32 --arch=x64 --prune=true --out=release-builds --icon=./icon.ico"

Upvotes: 4

MarcJohnson
MarcJohnson

Reputation: 712

Solution:

I had to install wine on my OSX. Otherwise it is not possible to build the windows exe with the --icon tag. Why? Because electron-packager uses node-rcedit for that, which requires wine.

in my package.json:

"pack:osx": "electron-packager . $npm_package_productName --out=dist/osx --platform=darwin --arch=x64 --icon=assets/build/osx/icon.icns && npm run codesign",
"pack:win32": "electron-packager . $npm_package_productName --out=dist/win --platform=win32 --arch=ia32",
"pack:win64": "electron-packager . $npm_package_productName --out=dist/win --platform=win32 --arch=x64 --version=0.36.2 app-version=1.0 --icon=assets/build/win/icon.ico",
"build": "npm run pack:osx && npm run pack:win32 && npm run pack:win64"

npm run build to start the process..

Upvotes: 18

Related Questions