Creating an Electron DMG Installer with a Custom Background Image

For as long as I can remember Apple has never cared about the application installation experience, a decision I've always found curious considering their otherwise fanatical obsession with quality. If you have ever installed an application on a Mac, you've likely seen the default installer window that looks like this:

Even if the user understands the application icon must be dragged to the Applications folder, there is by default no additional feedback which indicates installation was successful, nor further information regarding how to "Eject" the installer disk image. Fortunately, if you're using ElectronJS it's possible to customize the installer experience in order to provide additional guidance. But even this is not without its own set of challenges and so I wanted to share some information that might help you get started.

The Default DMG Installer Background Image Size

The default DMG installer background image size is 540x380 pixels. The file name and location can be defined using the background property like so:

  makers: [
    ...,
    {
      name: '@electron-forge/maker-dmg',
      config: {
        background: 'build/background.png',
        format: 'ULFO',
        window: {
          width: 540,
          height: 380
        }
      }
    }
  ],

If you're creating macOS apps in 2024 or beyond then your users are possibly running Retina displays. This means you'll want to create a second background image specifically for Retina displays. This image should be called background@2x.png and should be twice the size of the original background.png image (1080x760 pixels).