Set Electron favicon with electron-builder

Question

I would like set new favicon in my Electron App and replace default Electron icon when my app is build.

I use electron-builder package. In the doc, i see the icons need to be placed in the build directory. So :

And when i build my app, i've this message :

Application icon is not set, default Electron icon will be used.

Anyone can help me ?

Part of my package.json :

  "scripts": {
    "postinstall": "install-app-deps && npmpd",
    "pre-build": "./node_modules/.bin/electron-rebuild",
    "build-bcrypt": "npm rebuild bcrypt --update-binary",
    "develop": "npm run private:compile -- --source-maps true && run-p -r private:watch private:serve",
    "test": "mocha -R spec --compilers js:babel-core/register test/**/*.spec.js",
    "lint": "eslint --no-ignore scripts app test *.js",
    "pack": "run-s private:clean private:compile private:build:all",
    "pack:mac": "run-s private:clean private:compile private:build:mac",
    "pack:win": "run-s private:clean private:compile private:build:win",
    "pack:linux": "run-s private:clean private:compile private:build:linux",
    "private:build:all": "build -mwl",
    "private:build:mac": "build --mac",
    "private:build:win": "build --win",
    "private:build:linux": "build --linux",
    "private:watch": "npm run private:compile -- --source-maps true --watch --skip-initial-build",
    "private:serve": "babel-node scripts/serve.js",
    "private:compile": "babel app/ --copy-files --out-dir build",
    "private:clean": "rimraf build",
    "private:cleandb": "rm -rf ./categories ./presentations ./slides ./users"
  },
  "build": {
    "win": {
      "icon": "build/icon.ico"
    }
  }

laurent · Answer 1 · 2017-11-13T11:29:30.603

9

In package.json, under the win key, you also need to specify the icon path:

"build": {
  "win": {
    "icon": "build/app.ico"
  }
}

edited Nov 13 '17 at 11:29

answered Nov 13 '17 at 11:23

laurent

88,262
77
290
428

Hi ! Same result :( I've add a part of my `package.json` in my first post. Thank for your help ! – s-leg3ndz Nov 13 '17 at 11:27
@StéphaneRICHIN, it should be under the "build" key - I've updated my example – laurent Nov 13 '17 at 11:29
Yep, i just saw. After test, same result : `Application icon is not set, default Electron icon will be used` (i've update my first post) – s-leg3ndz Nov 13 '17 at 11:32
1

@StéphaneRICHIN, is the path correct? It should be relative to package.json – laurent Nov 13 '17 at 13:18
Yep, the path is correct. In development mode, i've my icon :( – s-leg3ndz Nov 13 '17 at 14:32
@StéphaneRICHIN, at what point is the icon put in the build folder? Maybe it's not present when you build the app? (since I see the build folder can be deleted with private:clean for example). You only need to put the icon in the build folder if you use tray icons otherwise you can leave it outside, which might be easier to manage. For example put it next to package.json and include it with `"icon": "app.ico"`. This is more or less what I do [here](https://github.com/laurent22/joplin/blob/master/ElectronClient/app/package.json) and it works fine. – laurent Nov 13 '17 at 14:51
No result too :( I need to add other config in my `main.js` ? – s-leg3ndz Nov 13 '17 at 15:25
No there's no need to modify main.js, as long as the path to the icon in package.json is correct it should work. Even if the icon is invalid it should say so and display an error message. – laurent Nov 13 '17 at 16:05

score 3 · Answer 2 · answered Aug 08 '20 at 17:57

3

Had similar issue, i added directories to my build

    "build":{
    "directories": {
              "buildResources": "resources"
            }
}

and inside the directories folder i had my icon.ico file

answered Aug 08 '20 at 17:57

Arinze Ogbonna

172
9

Darryl RN · Answer 3 · 2022-01-20T14:33:06.943

I encounter same issue with you, since I also use build directory for my output, here is my configuration:

"build": {
   "directories":{
      "output": "build"
   },
   "mac": {
      "icon": "build/logo.icns",
   },
   "win": {
      "icon": "build/logo.png"
   }
},

instead of specifying your directory such as ./logo.png which make electron shows default Electron icon is used reason=application icon is not set

score -1 · Answer 4 · answered Nov 24 '17 at 19:30

-1

I managed to have my icon on windows with the following script in package.json:

"package-win": "electron-packager . --overwrite --asar=true --platform=win32 --arch=ia32 --icon=assets/icons/win/icon.ico --prune=true --out=release-builds --version-string.CompanyName=Company --version-string.FileDescription=CE --version-string.ProductName=\"Product\""

answered Nov 24 '17 at 19:30

Nicolas Després

1,279
1
12
12

this is for electron packager, not electron builder – Soley Nov 25 '20 at 09:43

Set Electron favicon with electron-builder

4 Answers4