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. Хорошо, не через код, но с помощью нескольких простых шагов:

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

На самом деле это общая вещь, не специфичная для электрона. Вы можете изменить значок многих приложений 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

Электронный конструктор поддерживает иконки

— loevborg
источник

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. Вот что вы можете сделать.

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

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

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

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

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

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

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