147

Як встановити значок додатка для додатка Electron?

Я намагаюся, BrowserWindow({icon:'path/to/image.png'});але це не працює.

Чи потрібно спакувати додаток, щоб побачити ефект?

icons electron

— Джо Е.
джерело

Ви можете слідкувати за github.com/onmyway133/blog/isissue/66

— onmyway133

Одне, що ви можете зробити для Mac, - це помістити postinstallсценарій у свій проект, який автоматично скопіює файл .icns на місце під node_modules /.

— theram

164

Встановлення iconвластивості при створенні BrowserWindowєдиного впливає на Windows та Linux.

Щоб встановити піктограму на OS X, ви можете скористатися пакувачем електронів і встановити значок за допомогою --iconперемикача.

Він повинен бути у форматі .icns для OS X. Існує онлайн-конвертер значків, який може створити цей файл із вашого .png.

— Алекс Уоррен
джерело

5

Встановлення піктограми у вікні браузера у файл .PNG відобразиться на панелі завдань у вікнах. Приклад його роботи можна знайти на моєму блозі тут: mylifeforthecode.com/… Можливо, шлях повинен бути абсолютним, щоб працювати, коли я встановив його на __dirname + 'path / to / icon.png'. Однак, щоб встановити піктограму для .exe, вам потрібно буде використовувати електронний хакер-ресурс АБО хакер ресурсів.

— Шон Раковський

Чи можете ви зафіксувати цю відповідь, щоб бути точною wrt Windows?

— Ана Беттс

Дякую @ShawnRakowski, ти маєш рацію - я лише перевірив це, і властивість значка дійсно працює і в Windows. Я оновив свою відповідь, щоб це відобразити.

— Алекс Уоррен

1

Спочатку це спрацювало, але потім я надіслав розповсюджувальну програму своєму другові, і це не спрацювало! Будь-які ідеї?

— Чет

10

@Nick вам потрібно буде зробити щось на кшталт наступногоelectron-packager . YourApplicationName --all --icon "path/to/my/icon.ico"

— Mateo

47

Нижче наведено рішення, яке у мене є:

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

— Ш4м
джерело

18

Варто зазначити, що __dirname - це шлях вашої / src / папки (тобто папки вашого файлу app.js / main.js).

— Костянтин

.icnsне потрібно ?

— ishandutta2007

20

Ви можете це зробити і для macOS. Гаразд, не через код, а декілька простих кроків:

Знайдіть файл .icns, який ви хочете використовувати, відкрийте його та скопіюйте через меню редагування
Знайдіть electron.app, як правило, у node_modules / electron / dist
Відкрийте інформаційне вікно
Виберіть значок у верхньому лівому куті (сіра рамка навколо нього)
Вставте значок через cmd + v
Насолоджуйтесь іконою під час розробки :-)

Насправді це загальна річ, не властива електрону. Ви можете змінити значок багатьох подібних програм macOS.

— alexrjs
джерело

6

Це дивовижно, дякую за це. Мені потрібно було перетягнути, щоб змусити його працювати, але дивно.

— Роберт Масен

Повна інструкція: support.apple.com/kb/PH25383?locale=en_US

— AndroidDev

Це, здається, працює лише на розвиток. Коли я запускаю "dist distry пряжі", файл icns замінюється електронним за замовчуванням.

— Дейв

2

@Dave Насправді він сказав6. Enjoy your icon during *development* :-)

— Міа

Ну хлопці ... я знаю ... Але це виправлення вже понад 2 роки ... ;-) І btw. ви повинні мати можливість використовувати цей "хак" також і в остаточній версії, оскільки ви просто поміняєте його на додаток 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 (якщо використовується Typecript, то main.ts)

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

__dirnameвказує на кореневий каталог (те саме, що і каталог package.json) вашої програми.

— Харі Дас
джерело

впевнений про mac?

— Anil8753

0

Зверніть увагу, що приклади шляху до файлу значків, як правило, припускають, що main.js знаходиться під базовим каталогом. Якщо файл не знаходиться в базовому каталозі програми, специфікація контуру повинна враховувати цей факт.

Наприклад, якщо main.js знаходиться під src / підкаталогом, а значок знаходиться під активами / значками /, ця специфікація шляху значка буде працювати:

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

— Джао Ву
джерело

0

пакувальник електронів

Встановлення властивості значка при створенні BrowserWindowєдиного впливає на платформи Windows та Linux. ви повинні упакувати .icns для макс

Щоб встановити піктограму на OS X за допомогою electron-packager, встановіть її за допомогою перемикача --icon.

Він повинен бути у форматі .icns для OS X. Існує онлайн-конвертер значків, який може створити цей файл із вашого .png.

електрон-будівельник

Як останнє рішення, я знайшов альтернативу використання --iconперемикача. Ось що ви можете зробити.

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

Ви знайдете, що значок вашої програми автоматично буде зібраний з цього каталогу та використаний для програми під час упаковки.

Примітка : Дана відповідь призначена для останньої версії electron-builderта перевірена електрон-конструктором v21.2.0

— Кіран Манія
джерело

Як встановити значок програми для програми Electron / Atom Shell

пакувальник електронів

електрон-будівельник