App Icon for frameless electron app not showing in build (Solved)

  • Hi there

    I am creating an app for browser, mobile and desktop - with the current focus being on getting it working on the desktop.

    I am using a frameless q-bar like so:

        <q-header elevated>
          <q-bar class="q-electron-drag">
            <q-icon name="img:statics/icons/icon.png" />
            <div>NX Client v{{this.$appVersion}}</div>
            <q-btn dense flat icon="minimize" @click="minimize"/>
            <q-btn dense flat icon="crop_square" @click="maximize"/>
            <q-btn dense flat icon="close" @click="closeApp"/>
              @click="leftDrawerOpen = !leftDrawerOpen"
    <!--         <div>NXS Library v{{this.$nxsVersion}} / NXS Server v{{this.$nxsServerVersion}}</div> -->

    My issue is that I seem to access the icon (see line 3) in the wrong way. The icon correctly shows up in dev mode (quasar dev -m electron) but throws a not found error when building the application using quasar build -m electron.

    Two questions here:

    1. Where do I need to place the icon in the project structure?
    2. How do I correctly access it in places like: <q-icon name="img:statics/icons/icon.png" />

    For reference, this is how it should look like:



  • Still haven’t found a solution to this. Additional research confirmed that <q-icon name="img:statics/icons/icon.png" /> should actually be the correct way to make assets work with all build targets.

    Any ideas?

  • @mboeni Hello! In Electron static assets work in a particular way.

    See more about

  • @mboeni To use the tray icon for example, I decide to follow the way:


    if (process.env.PROD) {
      global.__statics = require('path').join(__dirname, 'statics').replace(/\\/g, '\\\\')
    let tray = null
    app.on('ready', () => {
      tray = new Tray(__statics + '/icon.ico')
      const contextMenu = Menu.buildFromTemplate([
        { label: 'Fechar', type: 'normal', click: closeWindow  }
      // mainWindow.minimize()

  • @patryckx Ah you do it directly in code. Thanks, I’ll try that!

    The icon lies in ...\src\statics\icon.ico, right?

  • @patryckx The tray icon and OS icon show up correctly, just the icon in my custom chrome does not when I build the app:

    • App behind (built/packaged version)
    • App in front (dev version)

    Anmerkung 2019-10-21 183944.png

  • Solved it (at least for my case):

    This does not work:
    <q-icon name="img:statics/icons/icon.png" />

    This works for dev and build:
    <img alt="App Logo" src="~assets/icon.png">


    PS: I tried the ~assets/icon.png path with q-icon and it did not work for me.

Log in to reply