electron-forge で諸々の icon を設定する

Generating your icon can be done using various conversion tools found online. It is recommended to start with a 1024x1024px image before converting it to various sizes.

とりあえず、1024x1024px の png を作って、それを元に macOS, windows 用の icon file を作る。

• macOS => icns file
• windows => ico file

"png to icns" "png to ico" とかでググると、無料のオンライン変換ツールが出てくるので、icns, ico file を作る。

packager config に icon を設定

icns, ico file を任意の directory に配置し、その path を指定する。

icon.icns, icon.ico のように、"同じ名前.拡張子"の形で配置し、拡張子なしで指定する。

const config: ForgeConfig = {
  packagerConfig: {
    icon: './assets/icon',
  },
  //...
}

macOS, windows はこれで app icon が設定される。

chatGPT で画像生成して、そこから icns 変換して試してみる。

const config: ForgeConfig = {
  packagerConfig: {
    name: 'MyApp',
    icon: './assets/icon',
  },
  //...
}

こんな感じになる↓

Linux はこちら参照↓

https://www.electronforge.io/guides/create-and-add-icons#linux

macOS の dmg の icon

macOS の installer を作成する場合は、@electron-forge/maker-dmg を利用する。

https://www.electronforge.io/config/makers/dmg

MakerDmg の設定値

https://js.electronforge.io/interfaces/_electron_forge_maker_dmg.MakerDMGConfig.html

icon の設定

icon の設定方法は MakerDMG の icon に icns file の path を指定すればOK

chatGPT で生成した画像を元に ./assets/installer.icns を設定↓

const config: ForgeConfig = {
  //...
  makers: [
    //...
    new MakerDMG({
      icon: './assets/installer.icns'
      name: 'installer',
    }),
  ],
  //...
};

こんな感じになる↓

この icon をクリックすると、これが開く↓

デフォルトの icon

下記のように icon を指定しない場合、electron の icon が利用される↓

const config: ForgeConfig = {
  //...
  makers: [
    //...
    new MakerDMG({
      name: "installer"
    }),
  ],
  //...
};

icns 以外の拡張子を指定した場合

icon で icns 以外の拡張子の file (e.g. png, webp とか) を指定するとこうなる↓

windows の installer (Squirrel.Windows の Setup.exe) の icon

@electron-forge/maker-squirrel を利用して、windows 用の installer 的なもの (Squirrel.Windows の SquSetup.exe) を作る。

https://www.electronforge.io/config/makers/squirrel.windows

MakerSquirrel の設定値

The Squirrel.Windows maker inherits all of its config options from the electron-winstaller module, except for appDirectory and outputDirectory, which are set by the maker.

electron-winstaller の設定値 (appDirectory, outputDirectory は除く) と同じ

https://github.com/electron/windows-installer

icon を設定する

setupIcon: The ICO file to use as the icon for the generated Setup.exe

setupIcon に ico file の path を指定すればOK

const config: ForgeConfig = {
  //...
  makers: [
    new MakerSquirrel({
      //...
      setupIcon: './assets/installer.ico',
    }),
    //...
  ],
  //...
};

こんな感じになる↓

ちなみに、何も設定しなかった場合は、macOS の場合と同様に electron の icon が利用される。