High contrast version of app icon - discussion #9485

Closed
opened 2026-01-31 01:55:39 +00:00 by claunia · 17 comments
Owner

Originally created by @jtippet on GitHub (Jul 7, 2020).

Originally assigned to: @cinnamon-msft on GitHub.

How does the Terminal team feel about high contrast icons? If someone were to contribute a set of assets, would you accept them? Are there any constraints or considerations for artwork that a contributor should be aware of? Is there some graphics pipeline, not visible in source control here, that needs to be updated instead of providing finished PNG files?

To demo the possibilities, I tried hacking up a high contrast version of one of the icons. I've presented the prototype here, in both black and white HC themes. For context, I've also included Calculator's HC icon.

demoblack

demowhite

By way of comparison, here's the status quo:

currentblack

currentwhite

In some places (eg taskbar), the shell plates the icon, since there's not a dedicated HC icon, so the shell isn't sure whether the icon would have enough contrast with a black or white background:

currentplatedblack

This comment is forked from a discussion on #5360

Originally created by @jtippet on GitHub (Jul 7, 2020). Originally assigned to: @cinnamon-msft on GitHub. How does the Terminal team feel about high contrast icons? If someone were to contribute a set of assets, would you accept them? Are there any constraints or considerations for artwork that a contributor should be aware of? Is there some graphics pipeline, not visible in source control here, that needs to be updated instead of providing finished PNG files? To demo the possibilities, I tried hacking up a high contrast version of one of the icons. I've presented the prototype here, in both black and white HC themes. For context, I've also included Calculator's HC icon. ![demoblack](https://user-images.githubusercontent.com/10259764/86817775-58487080-c03a-11ea-9b74-70f1724ab1bc.png) ![demowhite](https://user-images.githubusercontent.com/10259764/86817781-5aaaca80-c03a-11ea-9285-2d4f0e6840e4.png) By way of comparison, here's the status quo: ![currentblack](https://user-images.githubusercontent.com/10259764/86818023-b2e1cc80-c03a-11ea-8d75-7237c700340f.png) ![currentwhite](https://user-images.githubusercontent.com/10259764/86818116-d0af3180-c03a-11ea-8419-808e291fffd7.png) In some places (eg taskbar), the shell plates the icon, since there's not a dedicated HC icon, so the shell isn't sure whether the icon would have enough contrast with a black or white background: ![currentplatedblack](https://user-images.githubusercontent.com/10259764/86818527-58953b80-c03b-11ea-89f9-4c29be73fcdd.png) This comment is forked from a discussion on #5360
Author
Owner

@zadjii-msft commented on GitHub (Jul 7, 2020):

I think that looks awesome 😍

However, I'm barely allowed to talk to other humans, let alone make product branding decisions 😆 Let's summon @cinnamon-msft to get an official opinion

@zadjii-msft commented on GitHub (Jul 7, 2020): I think that looks awesome 😍 However, I'm barely allowed to talk to other humans, let alone make product branding decisions 😆 Let's summon @cinnamon-msft to get an official opinion
Author
Owner

@cinnamon-msft commented on GitHub (Jul 7, 2020):

Wow these look great! Would these only appear when the user has high contrast mode on?

@cinnamon-msft commented on GitHub (Jul 7, 2020): Wow these look great! Would these only appear when the user has high contrast mode on?
Author
Owner

@jtippet commented on GitHub (Jul 7, 2020):

Wow these look great! Would these only appear when the user has high contrast mode on?

Yes.

@jtippet commented on GitHub (Jul 7, 2020): > Wow these look great! Would these only appear when the user has high contrast mode on? Yes.
Author
Owner

@cinnamon-msft commented on GitHub (Jul 7, 2020):

Okay great! I'm totally okay with these coming in. I know @DHowett has more experience with the icon process, but I'm not aware of a pipeline.

@cinnamon-msft commented on GitHub (Jul 7, 2020): Okay great! I'm totally okay with these coming in. I know @DHowett has more experience with the icon process, but I'm not aware of a pipeline.
Author
Owner

@DHowett commented on GitHub (Jul 7, 2020):

I absolutely love them. Our pipeline is “I have a powershell script that pops out icons from our SVGs”, but for various reasons I refuse to allow it to generate our production/stable icons. I don’t trust its pixel-fidelity. Sometimes, careful manual rasterization wins the day.

If only SVGs supported hinting.

@DHowett commented on GitHub (Jul 7, 2020): I absolutely love them. Our pipeline is “I have a powershell script that pops out icons from our SVGs”, but for various reasons I refuse to allow it to generate our production/stable icons. I don’t trust its pixel-fidelity. Sometimes, careful manual rasterization wins the day. If only SVGs supported hinting.
Author
Owner

@jtippet commented on GitHub (Jul 7, 2020):

@DHowett let's make a deal: if you make that PS script available somewhere, in exchange, I won't make any comments about any hackiness it might entail.

@jtippet commented on GitHub (Jul 7, 2020): @DHowett let's make a deal: if you make that PS script available somewhere, in exchange, I won't make any comments about any hackiness it might entail.
Author
Owner

@mimi89999 commented on GitHub (Jul 7, 2020):

I think that the new monochrome icons look great! Even if somebody really doesn't like them, I think that they will still find them much better than the normal icon with a background.

Our pipeline is “I have a powershell script that pops out icons from our SVGs”

Isn't it just running imagemagick or similar in a loop for various sizes?

@mimi89999 commented on GitHub (Jul 7, 2020): I think that the new monochrome icons look great! Even if somebody really doesn't like them, I think that they will still find them much better than the normal icon with a background. > Our pipeline is “I have a powershell script that pops out icons from our SVGs” Isn't it just running `imagemagick` or similar in a loop for various sizes?
Author
Owner

@DHowett commented on GitHub (Jul 7, 2020):

@jtippet Deal.

It uses inkscape and imagemagick in WSL (because their windows counterparts are not well-behaved applications :/) to come up with a set of master icon sizes and then plate them in transparent images of the right sizes for store assets. I find the universal asset system to be absolute madness, and madness begets madness. Like, the Square 44x44 logo has target sizes that are definitely not 44x44 and the entire plated/unplated thing is just inane 😄

https://gist.github.com/DHowett/324e1e1c8ab640f9f71d9b297e0fe7a2

@DHowett commented on GitHub (Jul 7, 2020): @jtippet Deal. It uses inkscape and imagemagick in WSL (because their windows counterparts are not well-behaved applications :/) to come up with a set of master icon sizes and then plate them in transparent images of the right sizes for store assets. I find the universal asset system to be _absolute madness_, and madness begets madness. Like, the Square 44x44 logo has target sizes that are definitely not 44x44 and the entire plated/unplated thing is just inane :smile: https://gist.github.com/DHowett/324e1e1c8ab640f9f71d9b297e0fe7a2
Author
Owner

@DHowett commented on GitHub (Jul 7, 2020):

My main beef is that we have an icon with segments divided into thirds, and that works great on canvases that are multiples of three in size, but also classic icons love to be among the 16/32/64 clade 😄

@DHowett commented on GitHub (Jul 7, 2020): My main beef is that we have an icon with segments divided into thirds, and that works great on canvases that are multiples of three in size, but also classic icons _love_ to be among the 16/32/64 clade :smile:
Author
Owner

@mimi89999 commented on GitHub (Jul 7, 2020):

I don't understand your issues with that logic and what you have to correct manually. Either you don't make the tabs of the same size, you accept that the border will be between pixels or make the border slightly bigger/smaller. That choice can also in the script.

@mimi89999 commented on GitHub (Jul 7, 2020): I don't understand your issues with that logic and what you have to correct manually. Either you don't make the tabs of the same size, you accept that the border will be between pixels or make the border slightly bigger/smaller. That choice can also in the script.
Author
Owner

@jtippet commented on GitHub (Jul 8, 2020):

I cleaned up the icon a bit, and updated the script-that-has-no-hackiness to also emit HC versions of the new icon. I'd like to get your feedback before I spend time punching pixels and hinting the smaller icons.

For concreteness, I've pushed all the assets and SVGs here.

Here are the two HC assets:

image

I haven't hinted these yet, but they already work okay at the worst size of 16x16. Your web browser is probably trying to stretch the below image with a fuzzy interpolation algorithm, so I suggest saving it to disk and opening in mspaint to see how it really looks:

I also generated DEV/PRE versions. These are probably less important, but they're here:

image

So let's see how it looks in context. Here's a taskbar with HC black theme. For reference, the pre-existing icon is also pinned at the end (and yes, it always has that annoying teal backplate behind it, even when the app isn't running):

image

Here's some pinned tiles on the Start Menu:
image

So, please give feedback now while it's still easy to tweak the SVG. I'll give you guys a couple days to give feedback, then I'll fix the SVG, regenerate the icons, and finally start hinting the smaller sizes.

While testing this, I noticed that the OS's shell has... quirks... when dealing with hybrid apps like Terminal. Apparently some shell surfaces try a win32 icon first, then fall back to the MRT resource. Others try the MRT first, and fall back to win32. And a couple others just use MRT incorrectly. Since Terminal has both MRT and Win32 resources, we get inconsistent results. You can even see this effect with the Terminal Preview that's in the store: the ALT+TAB experience uses terminal.ico, which doesn't have the PRE badge, but the taskbar shows the badge.

So here's an inventory of the shell:

  • Taskbar: Uses MRT for glom icon, but Win32 for peek icon: image
  • Start menu: The Pinned App uses MRT correctly, but the All Apps uses MRT without passing the HC context to MRM, so it never shows HC assets. Note for example that Start is showing two different calculator icons here, because whoever is loading icons for the left panel didn't pass the HC attribute to MRM:
    image
  • However, if you have build 20161+ and are enrolled in flight 23615618, then both panels of Start pass HC context, so the icon is drawn correctly in both places 🤷‍♀️. So let's say that that problem is trending towards getting fixed.
  • ALT+TAB, WIN+TAB: use Win32 icon: image
  • Task manager: The Process tab uses MRT without passing HC context, so it never uses HC assets. (It also doesn't pass scale correctly, so the icons look horrible on my PC.) The Details tab uses the Win32 icon. image
  • Settings > Apps & features: Uses MRT correctly: image
@jtippet commented on GitHub (Jul 8, 2020): I cleaned up the icon a bit, and [updated](https://github.com/jtippet/terminal/blob/user/jtippet/hc_icons/res/terminal/Generate-TerminalAssets.ps1) the script-that-has-no-hackiness to also emit HC versions of the new icon. I'd like to get your feedback before I spend time punching pixels and hinting the smaller icons. For concreteness, I've pushed all the assets and SVGs [here](https://github.com/jtippet/terminal/commit/802806e0974889f0ecd3a4b9bc7eb0f7a0c1803f). Here are the two HC assets: ![image](https://user-images.githubusercontent.com/10259764/86872003-3679d880-c090-11ea-89cd-236313189c21.png) I haven't hinted these yet, but they already work okay at the worst size of 16x16. Your web browser is probably trying to stretch the below image with a fuzzy interpolation algorithm, so I suggest saving it to disk and opening in mspaint to see how it *really* looks: <img src="https://user-images.githubusercontent.com/10259764/86872796-e56ae400-c091-11ea-9c86-0c21b0438f77.png" width="64" height="32" style="image-rendering: pixelated"/> I also generated DEV/PRE versions. These are probably less important, but they're here: ![image](https://user-images.githubusercontent.com/10259764/86872328-f6672580-c090-11ea-819f-f136bbc2cb59.png) So let's see how it looks in context. Here's a taskbar with HC black theme. For reference, the pre-existing icon is also pinned at the end (and yes, it always has that annoying teal backplate behind it, even when the app isn't running): ![image](https://user-images.githubusercontent.com/10259764/86873951-40053f80-c094-11ea-98ef-0b732f34b371.png) Here's some pinned tiles on the Start Menu: ![image](https://user-images.githubusercontent.com/10259764/86874152-a8ecb780-c094-11ea-95c1-1a72336c4104.png) So, please give feedback now while it's still easy to tweak the SVG. I'll give you guys a couple days to give feedback, then I'll fix the SVG, regenerate the icons, and finally start hinting the smaller sizes. While testing this, I noticed that the OS's shell has... quirks... when dealing with hybrid apps like Terminal. Apparently some shell surfaces try a win32 icon first, then fall back to the MRT resource. Others try the MRT first, and fall back to win32. And a couple others just use MRT incorrectly. Since Terminal has both MRT and Win32 resources, we get inconsistent results. You can even see this effect with the Terminal Preview that's in the store: the ALT+TAB experience uses terminal.ico, which doesn't have the `PRE` badge, but the taskbar shows the badge. So here's an inventory of the shell: * **Taskbar**: Uses MRT for glom icon, but Win32 for peek icon: ![image](https://user-images.githubusercontent.com/10259764/86870128-ad14d700-c08c-11ea-88ed-de2c0ff79a6f.png) * **Start menu**: The Pinned App uses MRT correctly, but the All Apps uses MRT without passing the HC context to MRM, so it never shows HC assets. Note for example that Start is showing two different calculator icons here, because whoever is loading icons for the left panel didn't pass the HC attribute to MRM: ![image](https://user-images.githubusercontent.com/10259764/86870375-2280a780-c08d-11ea-887f-889c334118d0.png) * _However_, if you have build 20161+ and are enrolled in flight 23615618, then both panels of Start pass HC context, so the icon is drawn correctly in both places 🤷‍♀️. So let's say that that problem is trending towards getting fixed. * **ALT+TAB**, **WIN+TAB**: use Win32 icon: ![image](https://user-images.githubusercontent.com/10259764/86869951-5909f280-c08c-11ea-9aa9-45cddc5d3556.png) * **Task manager**: The Process tab uses MRT without passing HC context, so it never uses HC assets. (It *also* doesn't pass scale correctly, so the icons look horrible on my PC.) The Details tab uses the Win32 icon. ![image](https://user-images.githubusercontent.com/10259764/86870733-ca967080-c08d-11ea-89f9-dc2e64becc6c.png) * **Settings > Apps & features**: Uses MRT correctly: ![image](https://user-images.githubusercontent.com/10259764/86870703-bf434500-c08d-11ea-80c2-c431d44ebe6b.png)
Author
Owner

@KalleOlaviNiemitalo commented on GitHub (Jul 8, 2020):

You can even see this effect with the Terminal Preview that's in the store: the ALT+TAB experience uses terminal.ico, which doesn't have the PRE badge, but the taskbar shows the badge.

That has been reported as https://github.com/microsoft/terminal/issues/6777.

@KalleOlaviNiemitalo commented on GitHub (Jul 8, 2020): > You can even see this effect with the Terminal Preview that's in the store: the ALT+TAB experience uses terminal.ico, which doesn't have the `PRE` badge, but the taskbar shows the badge. That has been reported as <https://github.com/microsoft/terminal/issues/6777>.
Author
Owner

@DHowett commented on GitHub (Jul 8, 2020):

@jtippet Hell, these look amazing! I appreciate that you did the DEV and PRE badged icons 😀 Thanks for checking in my script, as well.

If the discussion in #6777 lands the way I'm hoping, we can probably resolve the Peek and Alt+Tab icon issue. I'm certain that by supplying an icon for our window, we're making any legacy surface that prefers window interrogation display the "wrong" icon. If we can supply the right one, maybe we can handwave the problem away.

@cinnamon-msft you cool with these? If we can green-light these we can slip them into 1.2!

@DHowett commented on GitHub (Jul 8, 2020): @jtippet Hell, these look amazing! I appreciate that you did the DEV and PRE badged icons 😀 Thanks for checking in my script, as well. If the discussion in #6777 lands the way I'm hoping, we can probably resolve the Peek and Alt+Tab icon issue. I'm certain that by supplying an icon for our window, we're making any legacy surface that prefers window interrogation display the "wrong" icon. If we can supply the right one, maybe we can handwave the problem away. @cinnamon-msft you cool with these? If we can green-light these we can slip them into 1.2!
Author
Owner

@cinnamon-msft commented on GitHub (Jul 8, 2020):

Ship it! 🚢

@cinnamon-msft commented on GitHub (Jul 8, 2020): Ship it! 🚢
Author
Owner

@ghost commented on GitHub (Jul 21, 2020):

:tada:This issue was addressed in #6915, which has now been successfully released as Windows Terminal v1.1.2021.0.🎉

Handy links:

@ghost commented on GitHub (Jul 21, 2020): :tada:This issue was addressed in #6915, which has now been successfully released as `Windows Terminal v1.1.2021.0`.:tada: Handy links: * [Release Notes](https://github.com/microsoft/terminal/releases/tag/v1.1.2021.0) * [Store Download](https://www.microsoft.com/store/apps/9n8g5rfz9xk3?cid=storebadge&ocid=badge)
Author
Owner

@ghost commented on GitHub (Jul 22, 2020):

:tada:This issue was addressed in #6915, which has now been successfully released as Windows Terminal v1.1.2021.0.🎉

Handy links:

@ghost commented on GitHub (Jul 22, 2020): :tada:This issue was addressed in #6915, which has now been successfully released as `Windows Terminal v1.1.2021.0`.:tada: Handy links: * [Release Notes](https://github.com/microsoft/terminal/releases/tag/v1.1.2021.0) * [Store Download](https://www.microsoft.com/store/apps/9n8g5rfz9xk3?cid=storebadge&ocid=badge)
Author
Owner

@ghost commented on GitHub (Jul 22, 2020):

:tada:This issue was addressed in #6915, which has now been successfully released as Windows Terminal Preview v1.2.2022.0.🎉

Handy links:

@ghost commented on GitHub (Jul 22, 2020): :tada:This issue was addressed in #6915, which has now been successfully released as `Windows Terminal Preview v1.2.2022.0`.:tada: Handy links: * [Release Notes](https://github.com/microsoft/terminal/releases/tag/v1.2.2022.0) * [Store Download](https://www.microsoft.com/store/apps/9n8g5rfz9xk3?cid=storebadge&ocid=badge)
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/terminal#9485