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

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

Odpowiedzi:

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:

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

wprowadź opis obrazu tutaj

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

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ć.

  1. Utwórz katalog o nazwie buildw katalogu projektu i umieść .icnsikonę w katalogu o nazwieicon.icns .
  2. 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