I was having a hard time figuring out why my Electron app macOS menu bar (“Tray” in Electron speak) icon was looking
really bad. I found this awesome detailed post from Banjo but it
didn’t help me with my Electron code until I figured out that the solution was dead simple; just add @2x version of
whatever icon you’re using and Electron will automatically use it.
Here’s my code:
const icon = nativeImage.createFromPath('path/to/icon_22.png') // 22x22px
tray = new Tray(icon)Now to make this retina-aware, just add a 44x44px png named icon_22@2x.png in the same folder as the original icon.
Turns out, this feature is actually well documented, only I was looking from the wrong place (and didn’t know what to search for).