Comment définir l'icône de l'application pour votre application Electron?

J'essaye BrowserWindow({icon:'path/to/image.png'});mais ça ne marche pas.

Dois-je emballer l'application pour voir l'effet?

La définition de la iconpropriété lors de la création de la propriété BrowserWindown'a d'effet que sur Windows et Linux.

Pour définir l'icône sur OS X, vous pouvez utiliser électron-packager et définir l'icône à l'aide du --iconcommutateur.

Il devra être au format .icns pour OS X. Il existe un convertisseur d'icônes en ligne qui peut créer ce fichier à partir de votre .png.

Voici la solution que j'ai:

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

Vous pouvez également le faire pour macOS. Ok, pas par code, mais avec quelques étapes simples:

1. Trouvez le fichier .icns que vous souhaitez utiliser, ouvrez-le et copiez-le via le menu Edition
2. Trouvez le electron.app, généralement dans node_modules / electron / dist
3. Ouvrez la fenêtre d'informations
4. Sélectionnez l'icône dans le coin supérieur gauche (bordure grise autour d'elle)
5. Collez l'icône via cmd + v
6. Profitez de votre icône pendant le développement :-)

En fait, c'est une chose générale non spécifique à l'électron. Vous pouvez modifier l'icône de nombreuses applications macOS comme celle-ci.

Package.json mis à jour :

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

Après la construction de l'application, vous pouvez voir les icônes. Cette solution n'affiche pas les icônes en mode développeur. Je ne configure pas d'icônes dans new BrowserWindow().

Electron Builder prend en charge les icônes

Si vous souhaitez mettre à jour l'icône de l'application dans la barre des tâches, effectuez la mise à jour suivante dans main.js (si vous utilisez typescript, alors main.ts)

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

__dirnamepointe vers le répertoire racine (même répertoire que package.json) de votre application.

Veuillez noter que les exemples de chemin de fichier d'icône ont tendance à supposer que main.js se trouve sous le répertoire de base. Si le fichier ne se trouve pas dans le répertoire de base de l'application, la spécification du chemin doit tenir compte de ce fait.

Par exemple, si le fichier main.js se trouve dans le sous-répertoire src / et que l'icône est sous assets / icons /, cette spécification de chemin d'icône fonctionnera:

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

emballeur d'électrons

Pour définir l'icône sous OS X à l'aide de electron-packager, définissez l'icône à l'aide du commutateur --icon.

Il devra être au format .icns pour OS X. Il existe un convertisseur d'icônes en ligne qui peut créer ce fichier à partir de votre .png.

constructeur d'électrons

1. Créez un répertoire nommé builddans le répertoire de votre projet et placez .icnsl'icône l'icône dans le répertoire comme nommé icon.icns.
2. exécutez le générateur en exécutant la commande electron-builder --dir.

Vous constaterez que l'icône de votre application sera automatiquement récupérée à partir de cet emplacement de répertoire et utilisée pour une application lors de l'empaquetage.

Remarque : La réponse donnée concerne la version récente electron-builderet testée avec electron-builder v21.2.0