Why are Windows 10 search icons of UWP Apps displayed on blue background?

Question

Why are Windows 10 search icons of UWP Apps displayed on blue background?

Jakob Krummeich 20

Hello,

I am working on the development of an UWP app. On Windows 10 Pro 22H2 (Build 19045.3448) the search icons of my UWP apps are always displayed on a blue blackground (aka "plated"). For the start menu and the task bar this is not the case, i.e. they are displayed unplated with a transparent background. On Windows 11 the search icons (of the same apps) are also displayed unplated.

What I already tried:

checking with other UWP apps

manually replacing the respective icon in the windows search icon cache (located in "C:\Users\{USER}\AppData\Local\Packages\Microsoft.Windows.Search_cw5n1h2txyewy\LocalState\AppIconCache\100") with a different icon, which was then also displayed plated

various combinations of qualifying the icon assets of the UWP app as described in "https://learn.microsoft.com/en-us/windows/uwp/app-resources/tailor-resources-lang-scale-contrast#targetsize" (and of course rebuilding the app)

Icons of other apps (which are non-UWP as far as I can see) such as Microsoft Edge are also not displayed plated.

Is there anything I can do as a developer of an UWP app to make the search icons on Windows 10 be displayed unplated?

Best Regards

Jakob Krummeich

Roy Li - MSFT 34,281 Reputation points Microsoft External Staff

2023-10-11T02:04:21.35+00:00

Could you please share a screenshot about the behavior that you are getting now and the behavior you are trying to get?

Also, could you please share the code where and how you added the icon and use it? It's hard to check and reproduce the behavior that you mentioned without any code.
Jakob Krummeich 20 Reputation points

2023-10-12T09:26:16.66+00:00

Thank you for your response.
This is a screenshot of my search dialog as it is. Note that I needed to obfuscate the app name due to privacy.
There is a blue background around the icon, which itself is a circle on no background.

Following there is screenshot showing what I would like to have:

Regarding your question about the code I need to clarify that I used Visual Studio's Asset Generator to generate a whole set of icons based on a source icon which I provided. Therefore, I now have many icons for different scales or targetsizes with and without the altform-unplated qualifier in the Assets directory of my project. Additionally, all of those files are correctly listed in the corresponding .csproj file. In my Package.appxmanifest there is the uap:VisualElements, where the generated Square44x44Logo.png and Square150x150Logo.png are referenced. The BackgroundColor is set to 'transparent' there. I could already verify that changing the BackroundColor at this place correctly changes the BackgroundColor in the Task bar and the Start menu, but doesn't affect the search icons.
Jakob Krummeich 20 Reputation points

2023-10-12T09:34:59.86+00:00
I should also add that this is a react native for windows app which I then build using

npx react-native run-windows --arch x86 --release --logging --no-launch --no-deploy --no-telemetry

which itself runs MSBuild and afterwards MakeAppx generating a .msix file.
Roy Li - MSFT 34,281 Reputation points Microsoft External Staff

2023-10-18T03:15:09.8833333+00:00

Sorry for the delay. I checked the behavior you mentioned. It seems that the behavior is related to the image that you are using. Here is the image I used for app icons. It shows the transparent background in the Search bar. It won't show other background color. You could create a blank project and use this image to test this behavior.

testimage.png
Jakob Krummeich 20 Reputation points

2023-10-18T13:13:15.6166667+00:00

Edit: deleted due to double post
Jakob Krummeich 20 Reputation points

2023-10-18T13:22:02.2266667+00:00

No problem, I am grateful that you answered at all.

Unfortunately, I tried out the testimage you provided with no different result than before, i.e. my search icon still has blue blackground.

To rule out react native having anything to do with the issue I now built a minimal C# UWP app based on the instructions here and used Visual Studios Asset generator with the testimage you provided.
When running the app on my local machine I still get the blue blackground for the search icon:

Note that once again start menu and task bar icons have transparent background. Additionally, I did not change anything besides updating the app icon. During asset generation the Tile background was set to 'transparent'.

I would argue that this rules out that this has anything to do with the used icon. Can you please try to reproduce this?
Jakob Krummeich 20 Reputation points

2023-10-18T13:24:40.1533333+00:00

I also tried out both light and dark mode in windows as well as switching the windows color. Nothing had any effect on the blue blackground of the search icons.
Jakob Krummeich 20 Reputation points

2023-10-19T06:48:28.0133333+00:00

