Customizing App Icon

[ProfessorPeregrine]

I have been trying to figure out how to customize the icon. I tried a number of different things:

https://stackoverflow.com/questions/31529772/how-to-set-app-icon-for-electron-atom-shell-app https://stackoverflow.com/questions/67742012/how-do-i-put-the-icon-in-my-electron-app https://stackoverflow.com/questions/58351575/how-to-change-electronjs-app-default-icon

I know it needs to be built to show up, but so far it hasn't.

Here is what is in my main.js:

const createWindow = (shinyUrl) => {
    mainWindow = new BrowserWindow({
        width: 1600,
        height: 900,
        show: false,
        icon: __dirname + '/roi-stat.ico',
        autoHideMenuBar: true,
        webPreferences: {
            nodeIntegration: false,
            contextIsolation: true
        }
    })

In the directory, my icon is in ..\ROIstat\shiny\www\roi-stat.ico and ..\ROIstat\src\roi-stat.ico as I was trying different things from StackOverflow. I am getting differing information about where __dirname points to.

Thanks for any direction you can provide!

[jhk0530]

Hi, I'm not sure this is helpful (because I tested in macOS) but you can try it.

You must change two files

1. forge.config.js

   packagerConfig: {
   ...
   icon: "./images/icon",
   },

2. main.js (src/)

   const win = new BrowserWindow({
   ...
   icon: path.join(__dirname, "images", "icon.icns"), 
   });

• images directory located with same directory with main.js

Check this docs

[ProfessorPeregrine]

Your help got me there after I flailed around for a while!

If anyone else is looking for the answer...

1. Make sure your *.ico file is valid. Mine was not originally.
2. I added this folder structure in the root directory /src/images/icon
3. Add the icon file in there
4. Change forge.config.js to:

   
   module.exports = {
   packagerConfig: {
   icon: './src/images/icon/icon_name',
   },
   makers: [
   {
     name: '@electron-forge/maker-zip'     
   }
   ]

};

Note: do NOT add .ico to the icon name!

For some reason it didn't work when I put the packagerConfig after the makers section, but it works if it is first.
5. Edit the main.js to match this:

const createWindow = (shinyUrl) => { mainWindow = new BrowserWindow({ width: 1600, height: 900, show: false, icon: __dirname + '/src/images/icon/icon_name.ico', autoHideMenuBar: true, webPreferences: { nodeIntegration: false, contextIsolation: true } })

Note: DO include .ico here.

And big oof - I had it right but it wasn't showing in Explorer since icons are cached. Restart Windows Explorer to see the new icon, or right-click on the exe file and select Properties to see the actual icon stored with the exe. It showed up as the Electron logo in Explorer but was correct when I right-clicked on it.

Thanks @jhk0530 ! I think you can close this. I hope this is helpful to someone else!