Electron builder icon linux

How to set app icon for Electron / Atom Shell App

How do you set the app icon for your Electron app?

I am trying BrowserWindow(); but it does not work.

Do I need to pack the app to see the effect?

10 Answers 10

Setting the icon property when creating the BrowserWindow only has an effect on Windows and Linux.

To set the icon on OS X, you can use electron-packager and set the icon using the —icon switch.

It will need to be in .icns format for OS X. There is an online icon converter which can create this file from your .png.

Below is the solution that I have :

Updated package.json:

After build application you can see icons. This solution don’t show icons in developer mode. I don’t setup icons in new BrowserWindow() .

IMPORTANT: OUTDATED ANSWER, LOOK AT THE OTHER NEWER SOLUTIONS

You can do it for macOS, too. Ok, not through code, but with some simple steps:

1. Find the .icns file you want to use, open it and copy it via Edit menu
2. Find the electron.app, usually in node_modules/electron/dist
3. Open the information window
4. Select the icon on the top left corner (gray border around it)
5. Paste the icon via cmd+v
6. Enjoy your icon during development 🙂

Actually it is a general thing not specific to electron. You can change the icon of many macOS apps like this.

If you want to update the app icon in the taskbar, then Update following in main.js (if using typescript then main.ts)

__dirname points to the root directory (same directory as package.json ) of your application.

in my case it worked !

Please be aware that the examples for icon file path tend to assume that main.js is under the base directory. If the file is not in the base directory of the app, the path specification must account for that fact.

For example, if the main.js is under the src/ subdirectory, and the icon is under assets/icons/, this icon path specification will work:

electron-packager

Setting the icon property when creating the BrowserWindow only has an effect on Windows and Linux platforms. you have to package the .icns for max

To set the icon on OS X using electron-packager , set the icon using the —icon switch.

It will need to be in .icns format for OS X. There is an online icon converter which can create this file from your .png.

electron-builder

1. Create a directory named build in your project directory and put the .icns the icon in the directory as named icon.icns .
2. run builder by executing command electron-builder —dir .

You will find your application icon will be automatically picked up from that directory location and used for an application while packaging.

Note: The given answer is for recent version of electron-builder and tested with electron-builder v21.2.0

Источник

Can I set AppImage’s icon on linux platforms #3599

Comments

hugetiny commented Jan 12, 2019

AppImage could only show the default icon although i set the icon in package.json

The text was updated successfully, but these errors were encountered:

probonopd commented Jan 12, 2019 •

hugetiny commented Jan 12, 2019 •

@probonopd thank you.i can show icon in linux dock.what i mean is that the appimage file icon can’t be set

probonopd commented Jan 12, 2019

Have you installed the optional appimaged daemon? Which desktop are you using?

hugetiny commented Jan 12, 2019

ubuntu and fedora. i am new to linux gnome

probonopd commented Jan 12, 2019

Are you sure the optional appimaged daemon is installed and running? Otherwise you will see no icons on the AppImage files.

hugetiny commented Jan 14, 2019 •

Does optional appimaged daemon need to be downloaded separately？
can electron-builder integrate it in the dist?

hugetiny commented Jan 14, 2019 •

i mean this one

probonopd commented Jan 14, 2019

For that one your user needs to have the optional appimaged daemon installed. It will generate the necessary thumbnail files, among other things.

hugetiny commented Jan 19, 2019

@probonopd Do you mean optional appimaged daemon is not in the electron-builder’s dist？

probonopd commented Jan 19, 2019

Exactly, appimaged is not part of each application AppImage but is installed system-wide. It’s optional.

hugetiny commented Jan 19, 2019

@probonopd what a pity, bu thank you very much

stale bot commented Jul 1, 2019

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

probonopd commented Jul 1, 2019

Not doing anything is never a good reason to close tickets in my humble opinion. So I don’t know what good this bot is supposed to be doing.

stale bot commented Aug 30, 2019

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

probonopd commented Sep 4, 2019

Not doing anything is never a good reason to close tickets in my humble opinion. So I don’t know what good this bot is supposed to be doing.

Beelink commented Oct 6, 2019

stale bot commented Dec 5, 2019

Is this still relevant? If so, what is blocking it? Is there anything you can do to help move it forward?

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

celodauane commented Dec 11, 2019

I am facing exactly the same issue. I tried everything suggested in this thread but unfortunately, nothing worked. App icon only works with deb but not with AppImage. Is anyone able to point me in the right direction?

probonopd commented Jan 19, 2020