That is exactly the answer I was looking for. I was aware that the behavior has changed in Windows 11 (as I also tried to explain in the first post; it seems I was not clear enough on that, sorry!).
Thank you for your time!
Roy Li - MSFT 34,281 Reputation points Microsoft External Staff

2023-10-19T07:18:55.3266667+00:00

Glad to hear that. I've converted my comment into answer. You could accept it if it makes sense. Having a good day.

Accepted answer

0 additional answers

Your answer

Roy Li - MSFT 34,281 Reputation points Microsoft External Staff

2023-10-11T02:04:21.35+00:00

Could you please share a screenshot about the behavior that you are getting now and the behavior you are trying to get?

Also, could you please share the code where and how you added the icon and use it? It's hard to check and reproduce the behavior that you mentioned without any code.
Jakob Krummeich 20 Reputation points

2023-10-12T09:26:16.66+00:00

Thank you for your response.
This is a screenshot of my search dialog as it is. Note that I needed to obfuscate the app name due to privacy.
There is a blue background around the icon, which itself is a circle on no background.

Following there is screenshot showing what I would like to have:

Regarding your question about the code I need to clarify that I used Visual Studio's Asset Generator to generate a whole set of icons based on a source icon which I provided. Therefore, I now have many icons for different scales or targetsizes with and without the altform-unplated qualifier in the Assets directory of my project. Additionally, all of those files are correctly listed in the corresponding .csproj file. In my Package.appxmanifest there is the uap:VisualElements, where the generated Square44x44Logo.png and Square150x150Logo.png are referenced. The BackgroundColor is set to 'transparent' there. I could already verify that changing the BackroundColor at this place correctly changes the BackgroundColor in the Task bar and the Start menu, but doesn't affect the search icons.
Jakob Krummeich 20 Reputation points

2023-10-12T09:34:59.86+00:00

I should also add that this is a react native for windows app which I then build using

npx react-native run-windows --arch x86 --release --logging --no-launch --no-deploy --no-telemetry

which itself runs MSBuild and afterwards MakeAppx generating a .msix file.
Roy Li - MSFT 34,281 Reputation points Microsoft External Staff

2023-10-18T03:15:09.8833333+00:00

Sorry for the delay. I checked the behavior you mentioned. It seems that the behavior is related to the image that you are using. Here is the image I used for app icons. It shows the transparent background in the Search bar. It won't show other background color. You could create a blank project and use this image to test this behavior.

testimage.png
Jakob Krummeich 20 Reputation points

2023-10-18T13:13:15.6166667+00:00

Edit: deleted due to double post
Jakob Krummeich 20 Reputation points

2023-10-18T13:22:02.2266667+00:00

No problem, I am grateful that you answered at all.

Unfortunately, I tried out the testimage you provided with no different result than before, i.e. my search icon still has blue blackground.

To rule out react native having anything to do with the issue I now built a minimal C# UWP app based on the instructions here and used Visual Studios Asset generator with the testimage you provided.
When running the app on my local machine I still get the blue blackground for the search icon:

Note that once again start menu and task bar icons have transparent background. Additionally, I did not change anything besides updating the app icon. During asset generation the Tile background was set to 'transparent'.

I would argue that this rules out that this has anything to do with the used icon. Can you please try to reproduce this?
Jakob Krummeich 20 Reputation points

2023-10-18T13:24:40.1533333+00:00

I also tried out both light and dark mode in windows as well as switching the windows color. Nothing had any effect on the blue blackground of the search icons.
Jakob Krummeich 20 Reputation points

2023-10-19T06:48:28.0133333+00:00

That is exactly the answer I was looking for. I was aware that the behavior has changed in Windows 11 (as I also tried to explain in the first post; it seems I was not clear enough on that, sorry!).
Thank you for your time!
Roy Li - MSFT 34,281 Reputation points Microsoft External Staff

2023-10-19T07:18:55.3266667+00:00

Glad to hear that. I've converted my comment into answer. You could accept it if it makes sense. Having a good day.

Answer 1

Hello,

Welcome to Microsoft Q&A!

I got your point, actually you are checking the search result of the search bar. I have to say that's a system behavior that we can't change from the UWP side.

You could check the built-in UWP app of the Windows like Calculator, Calendar, Settings or Microsoft Store app, all of them have the same blue background when they are shown in the search result. Only for those apps aren't UWP like Edge, VS will have the behavior you want.

Besides, this behavior has been changed in Windows 11. In my test for Windows 11, all the apps will have the behavior you want when shown in the search result.

Thank you.

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Share via

Why are Windows 10 search icons of UWP Apps displayed on blue background?

0 additional answers

Your answer