Como você define o ícone do aplicativo Electron?

Estou tentando, BrowserWindow({icon:'path/to/image.png'});mas não funciona.

Preciso compactar o aplicativo para ver o efeito?

A configuração da iconpropriedade ao criar o BrowserWindowúnico afeta o Windows e o Linux.

Para definir o ícone no OS X, você pode usar o empacotador de elétrons e definir o ícone usando o --iconcomutador.

Ele precisará estar no formato .icns do OS X. Existe um conversor de ícones on - line que pode criar esse arquivo a partir do seu .png.

Abaixo está a solução que eu tenho:

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

Você também pode fazer isso no macOS. Ok, não através do código, mas com algumas etapas simples:

1. Encontre o arquivo .icns que deseja usar, abra-o e copie-o no menu Editar
2. Encontre o arquivo electron.app, geralmente em node_modules / electron / dist
3. Abra a janela de informações
4. Selecione o ícone no canto superior esquerdo (borda cinza ao seu redor)
5. Cole o ícone via cmd + v
6. Aproveite o seu ícone durante o desenvolvimento :-)

Na verdade, é uma coisa geral não específica para o elétron. Você pode alterar o ícone de muitos aplicativos macOS como este.

Package.json atualizado :

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

Após a criação do aplicativo, você pode ver os ícones. Esta solução não mostra ícones no modo de desenvolvedor. Não configuro ícones no new BrowserWindow().

Construtor de elétrons suporta ícones

Se você deseja atualizar o ícone do aplicativo na barra de tarefas, atualize a seguir em main.js. (se estiver usando texto datilografado, então main.ts)

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

__dirnameaponta para o diretório raiz (o mesmo diretório package.json) do seu aplicativo.

Esteja ciente de que os exemplos para o caminho do arquivo de ícone tendem a assumir que o main.js está no diretório base. Se o arquivo não estiver no diretório base do aplicativo, a especificação do caminho deve levar em conta esse fato.

Por exemplo, se o main.js estiver no subdiretório src / e o ícone estiver em assets / icons /, essa especificação de caminho do ícone funcionará:

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

empacotador de elétrons

Para definir o ícone no OS X usando electron-packager, defina o ícone usando a opção --icon.

Ele precisará estar no formato .icns do OS X. Existe um conversor de ícones online que pode criar esse arquivo a partir do seu .png.

construtor de elétrons

1. Crie um diretório nomeado buildno diretório do projeto e coloque .icnso ícone no diretório como nomeado icon.icns.
2. executar construtor por comando de execução electron-builder --dir.

Você descobrirá que o ícone do seu aplicativo será automaticamente selecionado nesse local do diretório e usado para um aplicativo durante a embalagem.

Nota : A resposta fornecida é para uma versão recente electron-buildere testada com o electron-builder v21.2.0