Windows app icon with Electron & Electron Builder are Jagged

somascope

I’m creating a desktop app and have an issue with the quality of app icons generated by the build process.

These icons are placed in “\src-electron\icons” according to https://quasar-framework.org/guide/electron-preparation.html.

I replaced the 3 icon files that are in this folder by default from Quasar with my own icon files. When I build (quasar build -m electron), the icon I see for Windows (Win7) is really jagged, and not at all smooth. That’s what is seen on the installer file, and then the app’s icon once it is installed.

My app icon is very circular, so it has smooth edges that can be easily seen, or else jaggedness that is easily noticeable.

Has anybody here every run into app icons that aren’t smooth, as a result of the build process? I’m getting anxious about delivering the project soon with a jagged-looking icon.

somascope

Here is a reference image. The built installer file’s icon is jagged. After installation, the app start icon is jagged. I’m using a 256x256 transparent PNG-24 as the source for Electron Builder.

somascope

What’s also baffling to me is that 2 of the 3 specific icon file types aren’t used for me when, on Win7, creating the build.

From https://quasar-framework.org/guide/electron-preparation.html …

|   ├── icon.icns             # Icon file for Darwin (MacOS) platform
|   ├── icon.ico              # Icon file for win32 (Windows) platform
|   └── linux-256x256.png     # Icon file for Linux platform

I’ve found that even using the default Quasar icons that come when you init a new project - like if I keep them in my project - I only have to update the linux-256x256.png to provide my app’s branded icon. The other two, ico.icns & icon.ico, don’t make any difference. I know that the former is for MacOS so I shouldn’t be able to see that one play a role. But the latter, icon.ico, is what I’d expect to play a role here. But it obviously doesn’t for me since I kept the Quasar one there and that isn’t used - only my linux-256x256.png is used (to much begrudged jagged results).

I don’t find any help in the electron-build docs, either: https://www.electron.build/icons

This is quite confusing. I’m not sure if I’m missing something tricky, obvious, or if there are actually image processing bugs in this build workflow.

Anybody here ever do Quasar & Electron apps?

metalsadman

what worked for me was to have different specific icon files based on the sizes in my icons folder ‘src/statics/icons’. I just replaced the ones which were already inside (ie. favicon-16x16.png, icon-128x128.png, etc…png) when you init a quasar app with my own icons. I think that’s why it’s pixilated since you only gave a 512x512 icon, which is quite large for a folder file icon in windows explorer.

somascope

Thanks for that, metalsadman! That’s sound logical. I hadn’t paid any attention to that folder in a long time.

When I look there (‘my-app/src/statics/icons’), I see that I actually have all the initial icons (the Quasar logo). Based on my building the app and see my logo from ‘my-app/src-electron/icons’, It seems like the ‘statics’ icons aren’t use in creating the Electron app icon(s), and are perhaps used for web apps. Metalsadman, did this work for you for a Windows desktop app?

I did pursue creating my logo at all the 6 specified sizes in that folder (‘my-app/src/statics/icons’), and ran the build. But to no avail - same jagged result.

My next test: I replaced ‘my-app/src-electron/icons’ with the 3 default Quasar icons. Building with these shows a jagged installer file icon, and installing the app results in a jagged Windows start icon. This tells me it’s not the graphic files that I’m creating.

What still boggles me is that all seems to be controlled by one file: ‘src-electron/icons/linux-512x512.png’, despite the fact that I’m not building for linux.

So very confusing… Any other ideas or suggestions?

somascope

I’ve tried another idea, building with just the win32 target:

$ quasar build -m electron -T win32

So, with building for win32 only I deleted the Linux icon (‘src-electron/icons/linux-512x512.png’) under the impresson that since I’m not building for Linux this isn’t needed, and that the Windows icon (‘icon.ico’) was all that would be needed.

The build failed because it was still expecting the non-targetted platforms’ icons. I sorta get that - one should just have all the icon files in there regardless of your build, ok… So this idea didn’t get me to a good place.

somascope

Some add’l info RE: how I created my app’s icon files…

