So legen Sie das App-Symbol für die Electron / Atom Shell App fest

147

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?

Jo E.
quelle
Sie können github.com/onmyway133/blog/issues/66
onmyway133
Eine Sache, die Sie für Mac tun können, ist, ein postinstallSkript in Ihr Projekt einzufügen, das die .icns-Datei unter node_modules / automatisch kopiert.
Theram

Antworten:

164

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.

Alex Warren
quelle
5
Wenn Sie das Symbol im BrowserWindow auf eine PNG-Datei setzen, wird dies in der Taskleiste in Windows angezeigt. Ein Beispiel dafür finden Sie in meinem Blog hier: mylifeforthecode.com/… Es kann sein, dass der Pfad absolut sein muss, damit er funktioniert, wenn ich ihn auf __dirname + 'path / to / icon.png' setze. Um das Symbol für die EXE-Datei festzulegen, müssen Sie jedoch den Elektronenpacker ODER den Ressourcenhacker verwenden.
Shawn Rakowski
Können Sie diese Antwort korrigieren, um sie für Windows korrekt zu machen?
Ana Betts
Danke @ShawnRakowski, Sie haben Recht - ich habe dies gerade getestet und die Icon-Eigenschaft funktioniert tatsächlich auch unter Windows. Ich habe meine Antwort aktualisiert, um dies widerzuspiegeln.
Alex Warren
1
Das hat zuerst funktioniert, aber dann habe ich die verteilbare App an meinen Freund gesendet und es hat nicht funktioniert! Irgendwelche Ideen?
Chet
10
@ Nick müssen Sie etwas wie das folgende tunelectron-packager . YourApplicationName --all --icon "path/to/my/icon.ico"
Mateo
47

Unten ist die Lösung, die ich habe:

mainWindow = new BrowserWindow({width: 800, height: 600,icon: __dirname + '/Bluetooth.ico'});
Sh4m
quelle
18
Erwähnenswert ist, dass __dirname der Pfad Ihres / src / -Ordners ist (dh der Ordner Ihrer Datei app.js / main.js).
Konstantin
.icnsnicht benötigt ?
ishandutta2007
20

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 :-)

Geben Sie hier die Bildbeschreibung ein

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

alexrjs
quelle
6
Das ist unglaublich, danke dafür. Ich musste ziehen und ablegen, um es zum Laufen zu bringen, aber trotzdem erstaunlich.
Robert Masen
Vollständige Anweisungen: support.apple.com/kb/PH25383?locale=de_DE
AndroidDev
Dies scheint nur für die Entwicklung zu funktionieren. Wenn ich 'yarn dist' starte, wird die icns-Datei durch die Standard-Elektronendatei ersetzt.
Dave
2
@ Dave Eigentlich sagte er6. Enjoy your icon during *development* :-)
Mia
Na Leute ... ich weiß ... Aber dieser Fix ist über 2 Jahre alt ... ;-) Und übrigens. Sie sollten in der Lage sein, diesen "Hack" auch für einen endgültigen Build zu verwenden, da Sie ihn einfach in der dist-App ändern ... Ich habe es eine Weile nicht versucht. Und wer weiß, vielleicht gibt es jetzt einen offiziellen Weg ... ;-)
alexrjs
12

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().

Andrey Patseiko
quelle
1

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.

Hari Das
quelle
sicher über Mac?
Anil8753
0

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"
Giao Vu
quelle
0

Elektronenverpacker


Das Festlegen der Symboleigenschaft beim Erstellen des Symbols BrowserWindowwirkt sich nur auf Windows- und Linux-Plattformen aus. Sie müssen die .icns für max

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


Als neueste Lösung habe ich eine Alternative zur Verwendung von --iconSwitch gefunden. Hier ist was Sie tun können.

  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

Kiran Maniya
quelle