Home > Software engineering >  Finder toolbar icons are jagged or anti-aliased on non-retina displays
Finder toolbar icons are jagged or anti-aliased on non-retina displays

Time:03-14

I'm trying to create Finder toolbar icons that match the look and feel of Monterey, but they seem to be jagged as if there are issues with anti-aliasing.

Here are the retina icons I'm trying to convert (two on the right):

Finder toolbar in retina

And here is how they look on my non-retina display:

Finder toolbar on non-retina display

At first, I thought this was simply a problem with automatic anti-aliasing. However, when I manually resize the icons to 32x32, this is how they're supposed to look:

Finder toolbar desired appearance

But when I use those icons in Finder, they look jagged all over again. I have no idea what is happening.

CodePudding user response:

Finder has a quirk whereby the alpha layers of toolbar icons get multiplied by two when the window is active. If the Finder window is in the background, however, the icons probably look how'd you expect.

If your icons have any thin graphical element, the anti-aliased pixels will have low alpha values. When those alpha values are doubled, the pixels practically disappear, which is what looks like is happening.

I solved this issue when trying to resize the icons provided in OpenInTerminal-Light. My solution is a bit of a hack:

To fix the rendering, I manually resized the icons and added 89% gray behind the anti-aliased pixels. Every pixel has either 0% or 100% alpha now.

You can see more detailed notes in the issue I opened on GitHub.

  • Related