ICONS are used in many places, packaging generated exe ICONS, runtime ICONS, system tray ICONS and so on

Here we introduce several formats:

png,jpg,icns,ico

PNG is a bitmap format with lossless compression algorithm and good compatibility. JPG: JPG generally refers to the JPEG format. JPEG (Joint Photographic Experts Group) is the product of the JPEG standard, which is formulated by the International Organization for Standardization (ISO). It is a compression standard for continuous tone still images. The JPEG format is the most common image file format, with the suffix.jpg or.jpeg. Icns: Icon files that are used as resources for applications and are uniquely supported on Macintosh operating systems. Ico: Ico is the Windows icon file format. An icon file can store an icon file with a single pattern, multiple sizes, and multiple colors. An icon is actually a collection of images in different formats and contains a certain amount of transparency.Copy the code

So in other words, ICNS is for MAC (and sometimes Linux), and ICOs are for Windows

How to make these ICONS?

1. First, prepare to ask the artist for a 1024×1024 PNG icon

There are two libraries that can help us

electron-icon-maker

For instructions on how to use the electron- icon-Builder, see readme

  • Fun note: Both rely on PhantomJS, a headless browser, which annoys me a lot. On the one hand, it is not easy to use, and on the other hand, it is difficult to download. I used Jenkins for continuous integration on Linux, which annoys me a lot.

Use in a variety of situations

1. Pack the icon

I’m using the Vue + electronic-Builder package here.

Windows uses ICO, MAC uses ICNS, Linux uses PNG or ICNS

Package icon Reference

2. Default title icon

The icon here is set from the icon property set when creating the window

new BrowserWindow({
    ******
    icon: path.join(__static, 'logo.png');
  });
Copy the code

However, there may be bugs in different versions of electron, so it is recommended to use nativeImage to introduce. You are advised to use the ICO icon in Windows and PNG icon in other operating systems

function getTrayIcon() { if (process.platform ! == 'darwin') { // windows return path.join(__static, 'icon.ico'); } return path.join(__static, 'icon.png'); } ****** new BrowserWindow({ ****** icon: nativeImage.createFromPath(getTrayIcon()), });Copy the code

Tray icon

In the same way, it is recommended to use the generated 16×16 icon on MAC.

 tray = new Tray(nativeImage.createFromPath(getTrayIcon()));
Copy the code

The resources

Package icon