Electron Vue app icon on linux not displaying on taskbar

Question

I'm trying to build a simple linux desktop application using Electron and Vue through this plugin https://github.com/nklayman/vue-cli-plugin-electron-builder When I run serve the icon displays correctly on the taskbar without issues but when I build it the icon displays correctly in apps list but app doesn't run at all or show any errors. favicon-512x512.png is set in the root directory with vue.config file

vue.config

module.exports = {
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        "appId": "com.example.app",
        "icon": "./src/assets/icons/Icon-512.png", //another version of the icon is there
        "win" : {
          "icon" : "src/assets/images/app_icon.png",
        },
        "linux" : {
          "target" : "deb",
          "maintainer" : "xxx",
          "vendor" : "xxx",
          "executableName" : "xxx version 1",
          "category" : "Utility",
          "icon": "./src/assets/icons/"
        },
        "productName" : "xxx version 1"
      }
    },
    i18n: {
      locale: 'en',
      fallbackLocale: 'en',
      localeDir: 'locales',
      enableInSFC: false
    }
  }
}

In background.js

async function createWindow() {
  const win = new BrowserWindow({
    show: false,
    icon:'favicon-512x512.png',
    webPreferences: {
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION
    }
  })

  win.maximize();
  win.removeMenu();
  win.show();

I tried moving this image to src/assets and to the public directory but nothing worked for me.

I also removed the icon code from CreateWindow in background.js and kept just the same code in vue.config and I got the app to work but without an icon on the taskbar just a transparent placeholder!!

How can I make the app with with the tray icon displayed on taskbar? Using Ubuntu 20

I have tried this too: created a new directory named build and another directory withen named icon and saved Icon-512x512.png in the icon directory then added this in background.js

const win = new BrowserWindow({
  show: false,
  icon: path.join(__dirname, '/icon/Icon-512x512.png'),

In vue.config

"linux" : {
    "target" : ["deb"],
    "maintainer" : "LamasaTech",
    "vendor" : "LamasaTech",
    "executableName" : "VisiPoint version 5",
    "category" : "Utility",
    "icon": "build/icon/",
  },

I built the app and the icon is displayed in the app list but the app didn't run at all too

Electron Vue app icon on linux not displaying on taskbar

0 Answers