nwjs taskbar icon on Windows for NW.js is a red square, can't set icon in package.json

[frankhale]

NWJS Version : 0.42.5 SDK version
Operating System : Windows 10 (x64)

Expected behavior

You should be able to set the icon associated with NW.js using the provided method of setting "icon" in the "window" section of the package.json file.

Actual behavior

The icon associated with the NW.js application is a red square and cannot be set using the provided methods in the package.json. See screenshot in the comments below.

How to reproduce

Download 0.42.5 SDK for Windows x64 and set your package.json to be like:

NOTE: This is not a path problem as it works fine in 0.40.

{
  "name": "app-name-here"
  "main": "index.html",
  "window": {
    "icon": "image.png"
  }
}

[rogerwang]

Could you provide a sample of the icon? It works for me.

[Blatman]

@rogerwang
Not sure what is going on but I get the same thing - I tried the app on #7221 (transparency issue) and the icon is red square with nw2 (see attached graphic on #7221). I also tried one of my apps which works ok on OSX (apart from the shadow issue) and it also fails on nw2 - I get the red icon. All is OK if nw2 is disabled in the manifest.
I think that #7222 is the same issue also.
I was using Win 10 Pro 64bit (1803) in Parallels 13 VM on OSX 10.13.6.

[frankhale]

I don't think a sample is really needed of my icon because the same icon works fine in NW.js 0.40.0 and in much older releases. I've been using the same icon for my app for a lot of years.

Here is my icon:

Just running NW.js demonstrates the behavior. Here is a screenshot of it. Notice that the task bar icon is a red square. When you attempt to set the icon in the package.json it doesn't work.

[zhsunlight]

the same to me

[kucix]

Same here

[sascha-schieferdecker]

I can confirm this issue

[khoshrou]

I have this problem too

[rogerwang]

interesting ... it works for me with win10 and the default app. Could you try to clear the icon cache?
https://www.winhelponline.com/blog/how-to-rebuild-the-icon-cache-in-windows/#script

[zhsunlight]

it works with latest (v0.43.0), but not with v0.42.5

[kucix]

interesting ... it works for me with win10 and the default app. Could you try to clear the icon cache?
https://www.winhelponline.com/blog/how-to-rebuild-the-icon-cache-in-windows/#script

