Smaller Preferences Tab Icons in Big Sur
I believe macOS Big Sur changed the prefs tab icon size, and because of that, most Mac apps now have blurry icons. I was unable to find a size in the macOS Human Interface Guidelines, but dropping a solid image into your Xcode project reveals the full image area for the asset. In this case, it’s 54×54 pixels on a Retina display, which means prefs tab icon assets need to be exactly 27×27pt to render sharply. Please note that the icons themselves are only around 22×22pt, with the additional space just being padding.
I found it tricky to make a custom icon look right next to an SF Symbol. Vectors help it look sharp at different resolutions, but they don’t help with scaling. It really has to be drawn at the desired size or the stroke widths will be off. And this applies recursively: you can’t just draw a sub-element and then scale it to the right size, or its strokes won’t match the rest of the icon. Naive scaling of a vector icon actually looks worse than scaling down a bitmap.
Previously:
3 Comments RSS · Twitter
... then Apple releases a new version of macOS where tabs are 52x52 pixels and you're back in blurtown ... then you add an isOperatingSystemAtLeast() call to switch out the assets ... then you get tired of this and say fine I don't care about a little blurriness if I have to spend half my time updating my app for every new version of macOS ... then people complain online about how your app just isn't as nice as it used to be ... then everybody switches to some megacorp's free app which also sucks but if your garage startup isn't going to be pixel-perfect across every OS version and display size then what's the point ... then you give up and buy a pressure washer because at least those customers are happy to pay $100 an hour for your work and not complain ...
I noticed the smaller icons a while ago. But I don't see any blurry icons. The example in Marc Edwards blog doesn't look blurry at all to me in normal resolution. His "blurry" top and right side are only more blurry because Apple cut off a pixel at the other 2 sides.
SF Symbols ae boring anyways.
>The General tab icon in the macOS Finder preferences suffers from this issue. It’s especially noticable on the top and right side.
I… don't really see it.
In the scaled image, I see that the left and bottom parts of the cog have a sharp edge, whereas the top and right and bottom ones don't, but to me, it kind of looks more like the left and bottom are inadvertently cut off, maybe? In any case, at 1x, I find the problem impossible to notice.
