Electron-builder: Linux icons issue

Created on 13 Feb 2018  ยท  43Comments  ยท  Source: electron-userland/electron-builder

  • Version: 20.0.4
  • Target: deb, AppImage

No matter what I try I cannot set an icon on Linux.
Building from a macOS Sierra.
I have dir's customized:

"directories": {
      "buildResources": "./build_res",
      "output": "./build",
      "app": "./dist"
    }

I've tried setting

"linux": {
      "icon": "..."
}

to all imaginable values, copying all icon folders to different locations in the root and build_res and I still get a question mark icon in Ubuntu 16.04.

I have an .icns file in ./build_res/icon.icns.

Is there a workaround? Or a fix?

bug investigate linux

Most helpful comment

Investigation

I investigated with my simplest config.

  • Ubuntu: 16.04
  • electron-builder: 20.8.2
  • app-builder-bin-linux: 1.8.3 (app-builder --version shows 1.8.2)
/home/yuya-oc/git/electron-scaffold
โ”œโ”€โ”€ build
โ”‚ย ย  โ”œโ”€โ”€ icon.icns
โ”‚ย ย  โ”œโ”€โ”€ icon.ico
โ”‚ย ย  โ””โ”€โ”€ icon.png
โ”œโ”€โ”€ index.html
โ”œโ”€โ”€ main.js
โ””โ”€โ”€ package.json
electron-builder --config.linux.target=deb --arch=x64

In this case, internally app-builder is executed with following args:

icon --format set --root /home/yuya-oc/git/electron-scaffold/build --root /home/yuya-oc/git/electron-scaffold --out /home/yuya-oc/git/electron-scaffold/dist/.icon-set --input icons --input icon.icns --input /home/yuya-oc/git/electron-builder/packages/electron-builder-lib/templates/linux/electron-icons

Then rawResult indicates the icon size is 0x0.

{"icons":[{"file":"/home/yuya-oc/git/electron-scaffold/build/icon.png","size":0}]}

https://github.com/electron-userland/electron-builder/blob/37014be76e2ea8e5183a68cc4a56ffca31c08df5/packages/electron-builder-lib/src/platformPackager.ts#L609

So the icon.png is included into .deb as /usr/share/icons/hicolor/0x0/apps/${packager.executableName}.png. I think this is the reason why the linux icon did not appear for me.
https://github.com/electron-userland/electron-builder/blob/37014be76e2ea8e5183a68cc4a56ffca31c08df5/packages/electron-builder-lib/src/targets/fpm.ts#L204-L206

Workaround

icns

When I remove build/icon.png, dist/.icon-set is correctly generated from build/icon.icns. However we can't use different icon from macOS.

png

By following the guide, I renamed build/icon.png to build/icons/512.png. The icon is included as /usr/share/icons/hicolor/512x512/apps/${packager.executableName}.png and I can see it on Linux.

Expected

As mentioned at previous comment, need to clarify recommended way and how icon is chosen.

All 43 comments

Do you run app using file (AppImage) or using menu? Set env DEBUG=electron-builder and you will see stage dir for AppImage (_appImage), where some icon will be in the root โ€” is it your icon?

Running the AppImage by clicking on it directly.

Yes there's a symlink that is linked to __appImage-ia32/usr/share/icons/hicolor/512x512/apps/myicon.png.

What about the deb?

Running the AppImage by clicking on it directly.

Please see https://github.com/electron-userland/electron-builder/issues/748#issuecomment-342062462

What about the deb?

Need to check.

I've got the same issue. Defaults to Electron icon for both AppImage and deb builds. I also have custom dirs specified. Note: the same configuration worked in many previous versions of electron-builder.

@gschier I am sure that you issue is different. Please open a new issue and please set env DEBUG=electron-builder and attach log of the terminal output.

@gschier Or, if __appImage dir contains correct icon, your issue is the same :)

Ya, looks like there is no icon at all in the root. Just an app and usr dir. Going to revert to a previous working version for now, but will create an issue next time I try and upgrade if I still have problems.

Thanks! This project is the best ๐Ÿ˜„

@gschier I will try to find time to checkout your project and investigate what's wrong.

@gschier Are you sure that you use 20.0.4?

From the testing I just did, the icon stopped working after upgrading from 19.47.1 to 19.53.0. I also quickly tried 20.0.4 but ran into some different errors (vague message about JSON schema).

Error: no schema with key or ref "http://json-schema.org/draft-07/schema#"

Let me know if you need anything from me to help debug the issue. I'm AFK now but I can submit an issue for it tomorrow so we can continue the discussion there.

I can't set an icon on Linux either, using any of the methods listed in the docs. Implicit conversion from .icns, setting it explicitly as icon.png or 1024x1024.png, or setting buildResources, or providing icon names, or copying the icons to all imaginable locations, all these methods just don't work. I'm using 20.0.4 now.

