Create a more crisp tray icon

[dnaka91]

This changes the tray icon generation, to have a more crisp variant, and apply scaling variations for HiDPI factors. It is very similar to the appreach mention in the docs where you'd have multiple icons like 32x32.png, 32x32@2.png and 32x32@3.png where the @2 and @3 variant are for double and triple DPI values.

• Using the 128x128 icon variant to likely create more crisp scaled versions, as less resizing is needed (may make the initialization faster too, as it's faster to rescale, because less pixels to process).
• Create scaled versions for different DPI scaling factors, namely 32x32, 64x64 and 128x128.

This looks good on Linux so far. Seems macOS doesn't really care about the custom tray icon and builds the silouhette variant itself from the main app icon (at least it appears to do that, because the silouhette version looked crip, even before this change).

@negue could you check how this looks on Windows? I assume the original 16x16 was picked, because that's a typical basic size for ICO files on Windows. Just good to check that it doesn't fail to show the icon on Windows, and still looks crips there too. Sadly don't have a Windows PC around to check this myself.

Fixes #519

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
meme-box	✅ Ready (Inspect)	Visit Preview	Oct 4, 2022 at 5:05AM (UTC)

[dnaka91]

After some testing on macOS, I figured that we can't just increase the default size to 32x32. Every platform behaves a little different and expects different sizes. So I opted for a platform specific solution, to best generate the icon for each platform, the way it expects it.

• MacOS: Wants a 16x16 and a 32x32 (for Retina) version, in addition wants to have the icon as template, which means it'll turn it into a silhouette. Actually, this should be a 2 color-only icon. Black for the visible part and transparent for, transparent 😉. But seems to work with colored icons too, it'll just auto-convert and probably overrides anything that's not fully transparent.
• Windows: Probably wants a 16x16 and various other sizes. The docs only mention that an ICO file works best, but the one we have doesn't have small scale images in it. So we do the same as on macOS, minus the template flag.
• Linux (and anything else): This is the same solution as for Windows currently, just with a bigger base size of 32x32. That looked pretty crisp on my installation. The Linux variant is probably the most complicated and easiest to get wrong, because there are several desktop environments like Gnome, Cinnamon, KDE, Xfce and many others. And of course they all have their own system bar implementation, with each their own quirks. I'm using Cinnamon, and there it seems to not really care about the size, instead it just scales it to the size it wants (maybe could just give a big 128x128 icon and do no scaling at all).

As a further note on Linux: So what further complicates things on Linux is the theming. People can install custom icon themes, that can override application/tray/desktop icons. That seems to work well for most native apps (gtk, qt, ... based). Electron works a bit different though, that it appears to the OS as just electron, and then on startup the bundled JS code (the actual app) tells it how to look. So theming of icons and such doesn't really seem to work here.

For example, most themes just define an SVG icon for the app & tray, so it looks crisp, no matter where. Sadly, Electron's API doesn't support SVGs, only PNG and JPG.

So all in all for now the Linux variant looks good enough in my opinion. Then, when someone with a different desktop environment has issues, we can adjust and fine tune further.

[negue]

Woah this is quite a nice solution, I searched backthen for something alike. I think with that most OS should be fine. :)

Thank you.

I tried it on Windows and it still looks good :)