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

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

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

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

Ответы

Ответ 1

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

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

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

Ответ 2

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

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

Ответ 3

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

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

enter image description here

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

Ответ 4

Обновлен 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().

Ответ 6

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

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

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

Ответ 7

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

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

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

Ответ 8

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

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

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

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