Icons

Varunram Ganesh edited this page Jun 29, 2018 · 13 revisions
Clone this wiki locally

Title bar icon

To change icon in title bar of your app, put a reference to PNG/JPG into package.json

{
  ... other stuff here ...
  "window": {
     "icon": "path/to/my/app.png"
  }
}

Application icon

This is platform specific unfortunately.

Windows

After creating a package you have to use a resource editor to change the bundled icon. Some sources recommend freeware Resource Hacker which would do the trick (example)

With Resource Hacker you can insert the icon from the command line.

Example:

"C:\Program Files (x86)\Resource Hacker\ResourceHacker.exe" -open yourapp.exe -save app.exe -action addoverwrite -res your.ico -mask ICONGROUP,IDR_MAINFRAME,

See the Command Line Syntax section on the Resource Hacker website for more information.

Additionally, node-webkit-builder can insert your windows icon into your package. See the winIco option.

With node-winresourcer you can insert the icon from the command line Note --lang: 1033 is removed as it is not required when mearly updating an exe.

winresourcer --operation=Update --exeFile=path/to/your/file.exe --resourceType=Icongroup --resourceName:IDR_MAINFRAME --resourceFile:path/to/your/resource.ico

Winrar has also proven to be a great tool for this: Just select all files from your build + your .ico file and add to Archive marking 'create SFX archive'. Then, go to Advanced -> SFX Options..., and in Setup write up yourmainfilename.exe in the Run after Extraction textarea. In Mode Tab choose Unpack to temporary folder and then select Hide All. Last, but not least, go to Text and Icon tab and add a .ico there. This will provide a standalone .exe file with its own icon, half the size (if normal NW apps are at least 40mb, this makes them 20mb), and self silent extracting when opening. No more installers, or multiple files.

OSX

Assuming you have your icon in PNG/JPG format, you'd first need to convert it to icns file format. There are different ways to accomplish this, but the easiest is probably using free version of IMG2ICNS. Drag your image into app window and export resulting icon as nw.icns. You'd need to replace default nw.icns inside Your.app/Contents/Resources. Or you may want to change the name of your icon to something like mysupericon.icns and change the value of CFBundleTypeIconFile in Your.app/Contents/Info.plist to reflect new name. Additionally, you'll also need to take the Icon file (generated by the "Folder" option in Img2icns) and place it inside the root of the app's Package Contents.

Check out this thread on other simple ways to create icns files

Convert from the command line with node-icns

npm install -g node-icns
nicns --in application-icon.png --out application-icon.icns

Linux

You'd need to create proper .desktop file.