If I switch between 0.42.3 and 0.42.5, icon work in 0.42.3 and doesn't work in 0.42.5, so it's not icon cache (and users won't clear it)

Same just now with clean base, only extracted.
I tested both 32 and 64 bit version and both SDK and non-SDK versions with same results.

Windows 10 Pro, version 1903, build 18362.476

[khoshrou]

I just tested clean cache script and it still not working
I still see a big red square

[rogerwang]

Does --disable-features=nw2 make any difference there?

[kucix]

yes,

standard run (0.42.5, 32b)

disable nw2 (0.42.5, 32b)

It's possible setting this flag in package.json? Or it's only command line argument?

[khoshrou]

Yes it differs
with --disable-features=nw2

normal

[rogerwang]

Yes. It can be used in package.json for now as a workaround.

[kucix]

If I added --disable-features=nw2 to package.json, everything seems fine, but I can't open downloaded files - #7234

[rogerwang]

I managed to reproduce it in another system. This is now fixed in git and will be available in the next nightly build.

[frankhale]

Thank you to everyone on this issue. You guys rock!

[akshay-joshi]

I am still facing this issue while developing my application.

Scenario: My application launches multiple new windows depending on the condition set by the users. I used "window.open(url, '_blank');" which is an existing logic that I can't change.

To set the common height, width and icon for all windows I used the below logic:

currWin.on('new-win-policy', function(frame, url, policy) {
policy.setNewWindowManifest({
'icon': '../assets/app.png',
'frame': true,
'width': 1300,
'height': 900,
'position': 'center',
});
});

The above is working fine on OSX, but when runs on Windows 10 I am still getting a red icon for the newly open window. Please refer to the below screenshot.

When I use --disable-features=nw2 it works.

Using: nw.js v0.50.1

[akshay-joshi]

Hi All

Tray icon is not visible as well. Below is the logic that I have used:

var trayObject = new gui.Tray({
title: 'MyApp',
tooltip: 'MyApp is running',
icon: '../../assets/myApp.png',
});

My code structure is :
assets -> myApp.png (1024 x 1024) tried myApp.ico (256 x 256) as well but didn't worked.
src -> js -> index.js (creating tray object here. Refer above code)

[YodaLightsabr]

Yes, I'm having the same issue.

It doesn't happen in my main window, but since it uses an <iframe>, when the iframe opens a new window with the _blank target, it makes a new window with a red square, and all new windows stack on the red square, rather than the original icon.

[codeweapon]

I can confirm that this issue with the taskbar icon for Windows 10 still persists. I am using the 0.51.1 version of nw.js and the taskbar icon always defaults doesn't matter what I am doing. Even though the .exe icon is changing on the build and behaves as expected.

[rogerwang]

Could you provide a full sample including your icon file? It works for me with the sample from #4581

[codeweapon]

@rogerwang Thank you for your reply. I figured it out. I had a small size for the icon and that's why it didn't work. Now I'm using 256 x 256 and looks like it's a safe size. There is a lot of confusion with the taskbar icon because it has to be png, not .ico and it needs to be a specific size. It worth pointing out that part in the documentation in more detail.

[rogerwang]

Could you upload your icon? I can look to fix it.

…

On Sat, Feb 20, 2021, 12:46 AM Vlad ***@***.***> wrote: @rogerwang <https://github.com/rogerwang> Thank you for your reply. I figured it out. I had a small size for the icon and that's why it didn't work. Now I'm using 256 x 256 and looks like it's a safe size. There is a lot of confusion with the taskbar icon because it has to be png, not .ico and it needs to be a specific size. I worth pointing out that part in the documentation in more detail. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#7236 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AABIMGNUU54C3CA6GX4URKDS72IXXANCNFSM4JQ4F3AA> .

[akshay-joshi]

[codeweapon]

@rogerwang Thank you for your attention. I tried to use a smaller icon 48x48 and it didn't work for me. Just showing up as a default one.
Here is an example icon.

[troywoy]

I too am seeing a red icon while using 0.52.1, but only for newly opened windows. The image below shows the app icon (next to Notepad) correctly for the first window, then I used the app which triggered a normal window.open that resulted in the red square icon.

I saw a suggestion saying to try disabling nw2 but then read that caused downloaded files to possibly fail. Any suggestions or guidance would be great as I'm pretty new to NW.js.

Edit: Using --disable-features=nw2 does fix this icon issue. I guess I'll test the application thoroughly to see if there are other issues such as file downloads.

[panther7]

NWjs 0.53.0

Hotkey Ctrl+U (Windows)

[adityatoshniwal]

Any workaround or fix for this please ?

[anilsahoo20]

Hi @rogerwang
We are still facing this issue in pgAdmin 4. Any update on this please?

[ImSpyke]

📚 The icon guide to fix everything

Or i hope most of the issues you could encounter like me.

🪟 Change window icon (top-left)

Either directly into the html, or in your package.json by adding the following key:

// package.json
{
    // ...
    "window": {
        "icon": "path.png"  // Relative path are from the NW.exe location. Image cannot be .ico
                            // Image needs to be a perfect square to not be streched.
                            // However, too large images are slower to load so consider putting 128px to 1024px size instead of a 240MB 4K full HD image-
        // "toolbar": true,         // Not necessary
        // "width": 1000,           // Not necessary
        // "height": 800,           // Not necessary
        // "position": "center",    // Not necessary
        // "resizable": true        // Not necessary
    },
    // ...
}

💻Change taskbar icon

You can add the following key in your package.json file:

// package.json
{
    // ...
    "icons": {
        "256": "path.png" // Relative path are from the NW.exe location. Image cannot be .ico
        // Image doesn't need to be 256px, but needs to be a perfect square to not be streched.
        // However, too large images are slower to load so consider putting 128px to 1024px size instead of a 240MB 4K full HD image-
    },
    // ...
}

📲 Change executable icon

By using Ressource Hacker you will be able to change the icon of the file.
Tutorial here: https://www.youtube.com/watch?v=QD1xJjhEypg
After editing the icon, you might not see it directly.
To refresh the icon cache of windows without restarting your computer you can open a Powershell terminal and run ie4uinit -show

🖥️ Change Tray icon (bottom right of your desktop)

Simply add in your script

// if nw is undefined use require("nw.gui") instead
var tray = new nw.Tray({
    title: 'Tray name', // Mac only as Windows displays natively the icon
    tooltip: 'Hover text', // In my example picture its "POG Cardinal 2"
    icon: "path.png", // Relative path are from the NW.exe location. Image cannot be .ico
});

🟥 Workarounds red square on new opened windows

Best fix

The best workaround i've found that far is this one, from this issue.
Basically, in your script you'll redefine how new opened windows should be instancied, and then pass it to the NW function which ensure a window opened with the icon (and actually stacked like Chrome onto each others).

require('nw.gui').Window.get().on('new-win-policy',function(frame, url, policy){
    policy.ignore();
    // The lext line open a new window with the red square issue
    // chrome.windows.create({url:"https://google.com",type:"normal",focused:true});
    //The next line open a new window stacked with the main one.
    require('nw.gui').Window.open(url,{frame:true,focus:true}); // {frame:true,focus:true} is not necessary
});

You can also use it in standalone directly with using
require('nw.gui').Window.open("your url"); instead of open(url). But the code above also fixes the new pages opened by the <a>link</a> tags.

Other fix

You can add the following into your package.json, but keep in mind that this is not intended to fix this bug specifically.
As written, you'll be disabling the nw2 features, which can lead to potential other issues. Use at your own risk.

// package.json
{
    // ...
    "chromium-args": "--disable-features=nw2"
    // ...
}

❔ Sources

• You guys, to help me figure out every issues
• Ressource hacker turorial: https://www.youtube.com/watch?v=QD1xJjhEypg
• New window chrome policy fix: nwjs icon on the taskbar when you open new window #5822

[frankhale]

Closing this issue since it's 5 years old and there is no new response by developer.

The guide just posted seem to be the best way to work around the problems.