Electronアプリのアプリアイコンをどのように設定しますか？

私は試してBrowserWindow({icon:'path/to/image.png'});いますが、うまくいきません。

効果を確認するためにアプリをパックする必要がありますか？

icon作成時にプロパティを設定するBrowserWindowと、WindowsとLinuxにのみ影響します。

OS Xでアイコンを設定するには、electron-packagerを使用し、--iconスイッチを使用してアイコンを設定できます。

OS Xでは.icns形式である必要があります。.png からこのファイルを作成できるオンラインアイコンコンバーターがあります。

以下は私が持っている解決策です：

mainWindow = new BrowserWindow({width: 800, height: 600,icon: __dirname + '/Bluetooth.ico'});

macOSでもできます。コードではなく、いくつかの簡単な手順でわかりました。

1. 使用する.icnsファイルを見つけて開き、[編集]メニューからコピーします
2. 通常はnode_modules / electron / distでelectron.appを見つけます。
3. 情報ウィンドウを開く
4. 左上隅のアイコン（その周りの灰色の境界線）を選択します
5. cmd + vでアイコンを貼り付けます
6. 開発中にアイコンをお楽しみください:-)

実はこれは電子に限らず一般的なことです。このような多くのmacOSアプリのアイコンを変更できます。

更新されたpackage.json：

"build": {
  "appId": "com.my-website.my-app",
  "productName": "MyApp",
  "copyright": "Copyright © 2019 ${author}",
  "mac": {
    "icon": "./public/icons/mac/icon.icns",     <---------- set Mac Icons
    "category": "public.app-category.utilities"
  },
  "win": {
    "icon": "./public/icons/png/256x256.png" <---------- set Win Icon
  },
  "files": [
    "./build/**/*",
    "./dist/**/*",
    "./node_modules/**/*",
    "./public/**/*",       <---------- need for get access to icons
    "*.js"
  ],
  "directories": {
    "buildResources": "public" <---------- folder where placed icons
  }
},

アプリケーションをビルドすると、アイコンが表示されます。このソリューションは、開発者モードではアイコンを表示しません。でアイコンを設定しませんnew BrowserWindow()。

Electronビルダーはアイコンをサポートしています

タスクバーのアプリアイコンを更新する場合は、main.jsで次のように更新します（typescriptを使用している場合はmain.ts）

win.setIcon(path.join(__dirname, '/src/assets/logo-small.png'));

__dirnamepackage.jsonアプリケーションのルートディレクトリ（と同じディレクトリ）を指します。

アイコンファイルパスの例では、main.jsがベースディレクトリの下にあると想定する傾向があることに注意してください。ファイルがアプリのベースディレクトリにない場合は、パス指定でそのことを考慮する必要があります。

たとえば、main.jsがsrc /サブディレクトリの下にあり、アイコンがassets / icons /の下にある場合、次のアイコンパス指定が機能します。

icon: __dirname + "../assets/icons/icon.png"

電子パッケージャー

OS Xでを使用しelectron-packagerてアイコンを設定するには、--iconスイッチを使用してアイコンを設定します。

OS Xでは.icns形式である必要があります。.pngからこのファイルを作成できるオンラインアイコンコンバーターがあります。

電子ビルダー

1. buildプロジェクトディレクトリにという名前のディレクトリを作成し.icns、アイコンをnamedとしてディレクトリに配置しますicon.icns。
2. commandを実行してビルダーを実行しelectron-builder --dirます。

アプリケーションのアイコンがそのディレクトリの場所から自動的に取得され、パッケージ化中にアプリケーションに使用されます。

注：指定された答えは、electron-builderelectron-builder v21.2.0の最近のバージョンでテストされたものです。