¿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 icon
propiedad 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 --icon
interruptor.
Deberá estar en formato .icns para OS X. Hay un convertidor de iconos en línea que puede crear este archivo desde su .png.
electron-packager . YourApplicationName --all --icon "path/to/my/icon.ico"
A continuación se muestra la solución que tengo:
mainWindow = new BrowserWindow({width: 800, height: 600,icon: __dirname + '/Bluetooth.ico'});
.icns
innecesario ?
También puedes hacerlo para macOS. Ok, no a través del código, sino con algunos pasos simples:
En realidad es algo general no específico del electrón. Puede cambiar el ícono de muchas aplicaciones macOS como esta.
6. Enjoy your icon during *development* :-)
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'));
__dirname
apunta 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"
BrowserWindow
único tiene un efecto en las plataformas Windows y Linux. tienes que empacar los .icns para max
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.
--icon
interruptor. Esto es lo que puedes hacer.
build
en el directorio de su proyecto y coloque .icns
el icono en el directorio con el nombre icon.icns
.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-builder
y probada con electron-builder v21.2.0
postinstall
script en su proyecto que copiará el archivo .icns en su lugar en node_modules / automáticamente.