Come si imposta l'icona dell'app per l'app Electron?

Ci sto provando BrowserWindow({icon:'path/to/image.png'});ma non funziona.

Devo impacchettare l'app per vedere l'effetto?

L'impostazione della iconproprietà durante la creazione BrowserWindowha effetto solo su Windows e Linux.

Per impostare l'icona su OS X, è possibile utilizzare elettron-packager e impostare l'icona utilizzando l' --iconinterruttore.

Dovrà essere in formato .icns per OS X. Esiste un convertitore di icone online che può creare questo file dal tuo .png.

Di seguito è la soluzione che ho:

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

Puoi farlo anche per macOS. Ok, non tramite il codice, ma con alcuni semplici passaggi:

1. Trova il file .icns che desideri utilizzare, aprilo e copialo tramite il menu Modifica
2. Trova electron.app, di solito in node_modules / electron / dist
3. Apri la finestra delle informazioni
4. Seleziona l'icona nell'angolo in alto a sinistra (bordo grigio attorno ad essa)
5. Incolla l'icona tramite cmd + v
6. Goditi la tua icona durante lo sviluppo :-)

In realtà è una cosa generale non specifica dell'elettrone. Puoi cambiare l'icona di molte app macOS come questa.

Pacchetto aggiornato :

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

Dopo l'applicazione build puoi vedere le icone. Questa soluzione non mostra le icone in modalità sviluppatore. Non imposto le icone new BrowserWindow().

Il costruttore di elettroni supporta le icone

Se vuoi aggiornare l'icona dell'app nella barra delle applicazioni, quindi Aggiorna seguendo in main.js (se usi typescript quindi main.ts)

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

__dirnamepunta alla directory principale (stessa directory package.json) dell'applicazione.

Si noti che gli esempi per il percorso del file icona tendono ad assumere che main.js si trovi nella directory di base. Se il file non si trova nella directory di base dell'app, la specifica del percorso deve tener conto di tale fatto.

Ad esempio, se main.js si trova nella sottodirectory src / e l'icona si trova in assets / icons /, questa specifica del percorso dell'icona funzionerà:

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

elettrone-confezionatore

Per impostare l'icona su OS X usando electron-packager, imposta l'icona usando l'interruttore --icon.

Dovrà essere in formato .icns per OS X. Esiste un convertitore di icone online che può creare questo file dal tuo .png.

elettrone-builder

1. Creare una directory denominata buildnella directory del progetto e inserire .icnsl'icona nella directory come denominata icon.icns.
2. eseguire il generatore eseguendo il comando electron-builder --dir.

Scoprirai che la tua icona dell'applicazione verrà automaticamente prelevata da quella posizione della directory e utilizzata per un'applicazione durante il packaging.

Nota : la risposta fornita è per la versione recente electron-buildere testata con electron-builder v21.2.0