BMS, Movie, Illustrations, Programming

electron-builder でアプリアイコンを PNG にするな

※ タイトルを簡潔で分かりやすくするために「~するな」という表記を用いていますが、これはあくまで強調表現であり、他人に何らかの行為を強要するものではございません。

electron-builder でアイコンを PNG にするとジャギーが生じてしまう

※ Windows 11 です。

Icons look jagged on Windows 10+ when using 256×256 icon due to bad downscaling, but that’s the minimum allowed size #7328

で、とりあえずユーザー側の解決策としては、アイコンとして PNG ではなくマルチアイコンの ICO ファイルを使用するということみたいです。

The alternative route is how I always took it in the past. Just generate your own .ico file from your svg with all resolutions you need/want, then supply it through

--- a/desktop/package.json
+++ b/desktop/package.json
@@ -13,14 +13,14 @@
     ],
     "mac": {
       "target": "dmg",
-      "icon": "resources/icon.png"
+      "icon": "resources/icon.ico"  , "comment" : "// ※記事末尾に追記あり"
     },
     "win": {
       "target": [
         "nsis",
         "portable"
       ],
-      "icon": "resources/icon.png"
+      "icon": "resources/icon.ico"
     },
     "nsis": {
       "oneClick": false,

PNG 画像から ICO ファイルを生成できるサイト

Favicon ジェネレーター

PNG 画像から ICO ファイルを生成できるコマンドラインツール(内容未確認)

動作未確認ですが、コマンドラインでアイコンファイルを作成できるツールもあるようです。

Imagemagick で png から favicon を作る | Zenn

https://github.com/idesis-gmbh/png2icons

ICO ファイルに格納されている各サイズの画像を確認できるサイト

マルチアイコンになっているかどうかは以下のサイトで確認できます。

ICOビューワー icoファイルに含まれる画像を表示

※ 2026/3/14 追記

Mac では .ico は使えないので、 Windows のみ ico に差し替えるのが正しい方法です。

Mac の環境が手元にないため、PNG でジャギーが発生するかどうかまでは調べられませんでした。

もし、専用の形式を用いたければ、Mac 用の icns ファイルを用意してビルドに使用することができます。

--- a/desktop/package.json
+++ b/desktop/package.json
@@ -13,14 +13,14 @@
     ],
     "mac": {
       "target": "dmg",
       "icon": "resources/icon.png"
     },
     "win": {
       "target": [
         "nsis",
         "portable"
       ],
-      "icon": "resources/icon.png"
+      "icon": "resources/icon.ico"
     },
     "nsis": {
       "oneClick": false,