Làm thế nào để bạn thiết lập biểu tượng ứng dụng cho ứng dụng Electron của bạn?

Tôi đang cố gắng BrowserWindow({icon:'path/to/image.png'});nhưng nó không hoạt động.

Tôi có cần phải đóng gói ứng dụng để xem hiệu quả không?

Đặt thuộc icontính khi tạo BrowserWindowchỉ có tác dụng với Windows và Linux.

Để đặt biểu tượng trên OS X, bạn có thể sử dụng trình đóng gói electron và đặt biểu tượng bằng công --icontắc.

Nó sẽ cần phải ở định dạng .icns cho OS X. Có một trình chuyển đổi biểu tượng trực tuyến có thể tạo tệp này từ .png của bạn.

Dưới đây là giải pháp mà tôi có:

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

Bạn cũng có thể làm điều đó cho macOS. Ok, không thông qua mã, nhưng với một số bước đơn giản:

1. Tìm tệp .icns bạn muốn sử dụng, mở tệp và sao chép tệp qua menu Chỉnh sửa
2. Tìm electron.app, thường là trong node_modules / electron / dist
3. Mở cửa sổ thông tin
4. Chọn biểu tượng ở góc trên cùng bên trái (viền màu xám xung quanh nó)
5. Dán biểu tượng qua cmd + v
6. Thưởng thức biểu tượng của bạn trong quá trình phát triển :-)

Trên thực tế nó là một điều chung không cụ thể đối với điện tử. Bạn có thể thay đổi biểu tượng của nhiều ứng dụng macOS như thế này.

Đã cập nhật gói.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
  }
},

Sau khi xây dựng ứng dụng, bạn có thể thấy các biểu tượng. Giải pháp này không hiển thị biểu tượng trong chế độ nhà phát triển. Tôi không thiết lập biểu tượng trong new BrowserWindow().

Trình xây dựng điện tử hỗ trợ các biểu tượng

Nếu bạn muốn cập nhật biểu tượng ứng dụng trên thanh tác vụ, thì Cập nhật theo sau trong tệp main.js (nếu sử dụng bản in rồi main.ts)

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

__dirnametrỏ đến thư mục gốc (cùng thư mục với package.json) ứng dụng của bạn.

Xin lưu ý rằng các ví dụ cho đường dẫn tệp biểu tượng có xu hướng giả định rằng main.js nằm trong thư mục cơ sở. Nếu tệp không nằm trong thư mục cơ sở của ứng dụng, đặc tả đường dẫn phải tính đến thực tế đó.

Ví dụ: nếu main.js nằm dưới src / thư mục con và biểu tượng nằm dưới nội dung / biểu tượng /, đặc tả đường dẫn biểu tượng này sẽ hoạt động:

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

đóng gói điện tử

Để đặt biểu tượng trên OS X bằng cách sử dụng electron-packager, hãy đặt biểu tượng bằng công tắc --icon.

Nó sẽ cần phải ở định dạng .icns cho OS X. Có một trình chuyển đổi biểu tượng trực tuyến có thể tạo tệp này từ .png của bạn.

người xây dựng điện tử

1. Tạo một thư mục có tên buildtrong thư mục dự án của bạn và đặt .icnsbiểu tượng trong thư mục như được đặt tên icon.icns.
2. chạy xây dựng bằng cách thực hiện lệnh electron-builder --dir.

Bạn sẽ thấy biểu tượng ứng dụng của bạn sẽ được tự động chọn từ vị trí thư mục đó và được sử dụng cho một ứng dụng trong khi đóng gói.

Lưu ý : Câu trả lời đã cho là dành cho phiên bản gần đây electron-buildervà được thử nghiệm với trình tạo electron v21.2.0