Как установить значок приложения для Electron / Atom Shell App

147

Как установить значок приложения для своего приложения Electron?

Я пытаюсь, BrowserWindow({icon:'path/to/image.png'});но это не работает.

Нужно ли упаковать приложение, чтобы увидеть эффект?

icons electron Джо Э.
источник
Вы можете подписаться на github.com/onmyway133/blog/issues/66
onmyway133
Одна вещь, которую вы можете сделать для Mac, - это вставить postinstallскрипт в ваш проект, который автоматически скопирует файл .icns на место в node_modules /.
Терал

Ответы:

164

Установка iconсвойства при создании BrowserWindowтолько влияет на Windows и Linux.

Чтобы установить значок в OS X, вы можете использовать электронный упаковщик и установить значок с помощью --iconпереключателя.

Он должен быть в формате .icns для OS X. Существует онлайн-конвертер иконок, который может создать этот файл из вашего .png.

Алекс Уоррен
источник
5
Установка значка в BrowserWindow в файл .PNG будет отображаться на панели задач в Windows. Пример того, как это работает, можно найти в моем блоге здесь: mylifeforthecode.com/… Возможно, путь должен быть абсолютным, чтобы работать, поскольку я установил __dirname + 'path / to / icon.png'. Однако, чтобы установить значок для .exe, вам нужно будет использовать электронный пакет ИЛИ хакер ресурсов.
Шон Раковски
Можете ли вы исправить этот ответ, чтобы быть точным относительно Windows, пожалуйста?
Ана Беттс
Спасибо @ShawnRakowski, вы правы - я только что проверил это, и свойство icon действительно работает и в Windows. Я обновил свой ответ, чтобы отразить это.
Алекс Уоррен
1
Сначала это сработало, но потом я отправил распространяемое приложение своему другу, и оно не сработало! Любые идеи?
Чет
10
@ Ник, тебе нужно будет сделать что-то вроде следующегоelectron-packager . YourApplicationName --all --icon "path/to/my/icon.ico"
Матео
47

Ниже приведено решение, которое у меня есть:

mainWindow = new BrowserWindow({width: 800, height: 600,icon: __dirname + '/Bluetooth.ico'});
Sh4m
источник
18
Стоит отметить, что __dirname - это путь к вашей папке / src / (то есть папке вашего файла app.js / main.js).
Константин
.icnsне нужно ?
ishandutta2007
21

Вы можете сделать это и для macOS. Хорошо, не через код, но с помощью нескольких простых шагов:

  1. Найдите файл .icns, который вы хотите использовать, откройте его и скопируйте через меню «Правка».
  2. Найдите файл Electron.app, обычно в node_modules / Electron / Dist.
  3. Откройте информационное окно
  4. Выберите значок в левом верхнем углу (вокруг него серая рамка)
  5. Вставьте значок через cmd + v
  6. Наслаждайтесь своей иконкой во время разработки :-)

введите описание изображения здесь

На самом деле это общая вещь, не специфичная для электрона. Вы можете изменить значок многих приложений MacOS, как это.

alexrjs
источник
6
Это удивительно, спасибо за это. Мне нужно было перетащить, чтобы заставить его работать, но тем не менее удивительно.
Роберт Масен
Полная инструкция: support.apple.com/kb/PH25383?locale=en_US
AndroidDev
Кажется, это работает только для развития. Когда я запускаю 'yarn dist', файл icns заменяется электронным файлом по умолчанию.
Дэйв
2
@Dave На самом деле он сказал6. Enjoy your icon during *development* :-)
Mia
Ну, ребята ... Я знаю ... Но это исправление более 2 лет ... ;-) И кстати. Вы должны быть в состоянии использовать этот «хак» и в финальной сборке, так как вы просто меняете его в приложении dist ... Некоторое время не пытался .. И кто знает, может быть, есть официальный способ, сейчас ... ;-)
alexrjs
12

Обновлен package.json:

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

После сборки приложения вы можете увидеть иконки. Это решение не отображает значки в режиме разработчика. Я не настраиваю иконки в new BrowserWindow().

Андрей Пацейко
источник
1

Если вы хотите обновить значок приложения на панели задач, то обновите следующее в main.js (если используете typcript, то main.ts)

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

__dirnameуказывает на корневой каталог (тот же каталог, что и package.json) вашего приложения.

Хари Дас
источник
уверены в Mac?
Anil8753
0

Помните, что в примерах пути к значку файла предполагается, что main.js находится в базовом каталоге. Если файл не находится в базовом каталоге приложения, указание пути должно учитывать этот факт.

Например, если файл main.js находится в подкаталоге src /, а значок - в assets / icons /, эта спецификация пути к значку будет работать:

icon: __dirname + "../assets/icons/icon.png"
Джао Ву
источник
0

электронно-упаковщик

Установка свойства значка при создании BrowserWindowтолько влияет на платформы Windows и Linux. Вы должны упаковать .icns для макс

Чтобы установить значок в OS X с помощью electron-packager, установите значок с помощью ключа --icon.

Он должен быть в формате .icns для OS X. Существует онлайн-конвертер иконок, который может создать этот файл из вашего .png.

электронно-строитель

В качестве самого последнего решения я нашел альтернативу использованию --iconswitch. Вот что вы можете сделать.

  1. Создайте каталог с именем buildв каталоге вашего проекта и поместите .icnsзначок в каталог с именем icon.icns.
  2. запустить строитель, выполнив команду electron-builder --dir.

Вы увидите, что значок вашего приложения будет автоматически выбран из этого каталога и использован для приложения во время упаковки.

Примечание . Данный ответ относится к последней версии electron-builderи протестирован на электронном сборщике v21.2.0.

Киран Мания
источник