147

Jak ustawić ikonę aplikacji dla swojej aplikacji Electron?

Próbuję, BrowserWindow({icon:'path/to/image.png'});ale to nie działa.

Czy muszę spakować aplikację, aby zobaczyć efekt?

icons electron

— Jo E.
źródło

Możesz śledzić github.com/onmyway133/blog/issues/66

— onmyway133

Jedną z rzeczy, które możesz zrobić na Macu, jest umieszczenie postinstallw swoim projekcie skryptu, który skopiuje plik .icns w miejscu w node_modules / automatycznie.

— term

164

Ustawienie iconwłaściwości podczas tworzenia BrowserWindowma wpływ tylko na Windows i Linux.

Aby ustawić ikonę w systemie OS X, możesz użyć narzędzia electron-packager i ustawić ikonę za pomocą --iconprzełącznika.

W przypadku systemu OS X musi on mieć format .icns. Istnieje internetowy konwerter ikon, który może utworzyć ten plik z pliku .png.

— Alex Warren
źródło

5

Ustawienie ikony w BrowserWindow na plik .PNG pojawi się na pasku zadań w systemie Windows. Przykład tego działania można znaleźć na moim blogu tutaj: mylifeforthecode.com/… Może się zdarzyć, że ścieżka musi być bezwzględna, aby działała, ponieważ ustawiłem ją na __dirname + 'path / to / icon.png'. Jednak aby ustawić ikonę dla pliku .exe, będziesz musiał użyć narzędzia do pakowania elektroniki LUB hakera zasobów.

— Shawn Rakowski

Czy możesz naprawić tę odpowiedź, aby była dokładna w systemie Windows?

— Ana Betts

Dzięki @ShawnRakowski, masz rację - właśnie to przetestowałem i właściwość icon rzeczywiście działa również w systemie Windows. Zaktualizowałem odpowiedź, aby to odzwierciedlić.

— Alex Warren,

1

Na początku to działało, ale potem wysłałem aplikację do dystrybucji do mojego przyjaciela i nie zadziałało! Jakieś pomysły?

— Chet

10

@Nick, będziesz musiał zrobić coś takiegoelectron-packager . YourApplicationName --all --icon "path/to/my/icon.ico"

— Mateo

47

Poniżej rozwiązanie, które mam:

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

— Sh4m
źródło

18

Warto wspomnieć, że __dirname to ścieżka do twojego / src / folder (tj. Folder twojego pliku app.js / main.js).

— Konstantin

.icnsnie są potrzebne ?

— ishandutta2007

20

Możesz to zrobić także dla macOS. Ok, nie kodem, ale kilkoma prostymi krokami:

Znajdź plik .icns, którego chcesz użyć, otwórz go i skopiuj za pomocą menu Edycja
Znajdź electron.app, zwykle w node_modules / electron / dist
Otwórz okno informacyjne
Wybierz ikonę w lewym górnym rogu (wokół niej szara ramka)
Wklej ikonę za pomocą cmd + v
Ciesz się swoją ikoną podczas tworzenia :-)

Właściwie jest to rzecz ogólna, nie specyficzna dla elektronu. Możesz zmienić ikonę wielu aplikacji macOS, takich jak ta.

— alexrjs
źródło

6

To niesamowite, dziękuję za to. Musiałem przeciągać i upuszczać, aby to zadziałało, ale mimo to niesamowite.

— Robert Masen

Pełne instrukcje: support.apple.com/kb/PH25383?locale=en_US

— AndroidDev

Wydaje się, że działa to tylko na rozwój. Kiedy uruchamiam „yarn dist”, plik icns zostaje zastąpiony domyślnym plikiem elektronowym.

— Dave

2

@Dave Właściwie powiedział6. Enjoy your icon during *development* :-)

— Mia

No cóż ... Wiem ... Ale ta poprawka ma ponad 2 lata ... ;-) A tak przy okazji. powinieneś być w stanie użyć tego "hacka" również w ostatecznej wersji, ponieważ po prostu zmieniasz go w aplikacji dist ... Nie próbowałem przez jakiś czas .. I kto wie, może jest oficjalny sposób, teraz ... ;-)

— alexrjs

12

Zaktualizowany plik 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
  }
},

Po zbudowaniu aplikacji zobaczysz ikony. To rozwiązanie nie wyświetla ikon w trybie programisty. Nie konfiguruję ikon w new BrowserWindow().

— Andrey Patseiko
źródło

1

Konstruktor elektronów obsługuje ikony

— loevborg
źródło

1

Jeśli chcesz zaktualizować ikonę aplikacji na pasku zadań, następnie Aktualizuj następujące w main.js (jeśli używasz skryptu, to main.ts)

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

__dirnamewskazuje na katalog główny (taki sam jak package.json) aplikacji.

— Hari Das
źródło

pewny co do Maca?

— Anil8753

0

Należy pamiętać, że w przykładach ścieżki pliku ikon zakłada się, że plik main.js znajduje się w katalogu podstawowym. Jeśli plik nie znajduje się w katalogu podstawowym aplikacji, specyfikacja ścieżki musi uwzględniać ten fakt.

Na przykład, jeśli plik main.js znajduje się w podkatalogu src /, a ikona znajduje się w obszarze asset / icons /, ta specyfikacja ścieżki ikony będzie działać:

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

— Giao Vu
źródło

0

pakowacz elektronów

Ustawienie właściwości icon podczas tworzenia BrowserWindowma wpływ tylko na platformy Windows i Linux. musisz spakować .icns dla max

Aby ustawić ikonę w systemie OS X za pomocą electron-packager, ustaw ikonę za pomocą przełącznika --icon.

W przypadku systemu OS X musi on mieć format .icns. Istnieje internetowy konwerter ikon, który może utworzyć ten plik z pliku .png.

budowniczy elektronów

Jako najnowsze rozwiązanie znalazłem alternatywę użycia --iconprzełącznika. Oto, co możesz zrobić.

Utwórz katalog o nazwie buildw katalogu projektu i umieść .icnsikonę w katalogu o nazwieicon.icns .
uruchom program budujący, wykonując polecenie electron-builder --dir.

Przekonasz się, że ikona aplikacji zostanie automatycznie pobrana z tej lokalizacji katalogu i wykorzystana przez aplikację podczas pakowania.

Uwaga : podana odpowiedź dotyczy najnowszej wersji programu electron-builderElectron Builder 21.2.0 i została przetestowana z nim

— Kiran Maniya
źródło

Jak ustawić ikonę aplikacji dla aplikacji Electron / Atom Shell

pakowacz elektronów

budowniczy elektronów