Custom icon doesn't appear

[DoneDeal0]

Pre-flight checklist

• [X] I have read the contribution documentation for this project.
• [X] I agree to follow the code of conduct that this project uses.
• [X] I have searched the issue tracker for a bug that matches the one I want to file, without success.

Electron Forge version

6.0.4

Electron version

22.0.2

Operating system

macOS 10.13.4

Last known working Electron Forge version

No response

Expected behavior

When running yarn start, the electron app works fine. But the custom icon I've added to the app doesn't appear. I still have the default Electron icon.

I have carefully followed the documentation. I created 16x16, 32x32, 128x128, 256x256 and 512x512 png icons, generated an icon.icns set with iconutil, an icon.ico for Window and an icon.png for Linux. I've added all of them at the project root in an icon folder, and added their path to my forge.config:

import type { ForgeConfig } from "@electron-forge/shared-types";
import { MakerSquirrel } from "@electron-forge/maker-squirrel";
import { MakerZIP } from "@electron-forge/maker-zip";
import { MakerDeb } from "@electron-forge/maker-deb";
import { MakerRpm } from "@electron-forge/maker-rpm";
import { MakerDMG } from "@electron-forge/maker-dmg";
import { MakerWix } from "@electron-forge/maker-wix";
import { WebpackPlugin } from "@electron-forge/plugin-webpack";
import { mainConfig } from "./webpack.main.config";
import { rendererConfig } from "./webpack.renderer.config";

const config: ForgeConfig = {
  packagerConfig: {
    icon: "./icon",
  },
  rebuildConfig: {},
  makers: [
    new MakerSquirrel({
      setupIcon: "./icon/icon.ico",
    }),
    new MakerZIP({}, ["darwin"]),
    new MakerRpm({
      options: {
        icon: "./icon/icon.png",
      },
    }),
    new MakerDeb({
      options: {
        icon: "./icon/icon.png",
      },
    }),
    new MakerDMG({
      icon: "./icon/icon.icns",
      iconSize: 256,
    }),
    new MakerWix({
      icon: "./icon/icon.ico",
    }),
  ],
  plugins: [
    new WebpackPlugin({
      mainConfig,
      renderer: {
        config: rendererConfig,
        entryPoints: [
          {
            html: "./src/index.html",
            js: "./src/renderer.ts",
            name: "main_window",
            preload: {
              js: "./src/preload.ts",
            },
          },
        ],
      },
    }),
  ],
};

export default config;

I have also added the path to main.ts:

const createWindow = (): void => {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    icon: "./icon/icon.png",
    webPreferences: {
      preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
      nodeIntegration: true,
      contextIsolation: false,
    },
  });

The app compiles without any problem, but I don't see my custom icon.

Actual behavior

I don't see the custom icon.

Steps to reproduce

I should see the custom icon.

Additional information

No response

[georgexu99]

Thanks for submitting this issue!

Can you check whether the packaged application in your /out/ folder has the expected icons? The icons are set in the package step, meaning that we don't expect the icons to be present in the yarn start dev mode of the application. However, on macOS, you can set the icon in the dock with app.dock.setIcon (docs) if you want to make sure the icon is there in dev mode.

[0xearl]

same issue.

Can you check whether the packaged application in your /out/ folder has the expected icons?

yes the icon seems to be there, but when i try to install it it shows nothing..

The icons are set in the package step, meaning that we don't expect the icons to be present in the yarn start dev mode of the application.

on my dev mode its fine the icon is showing perfectly fine.

[DoneDeal0]

Hi @georgexu99 ,

All my apologies for my late answer, I didn't see your post before receiving @0xearl 's notification.

Indeed, I can display the icon during development thanks to the line app.dock.setIcon(path.join(process.cwd(), "icon", "icon.png")); in main.ts. However, I don't have the icon in the out folder.

out has 4 files:

- MyApp.app (the app icon is Electron's)
- LICENSE
- LICENSES.chromium.html
- version

If I right-click on MyApp.app to show the package's content,I have:

- Contents
  - Frameworks
    - Electron Framework.framework
      - Electron Framework
      - Helpers
        - chrome_crashpad_handler 
      - Librairies
        - libEGL.dylib
        - libffmpeg.dylib
        - libGLESv2.dylib
        - libvk_swifthshader.dylib
        - vk_swiftshader.icf.json 
      - Resources
        - many .lproj folder with locale.apk files
      - Versions 
        - many other folders 
    - MyApp Helper
    - MyApp Helper (GPU)
    - MyApp Helper (Plugin)
    - MyApp Helper (Renderer)
    - Mantle.framework
    - ReactiveObjC.framework
    - Squirrel.framework
  - Info.plist
  - MacOS
    - MyApp (unix executable)
  - PkgInfo
  - Resources
    - af.lproj
    - am.lproj
    - app
      - node_modules
      - package.json
    - ar.lproj
    - bg.lproj
    - ... many other .lproj empty folders
    - de.lproj
    - electron.icns (looks like electron's default icon)
    - en_GB.lproj
    - ... many other .lproj empty folders
    - 

Anyways, I don't see my icon anywhere here.

[DoneDeal0]

I've made another attempt today with the New York Time's icns (you can get it here). It doesn't work either. The installer looks like this:

As you can see, the icns is correctly detected since the icon appears on the top navbar and on the footer. But the main logo is still Electron's default. When I install and launch the app, all the logo are also Electron's default.

There is clearly an issue with MakerDMG and/or the icns process.

[DoneDeal0]

Another note: if I inspect the package content in /out/myapp-darwin-x64, the info.plist file contains the lines:

    <key>CFBundleIconFile</key>
    <string>electron.icns</string>

So, it seems my icon.icns is not properly called. Any update @georgexu99 , @erickzhao ?

[AndreevAndrey]

same issue.

Can you check whether the packaged application in your /out/ folder has the expected icons?

yes the icon seems to be there, but when i try to install it it shows nothing..

The icons are set in the package step, meaning that we don't expect the icons to be present in the yarn start dev mode of the application.

on my dev mode its fine the icon is showing perfectly fine.

Did you find any solution? I have same problem

[DoneDeal0]

@AndreevAndrey sadly, no. The icon issue persists, and no one cares about it :(. I'm thinking about migrating to Electron-builder.

[AndreevAndrey]

@DoneDeal0 , thanks for the quick response!

[itstristanb]

I was running into the same issue and it looks like we are setting the icon wrong. You'll need to set the icon in the packagerConfig's icon. https://www.electronforge.io/guides/create-and-add-icons#windows-and-macos

I.e.

    packagerConfig: {
        icon: './public/img/logo'
    },

instead of

        new MakerDMG({
            name: AppName,
            format: 'UDRW',
            icon: './public/img/logo'
        }, ['darwin']),

Additionally, I think file format may be an issue. I ended up converting my png into ico and icns to support other platforms.

Do these things and you will solve this issue. I don't think its completely needed to switch build methods all together.

Hope this helps!

[DoneDeal0]

The installer is now ok! Here is the config:

const config: ForgeConfig = {
  packagerConfig: {
    icon: path.join(process.cwd(), "ico", "icon.icns"),
    extraResource: [
      path.join(process.cwd(), "icon", "icon.icns"),
    ],
  },
  rebuildConfig: {},
  makers: [
    new MakerDMG({
    icon: path.join(process.cwd(), "icon", "icon.icns"),
    format: "ULFO",
    }),
   ],
  plugins: [
    new WebpackPlugin({
      mainConfig,
      renderer: {
        config: rendererConfig,
        entryPoints: [
          {
            html: "./src/index.html",
            js: "./src/renderer.ts",
            name: "main_window",
            preload: {
              js: "./src/preload.ts",
            },
          },
        ],
      },
    }),
  ],
};

The dock icon is also correct thanks to this line:

My main.ts file is:

const createWindow = (): void => {
  const mainWindow = new BrowserWindow({
    icon: path.join(process.cwd(), "icon", "icon.icns"),
    webPreferences: {
      preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
      nodeIntegration: true,
      contextIsolation: false,
    },
  });

[j0hnm4r5]

@DoneDeal0 a little late to the party here, but that final working code was still working on macOS? I'm having a lot of trouble getting it to recognize any icons at all.

I can get the dock icon showing in dev mode with app.dock.setIcon(path.join(process.cwd(), "icons", "icon.png"));, but not with the .icns

[Devangramani48]

@DoneDeal0 Create icons name folder after use app.dock.setIcon(path.join(process.cwd(), "icons", "icon.png")) for Mac