As explained above, for the icon in the filesystem to be the correct one the user needs to have the optional appimaged daemon installed. It will generate the necessary thumbnail files, among other things. Does this solve your issue @dvuvne?

wdanilo commented Mar 6, 2020

I’m facing the same issue. The icon shows correctly on Windows and MacOS but on Linux we do not have any icon both when looking at the app.AppImage file as well as after running it. The solution provided here https://github.com/AppImage/AppImageKit/wiki/Bundling-Electron-apps is wrong, as it allows us to «override» the window icon, but the icon is still not available system-wide (e.g. on the .AppImage file)

probonopd commented Mar 6, 2020

To get an icon when looking at the app.AppImage file in the file manager, you need a desktop integration software such as the optional appimaged daemon running in the system that integrates the application (and its icon) with the system.

To get the icon when running the application, the application needs to set the icon for the main window.

wdanilo commented Mar 9, 2020 •

@probonopd I will double check the desktop-integration, thanks for the hint. By the way, we’ve been distributing AppImage application in the past and it had a desktop icon without requiring the users to install daemon (I’m 100% sure as you can even test it right now — http://luna-lang.org). So there should be a way to do it without this daemon right? Requiring the users to install daemon is rather a big no-go for us regarding AppImage then 🙁

Regarding the application needs to set the icon for the main window. — I understand this is not required on MacOS and Windows, right? If so, why Linux is a special case here?

probonopd commented Mar 9, 2020 •

The root cause may be that the the XDG specifications are flawed in this regard. They assumed every application to be installed, along with a desktop file and an icon file (that are separate from the application itself). macOS, Windows, and Haiku all have some concept of resources (such as icons) embedded inside the application. I have written an article about it: https://medium.com/@probonopd/my-sixth-day-with-haiku-under-the-hood-of-resources-icons-and-packages-abec8d0e4ec6

in the past and it had a desktop icon without requiring the users to install daemon

In the past I had written a bash script that placed the required icon and desktop file into the system when the AppImage was first launched. Maybe your AppImage still uses that.

stale bot commented May 8, 2020

Is this still relevant? If so, what is blocking it? Is there anything you can do to help move it forward?

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

probonopd commented May 23, 2020

Has this been resolved?

dsteinman commented Jun 23, 2020

This ticket has been closed — if the issue has been resolve then what is the procedure for adding an icon to the AppImage?

My package.json contains:

I’m sure the icon file exists, in fact it’s in both /assets/ and /public/assets, but my appimage file has no icon.

probonopd commented Jun 27, 2020 •

my appimage file has no icon

Do you mean something like this in the file manager:

Unless desktop environments start to actively support this out-of-the-box, you need an AppImage thumbnailer in your system, or something like the optional appimaged daemon for this to work.

dsteinman commented Jul 4, 2020

I’m not fully understanding what appimaged does and how it fits in here.

When I run appimaged-x86-64.AppImage it’s looking for certain directories:

My AppImage file is not in any of these locations. I haven’t even installed it, It is in the /dist directory of my project. When I run it, it works, but has no icon in the Ubuntu taskbar menu — I was expecting at least that to work.

probonopd commented Jul 7, 2020 •

appimaged is responsible for putting icon and desktop files into the system (as long as you put the AppImage into one of the «watched» locations), which in turn makes it possible for the file manager to show icons like in my screenshot, and is sometimes needed for the menu/taskbar of some desktops to appear correctly.

If you are just concerned about the taskbar and not about the icons in the file manager:
For the taskbars of some desktops it may be sufficient to set an icon for the main window in the source code of your application (in which case you don’t need appimaged ). Something (roughly) along the lines of

trusktr commented Jul 14, 2020

I hope distros ship with a default AppImage thumbnailer soon. That’d be nice and I’m sure the package would be tiny.

trusktr commented Jul 14, 2020 •

According to AppImage/AppImageKit#346, thumbnailer support was merged a while back (which I assume means we don’t need appimaged ). I wonder why I don’t see a thumbnail.

installed in my Arch (Manjaro) Linux (though I’m using electron-forge ). I see the default gear cog icon for the AppImage file that I generate.

Could it be that electron-forge forgot to embed the icon in the file?

Источник

Electron-Builder: Icon on Linux doesn’t work #3127

Comments

GGRI commented Jul 18, 2018

On MacOS High Sierra 10.13.6:

• Electron: 2.0.4
• Electron Builder: 20.20.4

On Linux Ubuntu 18.04:

• Electron: 2.0.5
• Electron Builder: 20.22.0
  also tried Electron: 2.0.4 & electron builder 20.20.4.

• Target: Ubuntu 18.04 ( amd64.deb) or Fedora 28 (x86_64.rpm)

When building a deb package on MacOs High Sierra with an icon set to the following configuration, it works. The icon is displayed in the task bar in Ubuntu 18.04.
«linux»: < "icon": "build/128x128.icns", .

When building on Ubuntu 18.04 (on which icnsutils is installed) with the same configuration, I get the error:

• electron-builder version=20.22.0
• loaded configuration file=package.json («build» field)
• writing effective config file=/home/local/workspace/build/dist/builder-effective-config.yaml
• no native production dependencies
• packaging platform=linux arch=x64 electron=2.0.5 appOutDir=/home/local/workspace/build/dist/linux-unpacked
• building target=deb arch=x64 file=/home/local/workspace/build/dist/MyApp_0.6.1_amd64.deb
panic: runtime error: index out of range

goroutine 1 [running]:
github.com/develar/app-builder/pkg/icons.ConvertIcnsToPng(0xc4200262d0, 0x43, 0x7fffe9f5590c, 0x2a, 0xc42017fb98, 0x2, 0xaaba6a, 0x4, 0xc4200262d0)
/Users/develar/go/src/github.com/develar/app-builder/pkg/icons/icns-to-png.go:60 +0x4a3
github.com/develar/app-builder/pkg/icons.ConvertIcon(0xc4200650c0, 0x4, 0x4, 0xc420236620, 0x2, 0x2, 0x7fffe9f5588c, 0x3, 0x7fffe9f5590c, 0x2a, . )
/Users/develar/go/src/github.com/develar/app-builder/pkg/icons/icon-converter.go:158 +0x76e
github.com/develar/app-builder/pkg/icons.ConfigureCommand.func1(0xc4201f1c20, 0x40e5b3, 0xa01700)
/Users/develar/go/src/github.com/develar/app-builder/pkg/icons/icon-converter.go:27 +0x99
github.com/develar/app-builder/vendor/github.com/alecthomas/kingpin.(*actionMixin).applyActions(0xc4200c09d8, 0xc4201f1c20, 0x0, 0x0)
/Users/develar/go/src/github.com/develar/app-builder/vendor/github.com/alecthomas/kingpin/actions.go:28 +0x6d
github.com/develar/app-builder/vendor/github.com/alecthomas/kingpin.(*Application).applyActions(0xc4200c2690, 0xc4201f1c20, 0x0, 0x0)
/Users/develar/go/src/github.com/develar/app-builder/vendor/github.com/alecthomas/kingpin/app.go:557 +0xde
github.com/develar/app-builder/vendor/github.com/alecthomas/kingpin.(*Application).execute(0xc4200c2690, 0xc4201f1c20, 0xc420230580, 0x1, 0x1, 0x0, 0x0, 0x773cd2, 0x9eab80)
/Users/develar/go/src/github.com/develar/app-builder/vendor/github.com/alecthomas/kingpin/app.go:390 +0x8f
github.com/develar/app-builder/vendor/github.com/alecthomas/kingpin.(*Application).Parse(0xc4200c2690, 0xc42001c130, 0x11, 0x11, 0xc42002c358, 0x0, 0x2, 0x2)
/Users/develar/go/src/github.com/develar/app-builder/vendor/github.com/alecthomas/kingpin/app.go:222 +0x1f2
main.main()
/Users/develar/go/src/github.com/develar/app-builder/main.go:64 +0x17d
Error: /home/local/workspace/build/MyApp/node_modules/app-builder-bin/linux/x64/app-builder exited with code 2
at ChildProcess.childProcess.once.code (/home/local/workspace/build/MyApp/node_modules/builder-util/src/util.ts:251:14)
at Object.onceWrapper (events.js:317:30)
at emitTwo (events.js:126:13)
at ChildProcess.emit (events.js:214:7)
at maybeClose (internal/child_process.js:925:16)
at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
From previous event:
at LinuxPackager.resolveIcon (/home/local/workspace/build/MyApp/node_modules/electron-builder-lib/src/platformPackager.ts:565:69)
at /home/local/workspace/build/MyApp/node_modules/electron-builder-lib/src/targets/LinuxTargetHelper.ts:43:35
at Generator.next ()
From previous event:
at LinuxTargetHelper.computeDesktopIcons (/home/local/workspace/build/MyApp/node_modules/electron-builder-lib/src/targets/LinuxTargetHelper.ts:25:36)
at Lazy.LinuxTargetHelper.iconPromise (/home/local/workspace/build/MyApp/node_modules/electron-builder-lib/src/targets/LinuxTargetHelper.ts:13:54)
at Lazy.get value [as value] (/home/local/workspace/build/MyApp/node_modules/lazy-val/src/main.ts:18:23)
at LinuxTargetHelper.get icons [as icons] (/home/local/workspace/build/MyApp/node_modules/electron-builder-lib/src/targets/LinuxTargetHelper.ts:21:29)
at /home/local/workspace/build/MyApp/node_modules/electron-builder-lib/src/targets/fpm.ts:201:22
From previous event:
at FpmTarget.build (/home/local/workspace/build/MyApp/node_modules/electron-builder-lib/src/targets/fpm.ts:232:43)
at /home/local/workspace/build/MyApp/node_modules/electron-builder-lib/src/platformPackager.ts:130:24
From previous event:
at AsyncTaskManager.add (/home/local/workspace/build/MyApp/node_modules/builder-util/src/asyncTaskManager.ts:14:20)
at LinuxPackager.packageInDistributableFormat (/home/local/workspace/build/MyApp/node_modules/electron-builder-lib/src/platformPackager.ts:122:17)
at /home/local/workspace/build/MyApp/node_modules/electron-builder-lib/src/platformPackager.ts:113:10
at Generator.next ()
at runCallback (timers.js:794:20)
at tryOnImmediate (timers.js:752:5)
at processImmediate [as _immediateCallback] (timers.js:729:5)
From previous event:
at LinuxPackager.pack (/home/local/workspace/build/MyApp/node_modules/electron-builder-lib/src/platformPackager.ts:110:95)
at /home/local/workspace/build/MyApp/node_modules/electron-builder-lib/src/packager.ts:376:24
at Generator.next ()
at xfs.stat (/home/local/workspace/build/MyApp/node_modules/fs-extra/lib/mkdirs/mkdirs.js:56:16)
at /home/local/workspace/build/MyApp/node_modules/graceful-fs/polyfills.js:287:18
at FSReqWrap.oncomplete (fs.js:153:5)
From previous event:
at Packager.doBuild (/home/local/workspace/build/MyApp/node_modules/electron-builder-lib/src/packager.ts:344:39)
at /home/local/workspace/build/MyApp/node_modules/electron-builder-lib/src/packager.ts:314:57
at Generator.next ()
at /home/local/workspace/build/MyApp/node_modules/graceful-fs/graceful-fs.js:99:16
at /home/local/workspace/build/MyApp/node_modules/graceful-fs/graceful-fs.js:43:10
at FSReqWrap.oncomplete (fs.js:135:15)
From previous event:
at Packager._build (/home/local/workspace/build/MyApp/node_modules/electron-builder-lib/src/packager.ts:285:133)
at /home/local/workspace/build/MyApp/node_modules/electron-builder-lib/src/packager.ts:281:23
at Generator.next ()
at runCallback (timers.js:794:20)
at tryOnImmediate (timers.js:752:5)
at processImmediate [as _immediateCallback] (timers.js:729:5)
From previous event:
at Packager.build (/home/local/workspace/build/MyApp/node_modules/electron-builder-lib/src/packager.ts:238:14)
at build (/home/local/workspace/build/MyApp/node_modules/electron-builder-lib/src/index.ts:46:28)
at build (/home/local/workspace/build/MyApp/node_modules/electron-builder/src/builder.ts:224:10)
at then (/home/local/workspace/build/MyApp/node_modules/electron-builder/src/cli/cli.ts:42:48)
at

npm ERR! Linux 4.15.0-20-generic
npm ERR! argv «/usr/bin/node» «/usr/bin/npm» «run» «deb»
npm ERR! node v8.10.0
npm ERR! npm v3.5.2
npm ERR! code ELIFECYCLE
npm ERR! MyApp@0.6.1 deb: build —linux deb
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the MyApp@0.6.1 deb script ‘build —linux deb’.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the MyApp package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! build —linux deb
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs MyApp
npm ERR! Or if that isn’t available, you can get their info via:
npm ERR! npm owner ls MyApp
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /home/local/workspace/build/MyApp/npm-debug.log
Error

So I tried with differents png. On Linux I can build a deb or rpm package with an icon set to 256×256.png or 512×512.png (or icon-256×256.png) but the icon doesn’t show u in the task bar in Ubuntu and Fedora.

The text was updated successfully, but these errors were encountered:

Источник