icons - icono - ico to icns

Cómo configurar el ícono de la aplicación Electron/Atom Shell

Question

¿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?

Answer 1

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

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

Answer 2

El constructor de electrones admite iconos

Answer 3

Establecer la propiedad del icon al crear BrowserWindow solo tiene un efecto en Windows y Linux.

Para configurar el ícono en OS X, puede usar electron-packager paquete electron-packager y configurar el ícono 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.

Answer 4

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''));

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

Answer 5

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.

Answer 6

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á debajo del subdirectorio src /, y el ícono está debajo de assets / icons /, esta especificación de ruta de ícono funcionará:

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

Answer 7

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 el new BrowserWindow() .