¿Cómo configura el icono de la aplicación para su aplicación Electron?

Estoy intentando BrowserWindow({icon:'path/to/image.png'});pero no funciona.

¿Necesito empacar la aplicación para ver el efecto?

Establecer la iconpropiedad al crear el BrowserWindowúnico tiene un efecto en Windows y Linux.

Para configurar el icono en OS X, puede usar el paquete electrónico y configurar el icono con el --iconinterruptor.

Deberá estar en formato .icns para OS X. Hay un convertidor de iconos en línea que puede crear este archivo desde su .png.

A continuación se muestra la solución que tengo:

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

También puedes hacerlo para macOS. Ok, no a través del código, sino con algunos pasos simples:

1. Encuentre el archivo .icns que desea usar, ábralo y cópielo a través del menú Editar
2. Encuentre el electron.app, generalmente en node_modules / electron / dist
3. Abre la ventana de información.
4. Seleccione el icono en la esquina superior izquierda (borde gris a su alrededor)
5. Pegue el icono a través de cmd + v
6. Disfruta tu ícono durante el desarrollo :-)

En realidad es algo general no específico del electrón. Puede cambiar el ícono de muchas aplicaciones macOS como esta.

Package.json actualizado :

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

Después de compilar la aplicación, puede ver iconos. Esta solución no muestra iconos en modo desarrollador. No configuro iconos en new BrowserWindow().

El constructor de electrones admite iconos

Si desea actualizar el ícono de la aplicación en la barra de tareas, luego Actualice lo siguiente en main.js (si usa typecript, entonces main.ts)

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

__dirnameapunta al directorio raíz (el mismo directorio que package.json) de su aplicación.

Tenga en cuenta que los ejemplos de la ruta del archivo de icono tienden a suponer que main.js está bajo el directorio base. Si el archivo no está en el directorio base de la aplicación, la especificación de ruta debe tener en cuenta ese hecho.

Por ejemplo, si main.js está bajo el subdirectorio src /, y el ícono está bajo assets / icons /, esta especificación de ruta de ícono funcionará:

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

empaquetador de electrones

Para configurar el icono en OS X usando electron-packager, configure el icono usando el interruptor --icon.

Deberá estar en formato .icns para OS X. Hay un convertidor de iconos en línea que puede crear este archivo desde su .png.

constructor de electrones

1. Cree un directorio con nombre builden el directorio de su proyecto y coloque .icnsel icono en el directorio con el nombre icon.icns.
2. Ejecute el generador ejecutando el comando electron-builder --dir.

Encontrará que el ícono de su aplicación se recogerá automáticamente de esa ubicación de directorio y se usará para una aplicación mientras se empaqueta.

Nota : La respuesta dada es para la versión reciente electron-buildery probada con electron-builder v21.2.0