web-dev-qa-db-ja.com

Electron / Atom Shell App用のアプリアイコンを設定する方法

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

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

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

iconselectron
116
Jo E.

iconを作成するときにBrowserWindowプロパティを設定しても、WindowsとLinuxにのみ影響があります。

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

それはOS Xのための.icnsフォーマットである必要があるでしょう。あなたの.pngからこのファイルを作ることができる オンラインアイコンコンバータ があります。

141
Alex Warren

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

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

あなたはmacOSのためにもそれをすることができます。わかりました、コードではなく、いくつかの簡単な手順で。

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

enter image description here

実はそれは電子に特有のものではない一般的なものです。あなたはこのように多くのmacOSアプリのアイコンを変更することができます。

17
user6917

更新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()にアイコンを設定しません。

1
Andrey Patseiko

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

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

icon: __dirname + "../assets/icons/icon.png"
0
Giao Vu

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

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

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

0
Hari Das

電子ビルダー アイコンをサポート

0
loevborg