New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to Set Linux Icon #128

Closed
jlord opened this Issue Sep 8, 2015 · 19 comments

Comments

Projects
None yet
5 participants
@jlord
Member

jlord commented Sep 8, 2015

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:

appicon

docicon

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

@malept malept added the question label Sep 8, 2015

@malept

This comment has been minimized.

Member

malept commented Sep 8, 2015

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?

@maxogden

This comment has been minimized.

Contributor

maxogden commented Sep 8, 2015

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

@maxogden

This comment has been minimized.

Contributor

maxogden commented Sep 8, 2015

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

@maxogden maxogden closed this in f3eab81 Sep 8, 2015

@jlord

This comment has been minimized.

Member

jlord commented Sep 8, 2015

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

This comment has been minimized.

Member

malept commented Sep 8, 2015

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.

@maxogden

This comment has been minimized.

Contributor

maxogden commented Sep 8, 2015

@malept ahhh excellent thanks!

@coreybruce

This comment has been minimized.

coreybruce commented Jun 22, 2016

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

This comment has been minimized.

Member

malept commented Jun 22, 2016

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

This comment has been minimized.

coreybruce commented Jun 22, 2016

@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 comment has been minimized.

Member

malept commented Jun 22, 2016

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

This comment has been minimized.

coreybruce commented Jun 22, 2016

@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

This comment has been minimized.

Member

malept commented Jun 22, 2016

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

This comment has been minimized.

coreybruce commented Jun 22, 2016

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

@malept

This comment has been minimized.

Member

malept commented Jun 22, 2016

It is bundled with Electron.

@coreybruce

This comment has been minimized.

coreybruce commented Jun 22, 2016

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

This comment has been minimized.

Member

malept commented Jun 22, 2016

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

@coreybruce

This comment has been minimized.

coreybruce commented Jun 22, 2016

ok ill try that

@coreybruce

This comment has been minimized.

coreybruce commented Jun 22, 2016

Awesome that worked thanks so much!

@Autre31415

This comment has been minimized.

Autre31415 commented Jun 23, 2016

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment