[Electron] アプリのアイコンを設定する - electron-builder編

{
  "name": "myapp",
  /* 中略 */
  "build": {
    "appId": "net.katsubemakto.blog.app.my",
    "files": [
      "package.json",
      "index.js"
    ],
    "mac": {
      "target": "dmg",
      "icon": "build/icon.png"
    },
    "win": {
      "target": "nsis",
      "icon": "build/icon.png"
    },
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true
    }
  }
}

ビルド

ビルド方法はこれまでと変わりません。Windowsで実行する場合は先頭にnpxを付けてください。

$ electron-builder --mac --x64
$ electron-builder --win --x64

Windowsでの結果

生成された「(アプリ名).Setup.exe」からインストールウィザードを起動すると早速アイコンが利用されているのがわかります。

インストールが完了するとデスクトップにも登場！

起動すればタスクバーにももちろん表示されます。

macOSでの結果

生成されたdmgファイルをダブルクリックしマウント。その後中身を開くと先ほど設定したアイコンに置き換わっているのがわかりますね。場所がずれてるけどｗ「アプリケーション」フォルダにコピーします。

Launchpadを開くと先ほどインストールしたアプリのアイコンがちゃんと変わっています。ちょっと感動しますねｗ

もちろんアプリを起動するとDoc上のアイコンも変わってくれます。

アイコンをサイズ毎に細かく用意する

Windowsの場合

Windowsでおなじみの「ICO形式」の画像が利用できます。変換方法などはWeb上に記事がたくさんありますのでここでは割愛します。

画像形式の詳細はマイクロソフトのドキュメントをご覧ください。 docs.microsoft.com

macOSの場合

macOS上で利用されている「Apple Icon Image形式(icns)」の画像を用意する必要があります。念の為アイコン作成時にAppleが定めるガイドラインも目を通しておいてください。具体的な画像形式などにも触れられています。 developer.apple.com

作業的には以下の9種類のサイズの画像を用意し、macOSにインストールされている変換用のコマンド「iconutil」を実行するだけです。

#	サイズ	dpi	ファイル名
1	16x16	72	icon_16x16.png
2	32x32	144	icon_16x16@2x.png
3	32x32	72	icon_32x32.png
4	64x64	144	icon_32x32@2x.png
5	128x128	72	icon_128x128.png
6	256x256	144	icon_128x128@2x.png
7	256x256	72	icon_256x256.png
8	512x512	144	icon_256x256@2x.png
9	512x512	72	icon_512x512.png

上記の画像一式を「(適当な名前).iconset」という名前のフォルダを作成してつっこみ、以下のコマンドを実行すると「(適当な名前).icns」ファイルが作成されます。

$ iconutil -c icns (適当な名前).iconset

「(適当な名前).iconset」内のファイル名や画像サイズ、ファイルの個数、縦横比(アスペクト比)が違うとエラーとなりiconsetファイルが生成されない場合があるので注意が必要です。

WinodowsとmacOS用アイコンを一発で作成するシェルスクリプト

元画像（PNG形式, 512x512pixel〜）で準備するだけで、一括でWindows用のICOとmacOS用のicnsを作成してくれるBashを置いておきます。動かすにはmacOSにImageMagickがインストールされている必要があります。

準備

コマンドラインから画像の編集が行えるImageMagickをインストールします。

$ brew install imagemagick

ソースコード

macOS上で以下のコードを「makeIcon.sh」など適当な名前で保存し、実行権限を付与します。エラー処理などは省略していますので必要に応じて追加してください。

#!/bin/bash

#
# Electron用にアプリアイコンを一括作成
#
# 実行方法
#   $ ./makeIcon.sh icon.png
#

#--------------------------------#
# 定数
#--------------------------------#
#-- 元画像 (512x512px) --#
readonly ORG_FILE=$1;

#-- Windows用アイコンの生成先 --#
readonly ICON_DIR_WIN='./'

#-- macOS用アイコン --#
readonly ICONSET_DIR='icon.iconset'
readonly ICON_DIR_MAC='./'

#--------------------------------#
# macOS用
#--------------------------------#
mkdir -p $ICONSET_DIR

#-- 元画像をリサイズしてコピー --#
convert -resize 16x16!    $ORG_FILE  $ICONSET_DIR/icon_16x16.png
convert -resize 32x32!    $ORG_FILE  $ICONSET_DIR/icon_16x16@2x.png
convert -resize 32x32!    $ORG_FILE  $ICONSET_DIR/icon_32x32.png
convert -resize 64x64!    $ORG_FILE  $ICONSET_DIR/icon_32x32@2x.png
convert -resize 128x128!  $ORG_FILE  $ICONSET_DIR/icon_128x128.png
convert -resize 256x256!  $ORG_FILE  $ICONSET_DIR/icon_128x128@2x.png
convert -resize 256x256!  $ORG_FILE  $ICONSET_DIR/icon_256x256.png
convert -resize 512x512!  $ORG_FILE  $ICONSET_DIR/icon_256x256@2x.png
convert -resize 512x512!  $ORG_FILE  $ICONSET_DIR/icon_512x512.png

#-- icns形式のファイルに変換 --$
iconutil -c icns $ICONSET_DIR -o $ICON_DIR_MAC/icon.icns

#---------------------------------------
# Windows用
#---------------------------------------
convert $ORG_FILE -define icon:auto-resize $ICON_DIR_WIN/icon.ico

実行方法

以下のようにTerminalから元画像ファイルのパスをオプションで指定し実行します。

$ ./makeIcon.sh ~/Desktop/icon.png

無事に実行されれば最終的にWindows用の「icon.ico」と、macOS用の「icon.icns」が生成されるので、Electronのbuildフォルダに突っ込み、pakcage.jsonで指定すれば作業完了です。

まぁ…今となっては最初のPNG画像を1枚用意するやり方で良いのですけどねｗ一部の解像度のアイコンを差し替えたいといった場合にご利用ください。

基本的な設定方法

アイコン画像を準備

package.jsonに追記

ビルド