electron-webpack icon indicating copy to clipboard operation
electron-webpack copied to clipboard

How to set custom app icon?

Open jujinjujeen opened this issue 6 years ago • 7 comments

Hi guys, I read the docs but didn't find anything regarding how to set an app icon. Now it uses the default one

jujinjujeen avatar Mar 27 '19 19:03 jujinjujeen

I have the same question. I thought I could get pretty close by reading the electron-builder docs. For that project, it is recommended (for Linux) to dump an icon.png file into build/icons in the project root.

I can confirm this kind of does something. It generates a .icon-set folder in the dist folder which it would not otherwise do when running the npm dist command. However, in my case, I'm just trying to quick and dirty build an AppImage to test this and the resulting artifact does not have an icon in the file explorer or in the dock after launching.

Windows and Mac seem to have some other file extension requirements depending on the target.

It would be nice to know if I am on the right track here or not.

lucasyvas avatar Apr 01 '19 15:04 lucasyvas

Try building like this: package.json put the path to the build icons.

"build": {
    "files": [
      "build/*"
    ]
}

index.js - main process file

const path = require('path');
const iconPath = path.join(__dirname, "build", "icon.png");

let window = new BrowserWindow({
      icon: iconPath
})

Heroyoulook avatar Apr 22 '19 22:04 Heroyoulook

Hello, I did it like this

let iconPath;

function createWindow () {
  // Create the browser window.
  win = new BrowserWindow({ 
    width: 900,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    },
    icon: iconPath
 })
 if (isDevelopment && !process.env.IS_TEST) {
   iconPath = require('path').join('img/so-g.png')
  } else {
    iconPath = require('path').join(process.resourcesPath, 'img', 'soluti-g.png')  
  }

Now in package.json it looks like this

"extraResources": [
    {
      "from": "./img/",
      "to": "img",
      "filter": [
        "**/*"
      ]
    }
  ]

but it doesn't work properly, help me please

brennomarques avatar Mar 19 '20 11:03 brennomarques

I don't know about extraResources and resourcesPath, but I would rather go for the static assets folder and __static placeholder. I'm pretty sure it works that way. Check the docs for static assets https://webpack.electron.build/using-static-assets

loopmode avatar Mar 20 '20 19:03 loopmode

I did so ....

'path' import path

Right inside the

**createWindow () {
win = new BrowserWindow({ 
    width: 1366,
    height: 768,
    webPreferences: {
      nodeIntegration: true
    },
    icon: path.join(__static, 'logo.png') 
 })
```**


Inside the public insert the logo.
So it works

But I ask, is that correct?


Thank you for your attention.

brennomarques avatar Mar 30 '20 11:03 brennomarques

const nativeImage = electron.nativeImage;
const icon = require('@/any/path/icon.png');

    // Create the browser window.
    mainWindow = new BrowserWindow({
       //... your config
        icon: nativeImage.createFromDataURL(icon.default)
    });

alfrededison avatar May 07 '20 09:05 alfrededison

Finally after googling for a hour i found this package

Get it from

https://www.electron.build/icons

Suryadevelops avatar Dec 21 '20 16:12 Suryadevelops