web-dev-qa-db-fra.com

Comment définir l'icône de l'application pour Electron / Atom Shell App

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

J'essaie BrowserWindow({icon:'path/to/image.png'}); mais cela ne fonctionne pas.

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

iconselectron
122
Jo E.

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

Pour définir l'icône sur OS X, vous pouvez utiliser emballeur électronique et définir 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 permettant de créer ce fichier à partir de votre fichier .png.

146
Alex Warren

Voici la solution que j'ai:

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

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

  1. Recherchez 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. Ouvrir la fenêtre d'information
  4. Sélectionnez l'icône dans le coin supérieur gauche (bordure grise autour)
  5. Coller l'icône via cmd + v
  6. Profitez de votre icône pendant le développement :-)

enter image description here

En fait, c’est une chose générale qui n’est pas propre à électron. Vous pouvez changer l'icône de nombreuses applications macOS comme celle-ci.

17
alexrjs

Mis à jour 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
  }
},

Après avoir construit l'application, vous pouvez voir les icônes. Cette solution ne montre pas les icônes en mode développeur. Je ne configure pas les icônes dans new BrowserWindow().

1
Andrey Patseiko

Veuillez noter que les exemples de chemin de fichier d'icône tendent à supposer que main.js se trouve dans 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 d'accès doit en tenir compte.

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

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

Si vous souhaitez mettre à jour l'icône de l'application dans la barre des tâches, procédez à la mise à jour en suivant dans main.js (si vous utilisez TypeScript, puis main.ts).

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

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

0
Hari Das

Générateur d'électrons supporte les icônes

0
loevborg