How to Set Linux Icon

[jlord]

Am opening a separate issue here rather than carry on in #125.

I've not been able to set an icon for the packaged Linux version of my app. It's not documented and must work differently than OS X or Windows? In the other thread it was mentioned that you just need to set icon in BroswerWindow, however, that doesn't work for me. Perhaps I'm missing something obvious?

Either way it would be good to get it stated clearly so that we can add it to the documentation 📖

I set icon in my BrowserWindow here. I've tried it both as a NativeImage and as the path to the .png via iconPath. I get the same results.

When using electron-packager I'm running this npm script. I've tried it with the --icon flag and without along with both variants of the main.js code I mention ☝️

I still do not get my icon as the app's icon in the file manager or in the dock:

Are there other formatting specifications like size or color type? My image is here.

[malept]

It's not going to show up in the file manager, because I don't think there's a(n XDG) standard for icons in binaries.

Could you try it again after fixing the directory name typo here?

[max-mapper]

Ah we should probably mention in the readme then that linux dock icons aren't supported at this time

[max-mapper]

Oh I got that backwards, it won't work in the file manager but it will work in the dock.

[jlord]

directory name typo

Gahhhh ☺️ Ok, works in dock now 💯 Thank you!

It's not going to show up in the file manager, because I don't think there's a(n XDG) standard for icons in binaries.

Hmm. I don't know much (anything) about this as of yet, but if Atom has it then everyone should be able to have it 😄 so I'll try and dig into it this week at work. Just kidding! Atom doesn't have it either. All is fine as it was 👍

[malept]

FYI, I've tried to make the section on icons & Linux clearer (with an extra note about file extensions in general, per @kfranqueiro) in 9ed594c.

[max-mapper]

@malept ahhh excellent thanks!

[coreybruce]

I am still having the same issue but on Xubuntu, I had it showing a icon at one point but now its not and I used the --icon= option and still not working.

[malept]

Per the icon parameter docs, for Linux you need to set the icon argument when you make a BrowserWindow. Make sure you set it to a NativeImage that points to a valid PNG.

[coreybruce]

@malept can you please give a example on how to do it on the BrowserWindow

This is a snippet of my code
});
// Create the browser window.
mainWindow = new BrowserWindow ({'width':1200,'height':900,icon: __dirname + '/icon.ico'});
// and load the index.html of the app.
mainWindow.loadUrl('examplewebsite.com');
mainWindow.setMenu(null);
// Emitted when the window is closed.
mainWindow.on('closed', function() {
// Remove mainWindow.on('closed', function() { if you want the menu back
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
mainWindow = null;
});
});

[malept]

This is an example of mine that I know works, because I use Xfce (although it's CoffeeScript, not JavaScript): https://github.com/malept/gmusicprocurator-app/blob/master/src/main.coffee#L14-L21

[coreybruce]

@malept I tried adding in

icon = NativeImage.createFromPath("#{__dirname}/icon-48.png")
options =
icon: icon
width: 1280
height: 720

so my code looks like this
app.on('ready', function() {
icon = NativeImage.createFromPath("#{__dirname}/node_modules/icon.png")
options =
icon: icon
width: 1280
height: 720
app.on('browser-window-created',function(e,window) {
window.setMenu(null);
});
// Create the browser window.
mainWindow = new BrowserWindow ({'width':1200,'height':900,icon: __dirname + '/icon.ico'});
// and load the index.html of the app.
mainWindow.loadUrl('http://examplewebsite.com');
mainWindow.setMenu(null);
// Emitted when the window is closed.
mainWindow.on('closed', function() {
// Remove mainWindow.on('closed', function() { if you want the menu back
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
mainWindow = null;
});
});

what do I do or do wrong?

[malept]

I did say it was in CoffeeScript, which has a different syntax from JavaScript and will not execute in Node unless it's transpiled into JavaScript.

In your code, you want to do the following:

// Put this line at the top
NativeImage = require('native-image');

// [...more of your code before the snippet you pasted...]

// Create the browser window.
mainWindow = new BrowserWindow ({'width': 1200, 'height': 900, icon: NativeImage.createFromPath(__dirname + '/icon.ico')});

// [...the rest of the snippet of code you pasted...]

[coreybruce]

Ah right I see and I also see now I need another dependency "NativeImage" how do I get this?

[malept]

It is bundled with Electron.

[coreybruce]

I added it and NativeImage = require('native-image'); above it but the icon still hasn't come up, I even changed '/icon.ico')}); to '/node_modules/icon.ico')});

This is my code
app.on('ready', function() {
app.on('browser-window-created',function(e,window) {
window.setMenu(null);
});
// Create the browser window.
NativeImage = require('native-image');
mainWindow = new BrowserWindow ({'width':1200,'height':900, icon: NativeImage.createFromPath(__dirname + '/node_modules/icon.ico')});
// and load the index.html of the app.
mainWindow.loadUrl('https://examplewebsite.com');
mainWindow.setMenu(null);
// Emitted when the window is closed.
mainWindow.on('closed', function() {
// Remove mainWindow.on('closed', function() { if you want the menu back
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
mainWindow = null;
});
});

[malept]

I missed it before, you need to set a PNG, not an ICO.

[coreybruce]

ok ill try that

[coreybruce]

Awesome that worked thanks so much!

[Autre31415]

I've done some testing on this and found out icons can work under certain conditions (Without using native images) which I detail at:
electron/electron#6205

[imkzh]

You can place your icon somewhere inside /usr/shared/icons/hicolor/*/apps matching the name of your package name (the one you specified in package.json)

If you are not going to install the program, you can place it under ~/.local/share/icons/hicolor/*/apps

The app icon will automatically picked by your desktop environment, and this also helps icon-theme-packages overriding your app icon to provide a consistent customizable UI.

You can check this by quickly rename your package as folder (and you can see your app shown as folder when started).

If above method not working properly with your icon, try refresh the icon cache:
on Ubuntu, it is sudo update-icon-caches /usr/share/icons/*