As per one of the (4) recommended tools (via https://www.electron.build/icons) to create app icons (the three formats required) I uploaded my 512x512 PNG image to https://iconverticons.com/online/ and grabbed the resulting files.

I would even try downloading other peoples’ icons from that site, and I do have the same jagged result. That’s what helped me determine that the jagged images are not a result of my image/icon production process.

metalsadman

I just run “quasar build -m electron”, i edited my iconspng’s to different sizes using photoshop.
Here’s how they look in windows.

alt text

somascope

Thanks for going through your steps and showing your images. I can see that your app icons look fine and as-expected.

I know you mention editing the images in ‘src/statics/icons’. That was a big “Ahah!” moment for me, but when I tried that it had no effect…even using the original Quasar ones, they weren’t used in the build. Weird, huh? I do think, though, there’s something here that I’m not making a connection with, yet…

Did you do anything with the 3 Apple/Windows/Linux icons in ‘src-electron/icons’? That was my focus before your suggestions. From https://quasar-framework.org/guide/electron-preparation.html, it sounds like it’s actually the only place one has to deal with icons when only creating an Electron app.

Which bundler are you using? electron-builder or electron-packager? Below is my config in quasar.conf.js where I specify electron-bundler. I’m just wondering if there are obvious things that I missed in my bundler config (but’s this part of the file is dead simple).

electron: {
  bundler: 'builder',
  extendWebpack (cfg) {
    // do something with Electron process Webpack cfg
  },
  builder: {
    appId: 'com.etrac-mss.etrac'
  }
}

I do see where your various icon image filenames are mentioned in quasar.conf.js, but they are in the ‘pwa’ object, not the ‘electron’ object. I had paid little attention to it and had even deleted this from my file (I’ve now added it back in, just on a whim). It’s the only connection that I can see between a config file and the images in ‘src/statics/icons’. You can see an example here, https://quasar-framework.org/guide/pwa-configuring-pwa.html#Configuring-Manifest-File, which seems to be the only place where the icon files you mention are ever mentioned. But isn’t that detail just for representing a web app manifest for PWAs, and not for electron building?

I did follow you suggestion though, and had used Photoshop to create all the 9 PNG images.

metalsadman

yeah i also have it in the src-electron\icons both 256x256 sizes one with icon.ico as filename and the other linux-256x256.png. hmm maybe these are the ones being used, i’m not so sure tho since i did this several months ago (around quasar v0.15, i upgraded it now tho). just give it a try maybe.
here’s the electron part in my quasar.conf.js:

electron: {
      extendWebpack (cfg) {
        // do something with cfg
      },
      packager: {
        // OS X / Mac App Store
        // appBundleId: '',
        // appCategoryType: '',
        // osxSign: '',
        // protocol: 'myapp://path',

        // Window only
        // win32metadata: { ... }
      }
    }

Edit: upon checking on my src-electron/main-process folder, i remember i did edit my electron-main.js file and see that i added another .png file in the src-electron/icons and refered it in the electron-main.js file.
here it is:

import { app, BrowserWindow } from 'electron'

/**
 * Set `__statics` path to static files in production;
 * The reason we are setting it here is that the path needs to be evaluated at runtime
 */
if (process.env.PROD) {
  global.__statics = require('path').join(__dirname, 'statics').replace(/\\/g, '\\\\')
}

let mainWindow

function createWindow () {
  /**
   * Initial window options
   */
  mainWindow = new BrowserWindow({
    width: 1000,
    height: 600,
    useContentSize: true,
    icon: './icons/primus_icon3.png'
    /* ,
    //close devtools
    webPreferences: {
      devTools: false
    } */
  })

  mainWindow.loadURL(process.env.APP_URL)

  mainWindow.on('closed', () => {
    mainWindow = null
    console.log('mainwindow closed')
  })
}

app.on('ready', createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (mainWindow === null) {
    createWindow()
  }
})

maybe that’s how it worked for me. the line icon: ‘./icons/primus_icon3.png’. I just made a lot of icons lol, since this was giving me a headache too when I was trying it, so my icon files are all over the place haha.

somascope

I didn’t know about electron’s BrowserWindow object’s icon property, so I tried that out but no go. I think a big difference between your build process and mine is that I have been using electron-builder versus you with electron-packager. I think I went this way a while back when I began because builder will also creates an installer file.

When I switched to electron-packager, lo and behold the file’s icon looks good like I’ve wanted. But, if I go this route I just need to figure out the installer aspect. On a whim, do you have an npm script in your package.json file that does this?

somascope

Hey, I was able to find out what was missing and finally got electron-builder to work with my windows icon.ico file, with no jagged results!

The deal was that some add’l config was needed in the builder object of quasar.conf.js. In electron-builder’s documentation, I went to the Windows target page: https://www.electron.build/configuration/win#WindowsConfiguration-target.

From there I found that there is an icon property. Include the ‘win’ object, and include the nested ‘icon’ object with the value being set to the path of your windows ICO file.

icon: ‘src-electron/icons/icon.ico’

My updated quasar.conf.js file (the electron section of it) looks like this now:

electron: {
  bundler: 'builder',
  extendWebpack (cfg) {
    // do something with Electron process Webpack cfg
  },
  builder: {
    // https://www.electron.build/configuration/configuration
    appId: 'com.etrac-mss.etrac',
    win: {
      icon: 'src-electron/icons/icon.ico'
    }
  }
}

I ran the build, and the installer file looked good. Then I ran the installer and the app icon looks good, too. Phew! Glad to find it’s something simple… (simple after it’s discovered, that is).

I’m wondering if this is something that should get added to Quasar’s documentation for bundling with electron-builder (hmmm, by me?). I guess I would have thought that this would be part of the docs already, or that I’m doing something odd. More likely, it’s an issue of “If you use an external package XYZ, you need to learn about XYZ”.

Here is an image of all my icons (pre and post build/install), and the one icon needed for my Windows distribution need (‘src-electron/icons/icon.ico’).

Big thanks @metalsadman for all your ideas and suggestions - that made a big difference and helped me along!

robertvincent

Added the assets
created appx folder in the build directory, keep the package.json as mentioned above.

3)Make sure the app logos named should be specific as metioned in the link .PNG format.

4)Earlier I had icon names as e.g: Square44x44Logo.png format .PNG then after changing the name to Square44x44Logo kept format .PNG as it is I was able to solve installed app issue.

What i realized by this is naming convention does matter a lot in case of applying icons. So the main issue caused due to pont 4.

No More Posting New Topics!

Windows app icon with Electron & Electron Builder are Jagged