#In Linux Mint, startbar icon for app just uses default electron icon not specified png icon

49 messages · Page 1 of 1 (latest)

clever knoll
#

How to fix this?

I'm following this documentation: https://www.electron.build/icons.html but it does not work - in the startbar I just see the default electron icon

I see a lot of other contradicting instructions on lots of Stack overflow posts etc of things to do differently, but none of these work, and I think they might be outdated.

Not sure where else to go to to learn how to fix this. Would really appreciate advice.

My package.json is

{
  "name": "testapp",
  "private": true,
  "version": "1.0.0",
  "type": "module",
  "description": "Test app.",
  "license": "Apache-2.0",
  "build": {
    "productName": "Testapp",
    "appId": "com.testapp.app",
    "extraResources": [
      {
        "from": "build/icon.png",
        "to": "icon.png"
      }
    ],
    "linux": {
      "icon": "build/icons"
    }
  },
  "scripts": {
    "devrun": "npm run build && npm run start-elec-dev",
    "start-elec-dev": "electron .",
    "dev": "vite",
    "build-and-prev": "tsc && vite build && npm run preview",
    "build": "tsc && vite build && electron-builder",
    "preview": "vite preview",
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make",
    "type-check": "tsc --noEmit"
  },
  "devDependencies": {
    ...omitted, discord says message is too long - will attach below
  },
  "main": "dist-electron/main.js",
  "dependencies": {
    "electron-squirrel-startup": "^1.0.1",
    "png-chunks-encode": "^1.0.0",
    "png-chunks-extract": "^1.0.0",
    "vite-svg-loader": "^5.1.0"
  }
}

My icon files are

build
├── icon.png
└── icons
    ├── 128x128.png
    ├── 16x16.png
    ├── 256x256.png
    ├── 32x32.png
    ├── 512x512.png
    └── 64x64.png

#

Dev dependencies are

    "@electron-forge/cli": "^7.10.2",
    "@electron-forge/maker-deb": "^7.10.2",
    "@electron-forge/maker-rpm": "^7.10.2",
    "@electron-forge/maker-squirrel": "^7.10.2",
    "@electron-forge/maker-zip": "^7.10.2",
    "@electron-forge/plugin-auto-unpack-natives": "^7.10.2",
    "@electron-forge/plugin-fuses": "^7.10.2",
    "@electron/fuses": "^1.8.0",
    "@types/png-chunks-encode": "^1.0.2",
    "@types/png-chunks-extract": "^1.0.2",
    "canvas-txt": "^4.1.1",
    "electron": "^30.0.1",
    "electron-builder": "^26.0.12",
    "typescript": "^5.2.2",
    "vite": "^5.1.6",
    "vite-plugin-electron": "^0.28.6",
    "vite-plugin-electron-renderer": "^0.14.5"
tawny yarrow
#

so first question is are you seeing the default electron icon after buidling a distributable and running it, or seeing the electron icon while running the dev build without a build?

clever knoll
#

Its after building and installing a distributable and then seeing the program listed in the Linux Mint start bar. No running.

tawny yarrow
#

is the icon in the asar?

#

also you might want to share your forge config

clever knoll
#

Sure

#

The forge config is unchanged from factory install

const { FusesPlugin } = require('@electron-forge/plugin-fuses');
const { FuseV1Options, FuseVersion } = require('@electron/fuses');

module.exports = {
  packagerConfig: {
    asar: true,
  },
  rebuildConfig: {},
  makers: [
    {
      name: '@electron-forge/maker-squirrel',
      config: {},
    },
    {
      name: '@electron-forge/maker-zip',
      platforms: ['darwin'],
    },
    {
      name: '@electron-forge/maker-deb',
      config: {},
    },
    {
      name: '@electron-forge/maker-rpm',
      config: {},
    },
  ],
  plugins: [
    {
      name: '@electron-forge/plugin-auto-unpack-natives',
      config: {},
    },
    // Fuses are used to enable/disable various Electron functionality
    // at package time, before code signing the application
    new FusesPlugin({
      version: FuseVersion.V1,
      [FuseV1Options.RunAsNode]: false,
      [FuseV1Options.EnableCookieEncryption]: true,
      [FuseV1Options.EnableNodeOptionsEnvironmentVariable]: false,
      [FuseV1Options.EnableNodeCliInspectArguments]: false,
      [FuseV1Options.EnableEmbeddedAsarIntegrityValidation]: true,
      [FuseV1Options.OnlyLoadAppFromAsar]: true,
    }),
  ],
};

#

Whats an asar?

