search

negue / meme-box

Manage and trigger media in OBS as a browser source
meme-box.vercel.app
GNU Affero General Public License v3.0
111 stars 16 forks source link

Create crisp low resolution icons #519

Closed dnaka91 closed 1 year ago

dnaka91 commented 1 year ago

Currently there are already several different resolutions of the MemeBox icon, generated out of the main SVG file. Sadly though, there aren't any low-resolution icons.

It probably won't work to just generate some extra icons in lower resolutions, as they'll still appear blurry just because of the complexity of the icon.

Best would be to have some dedicated low resolution icon. Could be a SVG file as well, but with reduced complexity so that it looks great in 16x16, 32x32, 42x42... maybe up to 64x64?

Eventually even a 2-tone icon would be the best, to create a simple silhouette version. For example macOS simply turns the icon into a 1 color icon automatically but it doesn't look great.

Here is an example how the icon looks like in the menu bar of my Arch Linux installation: memebox-menubar

Not sure what icon the menu bar actually loads. Might be the smallest 72x72 PNG downscaled to that size, or it's eventually trying to render the SVG into that small area :thinking:

dnaka91 commented 1 year ago

I think I found the real culprit behind the blurry icon. First I thought, the OS loads the icon and just can't find one in a good size for the tray. But then I realized that for an Electron app, the application somehow must tell the Electron instance what icon to set instead.

So I think the problem is the following code section, which takes a 256x256 icon and scales it down to 16x16: https://github.com/negue/meme-box/blob/cc6b6e65730c1b78a45ba5197d8cf91b812a1096/electron-shell.ts#L57-L62

I'll play around with this a bit, trying out some smaller icons, and see why we picked 16x16 here instead of something bigger. Maybe can detect HiDPI and double the pixel size accordingly instead.