Como definir o ícone do aplicativo para o aplicativo Electron / Atom Shell

147

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?

icons electron Jo E.
fonte
Você pode seguir github.com/onmyway133/blog/issues/66
onmyway133
Uma coisa que você pode fazer no Mac é colocar um postinstallscript no seu projeto que copie o arquivo .icns no local em node_modules / automaticamente.
theram

Respostas:

164

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.

Alex Warren
fonte
5
Definir o ícone na Janela do Navegador como um arquivo .PNG será exibido na barra de tarefas no Windows. Um exemplo disso pode ser encontrado no meu blog aqui: mylifeforthecode.com/… Pode ser que o caminho precise ser absoluto para funcionar como eu o defini como __dirname + 'path / to / icon.png'. No entanto, para definir o ícone do .exe, você precisará usar o hacker de recursos OR do empacotador de elétrons.
Shawn Rakowski
Você pode corrigir esta resposta para ser preciso no Windows wrt, por favor?
Ana Betts
Obrigado @ShawnRakowski, você está certo - acabei de testar isso e a propriedade icon também funciona no Windows. Atualizei minha resposta para refletir isso.
Alex Warren
1
Isso funcionou no começo, mas depois enviei o aplicativo distribuível para o meu amigo e não funcionou! Alguma ideia?
Chet
10
@ Nick, você precisará fazer algo parecido com o seguinte #electron-packager . YourApplicationName --all --icon "path/to/my/icon.ico"
Mateo
47

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

mainWindow = new BrowserWindow({width: 800, height: 600,icon: __dirname + '/Bluetooth.ico'});
Sh4m
fonte
18
Vale ressaltar que __dirname é o caminho da sua pasta / src / (ou seja, a pasta do seu arquivo app.js / main.js).
Konstantin
.icnsnão é necessário ?
ishandutta2007
20

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

insira a descrição da imagem aqui

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

alexrjs
fonte
6
Isso é incrível, obrigado por isso. Eu precisava arrastar e soltar para fazê-lo funcionar, mas incrível mesmo assim.
Robert Masen
Instruções completas: support.apple.com/kb/PH25383?locale=en_US
AndroidDev
Isso parece funcionar apenas para o desenvolvimento. Quando executo 'yarn dist', o arquivo icns é substituído pelo elétron padrão.
Dave
2
@Dave Na verdade, ele disse6. Enjoy your icon during *development* :-)
Mia
Bom galera ... eu sei ... Mas essa correção tem mais de 2 anos ... ;-) E aliás. você deve poder usar esse "hack" também em uma versão final, já que simplesmente o altera no aplicativo dist ... Não tente por um tempo .. E quem sabe talvez exista uma maneira oficial agora ... ;-)
alexrjs 21/02/19
12

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

Andrey Patseiko
fonte
1

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.

Hari Das
fonte
certo sobre mac?
Anil8753 30/06
0

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

empacotador de elétrons

A configuração da propriedade icon ao criar o BrowserWindowúnico afeta as plataformas Windows e Linux. você precisa empacotar o .icns para max

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

Como uma solução mais recente, encontrei uma alternativa de usar o --iconswitch. Aqui está o que você pode fazer.

  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

Kiran Maniya
fonte