Wie legen Sie das App-Symbol für Ihre Electron-App fest?

Ich versuche es, BrowserWindow({icon:'path/to/image.png'});aber es funktioniert nicht.

Muss ich die App packen, um den Effekt zu sehen?

Das Festlegen der iconEigenschaft beim Erstellen der Eigenschaft BrowserWindowwirkt sich nur auf Windows und Linux aus.

Um das Symbol unter OS X festzulegen , können Sie den Elektronenpacker verwenden und das Symbol mit dem --iconSchalter festlegen .

Es muss im OSNS-Format für OS X vorliegen. Es gibt einen Online- Symbolkonverter , mit dem diese Datei aus Ihrer PNG-Datei erstellt werden kann.

Unten ist die Lösung, die ich habe:

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

Sie können dies auch für macOS tun. Ok, nicht durch Code, sondern mit einigen einfachen Schritten:

1. Suchen Sie die zu verwendende ICNS-Datei, öffnen Sie sie und kopieren Sie sie über das Menü Bearbeiten
2. Finden Sie die elektron.app, normalerweise in node_modules / Electron / dist
3. Öffnen Sie das Informationsfenster
4. Wählen Sie das Symbol in der oberen linken Ecke (grauer Rand)
5. Fügen Sie das Symbol über cmd + v ein
6. Viel Spaß mit deiner Ikone während der Entwicklung :-)

Eigentlich ist es eine allgemeine Sache, die nicht elektronenspezifisch ist. Sie können das Symbol vieler MacOS-Apps wie folgt ändern.

Aktualisiert 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
  }
},

Nach dem Erstellen der Anwendung werden Symbole angezeigt. Diese Lösung zeigt im Entwicklermodus keine Symbole an. Ich richte keine Symbole ein new BrowserWindow().

Electron Builder unterstützt Symbole

Wenn Sie das App-Symbol in der Taskleiste aktualisieren möchten, klicken Sie in main.js auf Update (bei Verwendung von Typoskript auf main.ts).

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

__dirnameverweist auf das Stammverzeichnis (dasselbe Verzeichnis wie package.json) Ihrer Anwendung.

Bitte beachten Sie, dass in den Beispielen für den Pfad der Symboldatei davon ausgegangen wird, dass sich main.js im Basisverzeichnis befindet. Befindet sich die Datei nicht im Basisverzeichnis der App, muss die Pfadangabe diese Tatsache berücksichtigen.

Befindet sich die Datei main.js beispielsweise im Unterverzeichnis src / und das Symbol unter Assets / icons /, funktioniert diese Symbolpfadspezifikation:

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

Elektronenverpacker

Um das Symbol unter OS X mit electron-packagerfestzulegen, setzen Sie das Symbol mit dem Schalter --icon.

Es muss im OSNS-Format für OS X vorliegen. Es gibt einen Online-Symbolkonverter, mit dem diese Datei aus Ihrer PNG-Datei erstellt werden kann.

Elektronenbauer

1. Erstellen Sie ein Verzeichnis mit dem Namen buildin Ihrem Projektverzeichnis und fügen Sie .icnsdas Symbol wie angegeben in das Verzeichnis ein icon.icns.
2. Führen Sie den Builder aus, indem Sie den Befehl ausführen electron-builder --dir.

Sie werden feststellen, dass Ihr Anwendungssymbol automatisch von diesem Verzeichnis abgerufen und beim Packen für eine Anwendung verwendet wird.

Hinweis : Die angegebene Antwort electron-builderbezieht sich auf die aktuelle Version von und wurde mit Electron-Builder v21.2.0 getestet