tawny yarrow
#

when forge generates the distributable, all your assets get bundled up into a zip-like folder structure called an asar which is then compressed. you can either unpack the asar of your existing distributable using a cli tool, or rebuild the distributable with the asar unpacked (you may have to turn off asar verification fuse, i dont recall the details for distributing unpacked asar)

#

so i see in forge here you dont have the icon config setting

#

let me find the relevant docs

clever knoll
#

Ah, I was thinking it wasn't using electron-forge because i have electron-builder installed, but I think thats wrong now because I can see the make command I was using does in fact call a forge command. So it should work if I follow these docs?

tawny yarrow
#

since your package script in package.json calls electron-forge package, you should follow the docs for electron-forge, yeah

clever knoll
#

Thanks, I really appreciate it, I will go down this direction with it now 🙂

clever knoll
#

Thats worked 👍 Just stuck with the app name now. How can I stop it appearing in lowercase as "myapp" when it should be "Myapp" like all the other programs? I can't seem to see anything in the docs that says how to do this.

#

I've found this post https://github.com/electron/forge/issues/515 that points to https://www.electronforge.io/core-concepts/why-electron-forge , and it its not said in the docs but its seems that maybe packagerConfig.name is the property for this? But changing that to uppercase first then shows an error when make is run:

An unhandled rejection has occurred inside Forge:
Error: could not find the Electron app binary at "/path/to/app/out/Myapp-linux-x64/myapp". You may need to re-bundle the app using Electron Packager's "executableName" option.

tawny yarrow
#

i think you can add "productName": "MyApp" to package.json if you want to change the case

#

oops wait

#

corrected

#

you can also change it in the forge config

#

the name property in your forge config

clever knoll
#

I've tried these and changing it in either place, it throws the error above (Error: could not find the Electron app binary). I've tried taking a hint from its message "You may need to re-bundle the app using Electron Packager's "executableName" option." and using a lowercase value for that in conjunction with the uppercase value for "name"...but although this makes the error go away, the menu item still remains lowercase. Just seem to be going down a really deep rabbit hole with lots of trial and error and the build taking 15 mins per "experiement". Is this a known issue or am I doing something really wrong?

tawny yarrow
#

hmm so looking at my released project i do have it set 3 times actually

#

productName in package.json, executableName and name in forge.config.json

#

im not sure which or if all are required to change the menu title

#

i also define a custom application menu whose label is capitalized

#

which could also set it correctly....

clever knoll
#

Do you use the same casing for productName, executableName and name?

tawny yarrow
#

yes

#

the only one that has the case different is name in package.json which is required to be lower-case

clever knoll
#

Awesome, thanks for this. I've not tried using uppercase first for executableName so hopefully it will work now with all 3 set the same

#

So I now have

package.json: name -> lowercase
package.json: productName -> Ucfirst
forge.config.cjs: packagerConfig.name -> Ucfirst
forge.config.cjs: packagerConfig.executableName -> Ucfirst

But npm run make errors with

Error: could not find the Electron app binary at "/path/to/app/out/Myapp-linux-x64/myapp". You may need to re-bundle the app using Electron Packager's "executableName" option.

Did you use ucfirst for all the other 3 (not package.json name)?

tawny yarrow
#

yeah it's upper case for all 3 other than package.json's name

#

that error seems to be unrelated

#

i mean, obviously related but not due to setting it to uppercase

#

maybe a cache issue?

#

try wiping out your out folder?

clever knoll
#

Hmm, error still happens, even after completely deleting the out dir. Its because the make command, now makes a binary at /path/to/app/out/Myapp-linux-x64/Myapp, but the next stage of the make command then seems to be trying to use a binary at the path /path/to/app/out/Myapp-linux-x64/myapp. I can see thats whats happening now that things are renamed with uppercase first, but I don't know how to coerce it to look in the right place.

#

Must I change package.json build.appId from com.myapp.app to com.Myapp.app maybe?

tawny yarrow
#

hmm maybe? i dont define that

#

i donty use electron builder either

clever knoll
#

Just seems really weird that a user-facing friendly label name would be linked to systemy paths and identifiers

#

I'll remove the whole build portion of package.json and see if that works

tawny yarrow
#

well, electron as a project is shockingly old, it has a lot of legacy under the hood

clever knoll
#

Sure. I have to say though, I had a really amazing experience with it pretty much through and through, except for setting the app name and icon 😢

#

Hmm...well, thanks very much for your time and help. Let me know if I can repay the favour in some way!

tawny yarrow
#

i hope you figure it out, sorry i can't be of any further help