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

147

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?

Jo E.
la source
Vous pouvez suivre github.com/onmyway133/blog/issues/66
onmyway133
Une chose que vous pouvez faire pour Mac est de mettre un postinstallscript dans votre projet qui copiera automatiquement le fichier .icns sous node_modules /.
theram

Réponses:

164

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.

Alex Warren
la source
5
La définition de l'icône de BrowserWindow sur un fichier .PNG s'affichera dans la barre des tâches de Windows. Un exemple de son fonctionnement peut être trouvé sur mon blog ici: mylifeforthecode.com/ ... Il se peut que le chemin doive être absolu pour fonctionner, car je l'ai défini sur __dirname + 'path / to / icon.png'. Cependant, pour définir l'icône pour le .exe, vous devrez utiliser électron-packager OU un hacker de ressources.
Shawn Rakowski
Pouvez-vous corriger cette réponse pour qu'elle soit précise avec Windows s'il vous plaît?
Ana Betts
Merci @ShawnRakowski, vous avez raison - je viens de tester cela et la propriété icon fonctionne également sous Windows. J'ai mis à jour ma réponse pour refléter cela.
Alex Warren
1
Cela a fonctionné au début, mais j'ai ensuite envoyé l'application distribuable à mon ami et cela n'a pas fonctionné! Des idées?
Chet
10
@Nick, vous devrez faire quelque chose comme ce qui suitelectron-packager . YourApplicationName --all --icon "path/to/my/icon.ico"
Mateo
47

Voici la solution que j'ai:

mainWindow = new BrowserWindow({width: 800, height: 600,icon: __dirname + '/Bluetooth.ico'});
Sh4m
la source
18
Il convient de mentionner que __dirname est le chemin de votre dossier / src / (c'est-à-dire le dossier de votre fichier app.js / main.js).
Konstantin
.icnspas besoin ?
ishandutta2007
20

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

entrez la description de l'image ici

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.

alexrjs
la source
6
C'est incroyable, merci pour cela. J'ai eu besoin de glisser-déposer pour que cela fonctionne, mais c'est quand même incroyable.
Robert Masen
Instructions complètes: support.apple.com/kb/PH25383?locale=en_US
AndroidDev
Cela semble ne fonctionner que pour le développement. Lorsque j'exécute 'yarn dist', le fichier icns est remplacé par le fichier électronique par défaut.
Dave le
2
@Dave Actually he said6. Enjoy your icon during *development* :-)
Mia
Eh bien les gars ... Je sais ... Mais ce correctif a plus de 2 ans ... ;-) Et btw. vous devriez pouvoir utiliser ce "hack" également sur une version finale, puisque vous le changez simplement sur l'application dist ... Je n'ai pas essayé depuis un moment .. Et qui sait peut-être qu'il existe un moyen officiel, maintenant ... ;-)
alexrjs
12

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

Andrey Patseiko
la source
1

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.

Hari Das
la source
sûr de mac?
Anil8753
0

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

emballeur d'électrons


La définition de la propriété icon lors de la création BrowserWindown'a d'effet que sur les plates-formes Windows et Linux. vous devez empaqueter les .icns pour max

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


En tant que solution la plus récente, j'ai trouvé une alternative à l'utilisation de --iconswitch. Voici ce que vous pouvez faire.

  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

Kiran Maniya
la source