How to get the tray icon scale correctly in macos electron?

Question

I've tried 32x32, 64x64, and I've tried to use Photoshop to edit another app's icon into my icon to keep its size but it never works with me. It seems that my icon is double-sized and I can't get the whole icon to be visible.

Glasswort

Answer 1

You can append @2x after image's base filename to mark it as a high resolution image.

This was helpful for me: https://www.electronjs.org/docs/api/native-image#high-resolution-image

Phlebotomize

Answer 2

  const image = nativeImage.createFromPath(
    path.join(__dirname, "your-path/icon.png")
  );
  tray = new Tray(image.resize({ width: 16, height: 16 }));

Filmdom

Answer 3

16x16 png will work fine for Macos tray icon. You can also have @2x 32x32 png for high-resolution displays, e.g. 16x16 'tray.png' and 32x32 '[email protected]'.

Broaden

Yeah possibly because that API is deprecated now, electronjs.org/docs/api/breaking-changes#tray. I'll remove that link for clarity. – Broaden