How to set app icon for Electron / Atom Shell App

When setting icons for Electron applications, several steps and considerations should be considered. Electron is a framework for building desktop applications using web technologies such as JavaScript, HTML, and CSS. It allows you to build cross-platform applications for Windows, Mac, and Linux using the same codebase.

Steps to Set Icons

1. Prepare Icon Files

   • First, you need to prepare icon files. Typically, icons are in .ico format for Windows, .icns for macOS, or .png for Linux. Ensure the design of the icons aligns with the application's style and brand identity.
   • Prepare different icon files for each platform, as each has specific size and format requirements.

2. Reference Icons in Electron Configuration

   • When developing an Electron application, you will have a main process JavaScript file, typically named main.js or index.js. You can set the window icon in the BrowserWindow class when creating the window.

   Example code:

   javascript
   const { app, BrowserWindow } = require('electron');
   
   function createWindow() {
       // Create browser window
       let win = new BrowserWindow({
           width: 800,
           height: 600,
           icon: 'path/to/your/icon.ico' // Use relative or absolute path to the icon file
       });
   
       // Load your application's index.html
       win.loadFile('index.html');
   }
   
   app.whenReady().then(createWindow);

3. Include Icons When Packaging the Application

   • When using tools like electron-packager or electron-builder to package your Electron application, ensure that the icon path is specified in the configuration file.
   • For electron-builder, set the icon path in the build section of package.json.

   Example electron-builder configuration:

   json
   "build": {
       "appId": "your.app.id",
       "mac": {
           "icon": "icons/icon.icns"
       },
       "win": {
           "icon": "icons/icon.ico"
       },
       "linux": {
           "icon": "icons/"
       }
   }

Considerations

• Ensure that the icon files are not corrupted and display correctly on all target platforms.
• Test the application's icon display across different platforms to ensure compatibility and visual appeal.
• Considering that different devices may have varying resolutions and screen sizes, you might need to prepare icons of different sizes.

By following the above steps and considerations, you can effectively set icons for your Electron application, ensuring a good user experience and brand recognition across all platforms.