I just tried rolling back to 19.47.1 on a hunch from @gschier which at first gave me an error that
icon directory doesn't contain icons.
That directory in my case was build_res/icons.
I put a 1024x1024.png there, the error went away, but still no icon in the deb installer.

Confirmed on our end as well that linux deb icons work on 19.47.1, but not on 20.0.4.

Same error here with the .deb package, How could I help guys?

This happens for me while building snap on any version higher than 19.53.7 I'm using 20.0.7 now. After lots of errors and trials made it work with following config:

Variant 1

  "build": {
    "directories": {
        "output": "release-builds",
        "buildResources": "resources"
    },
    "linux": {
      "target": [
        "AppImage",
        "snap"
      ]
    }
$ tree resources

resources
โ””โ”€โ”€ icons
    โ”œโ”€โ”€ 1024x1024.png
    โ””โ”€โ”€ icon.png



md5-78f4ebdd65e75b2d11b2aec2b1e2c0e2



    "directories": {
        "output": "release-builds"
    },

    "linux": {
      "target": [
        "AppImage",
        "snap"
      ],
    "icon" : "icons/icon.png"
}

@Qiplex Simply create file icon.png in the resources (buildResources, defaults to build, in your case set to custom value) and nothing more.

@develar yeah. It works now all the ways including the default one, you just mentioned about.

Strange thing is that I had build folder withicon.png for a long time and didn't customize configuration of electron-builder since it used to work nicely the way you described.

Until icon directory doesn't contain icons. issue appeared all of sudden in few previous versions of electron-builder after 19.53.7 on Mac & Ubuntu.

One thing I changed today was snapcraft upgrade on Mac brew upgrade snapcraft and icons issue gone. Maybe that was the case?

Maybe that was the case?

Definitely not.

This issue is still open because I didn't test mention cases (deb) manually. If someone can confirm that deb issue is gone in the 20.0.8 โ€” will be great.

Please try 20.3.0. (#2654)

20.3.0 doesn't work either, but I can confirm that 19.47.1 does like @marbemac said earlier.

Hey folks, I had issue that icon was not showing in system menu on debian/ubuntu.

With "electron-builder": "^20.5.1" it works fine.

Hi, I had same issue for .deb, and it's solved by removing icon.png from the build directory. Before that, I had three icons, icon.ico, icon.icns and icon.png. So it seems that included icons are different when there is icon.png.

  • Ubuntu 16.04
  • electron-builder: 20.5.1

The readme includes a couple of different methods for icons, some of which are contradictory. It would be useful to clarify the recommended way to do it.

Investigation

I investigated with my simplest config.

  • Ubuntu: 16.04
  • electron-builder: 20.8.2
  • app-builder-bin-linux: 1.8.3 (app-builder --version shows 1.8.2)
/home/yuya-oc/git/electron-scaffold
โ”œโ”€โ”€ build
โ”‚ย ย  โ”œโ”€โ”€ icon.icns
โ”‚ย ย  โ”œโ”€โ”€ icon.ico
โ”‚ย ย  โ””โ”€โ”€ icon.png
โ”œโ”€โ”€ index.html
โ”œโ”€โ”€ main.js
โ””โ”€โ”€ package.json
electron-builder --config.linux.target=deb --arch=x64

In this case, internally app-builder is executed with following args:

icon --format set --root /home/yuya-oc/git/electron-scaffold/build --root /home/yuya-oc/git/electron-scaffold --out /home/yuya-oc/git/electron-scaffold/dist/.icon-set --input icons --input icon.icns --input /home/yuya-oc/git/electron-builder/packages/electron-builder-lib/templates/linux/electron-icons

Then rawResult indicates the icon size is 0x0.

{"icons":[{"file":"/home/yuya-oc/git/electron-scaffold/build/icon.png","size":0}]}

https://github.com/electron-userland/electron-builder/blob/37014be76e2ea8e5183a68cc4a56ffca31c08df5/packages/electron-builder-lib/src/platformPackager.ts#L609

So the icon.png is included into .deb as /usr/share/icons/hicolor/0x0/apps/${packager.executableName}.png. I think this is the reason why the linux icon did not appear for me.
https://github.com/electron-userland/electron-builder/blob/37014be76e2ea8e5183a68cc4a56ffca31c08df5/packages/electron-builder-lib/src/targets/fpm.ts#L204-L206

Workaround

icns

When I remove build/icon.png, dist/.icon-set is correctly generated from build/icon.icns. However we can't use different icon from macOS.

png

By following the guide, I renamed build/icon.png to build/icons/512.png. The icon is included as /usr/share/icons/hicolor/512x512/apps/${packager.executableName}.png and I can see it on Linux.

Expected

As mentioned at previous comment, need to clarify recommended way and how icon is chosen.

I had the same problem with the icon appearing as 0x0.

Had the same issue, in my case I didn't care about having different icons for Linux or Mac so the issue was solved by simply deleting the icon.png file as indicated by @yuya-oc above. Thanks!

https://github.com/bitshares/bitshares-ui/issues/1367

On 20.9.0, like @yuya-oc mentioned, I can get it to generate a set of png icons in .icon-set from the mac .icns icon. I can see it after adding the Appimage to my system, and .deb adds them correctly to /usr/share/icons/hicolor. However, I can't get them to show up in the task bar or Plank (dock).

The steps I took to achieve this were the same as @yuya-oc described.

I had the same issue, and was finally able to get all three platforms to have icons. Here's what I did:

  • Started with my-icon-image_1024x1024.png
  • Resized this to make a file for each of the following additional sizes: 512, 256, 128, 32, 16
  • Used png2icns (from icnsutils package on linux) to pack all those into icon.icns
  • Used iconverticons.com to convert the 1024x1024 png file into a windows icon.ico

So, in my build directory, I only have icon.ico and icon.icns. Having icon.png breaks the linux icon.

I had the same issue, and was finally able to get all three platforms to have icons. Here's what I did:

  • Started with my-icon-image_1024x1024.png
  • Resized this to make a file for each of the following additional sizes: 512, 256, 128, 32, 16
  • Used png2icns (from icnsutils package on linux) to pack all those into icon.icns
  • Used iconverticons.com to convert the 1024x1024 png file into a windows icon.ico

So, in my build directory, I only have icon.ico and icon.icns. Having icon.png breaks the linux icon.

@AdrianoFerrari Did you specify an icon in your Linux build configuration? I tried generating an icon.icns file (only 512x512 for testing) which I put in build/icon.icns, and I did not specify an icon for the Linux build.

When installed, the Linux app has the correct icon in the start menu, but anywhere else (window titlebar, alt+tab switcher) it's using the default app icon for the os.

for me, solution was specified FOLDER with icons
... "linux": { "icon": "./path_to_icon_folder/", ...
Folder include next icons with size: 16, 32, 64, 128, 256, 512, 1024
But I don't know how to set the icon for .deb installer
Also .deb installer set the name of application from name field from package.json

@IhorVimmi not working for me. I'm trying with the 256x256 icon that worked well for windows

In 22.2.0, have same issue. With linux deb, icon file can be found in /user/share/icons/hicolor, and icon works on Applications list. But fail on dock

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?

electron-builder: 21.2.0
electron: 3.1.13

Same here, The icon works with Mac and Linux deb but doesn't with Linux AppImage.
It works with deb only if icon is a set directory but not with one png file (according to the documentation both should work).

I can confirm. Still doesn't work with Linux (Ubuntu 18). I try with icns, folder, png path, with and without 1024x1024.png prefix. The only thing that worked in at least the window bar at the left of Ubuntu is manually adding the assets to the app "files": ["icons/**/*"] and then use it in new BrowserWindow({icon: __dirname+ '/icons/icon_1024x1024x.png'). However, the AppImage file in the file browsers and desktop still only shows this icon:
Screenshot 2020-03-17 at 04 24 39

Also what I find a bit unsexy is that the actual icon although in high resolution (1024x1024) appears very pixelated. Overall very unsatisfying tbh.

Screenshot 2020-03-17 at 04 26 58

[email protected]

//edit: the pixelated issue goes away if you install the app via the ubuntu package manager ๐Ÿคทโ€โ™‚๏ธ

Anyone working on this? This should be an issue of high importance.

After adding icon option in BrowserWindow and including png files into build resources and files, it works now. This is commit https://github.com/ringcentral/ringcentral-embeddable-electron-app/pull/14/commits/29652ab8bb8eeef0c6ee60490d0ea793dc2621ac

Any news?

i have the same issue

i have icon on snap and app image but not on deb file

Hello,

I've had this problem myself. I've solved this in the following way.

This is the important part of package.json:

{
    "build": {
        "icon": "./assets/icons/512x512.png",
        "mac": {
            "icon": "./assets/icons/icon.icns"
        },
        "linux": {
            "icon": "./assets/icons/"
        }
    }
}

In the path ./assets/icons/ I have the following files: 512x512.png (this file is used for Windows and Linux) and icon.icns (this file is used for macOS). In the linux part of package.json I just specify the directory.

Here is the whole repository, in case this wasn't clear.

Hope I helped.

i think if you point to the same file that mac requires (make it on the internet), then it will work. in your linux target.
"linux": {
"target": "deb",
"icon": "build/tpp-icon.icns"
},

i think if you point to the same file that mac requires (make it on the internet), then it will work. in your linux target.
"linux": {
"target": "deb",
"icon": "build/tpp-icon.icns"
},

This did it for me, thanks!

Was this page helpful?
0 / 5 - 0 ratings