Answer me these questions three. What is your name? What is your quest? What is your favorite color?
Congratulations, everyone who made it this far gave the right answer: blue.
No, yellow!
Safari's built-in toolbar icons are grayscale. I included all of them for you to see in the first screenshot above. In contrast (pun intended), Safari extension icons are tinted. But not by the extension developer! Safari extension icons start out grayscale too. Below is the original icon used in these screenshots. (I've put it on a white background, otherwise you couldn't see it in dark mode.)
The tint is added by Safari when it puts the extension icon in the toolbar. On macOS, it's the accent color in System Preferences.
On iOS, the extension color is blue. Because your choices are blue or Android.
Why does this tinting occur? I've been told by Apple engineers that the tint is an indicator to the user that the extension is active in the current page. If the extension is not active, then it's not tinted. The irony is that Apple does not appear to inform the user anywhere that the tint is an indicator to the user. In reality, users often have no clue about this and are utterly confused by it! They tend to think the color is the extension developer's fault.
It is possible for extension developers to avoid having their icons tinted by Safari. The key is that Safari will only tint icons that it detects to be grayscale. Here's my Tweaks for Twitter icon, which is used on macOS in both Safari and Google Chrome.
And here's how it looks in the Safari toolbar. Note that my shade of blue is different from Safari's shade of blue.
Apple tells Chrome extension developers that they can now easily port to Safari. But Apple doesn't mention porting the extension icons. Here are the extensions in my Google Chrome toolbar.
Imagine having those colors in the drab Safari toolbar alongside the built-in grayscale icons. The extension icons would be conspicuous. It feels like a no-win scenario for extension developers: if your icon is colorful, then it doesn't fit in with the Safari toolbar, but if you do what Apple tells you to do and make your icon a grayscale "template", then it still doesn't fit in with the Safari toolbar, because Safari tints your icon anyway. This is especially annoying for an extension like StopTheMadness that's active on every web page. The tint is distracting and unnecessary.
Fortunately, I found a way to, uh, stop the madness. On Mac:
And on iPad:
I knew that Safari would tint an icon it considered grayscale but not an icon it considered colored. My trick was to find a color scheme that looked close enough to grayscale but had just enough color to fool Safari's grayscale detection algorithm. Through good old fashioned trial and error, I eventually found something that worked.
My Safari extension icons have passed review multiple times in the Mac App Store and iOS App Store. I don't use any "private API", and there's no App Store rule that specifies the color of your icons. The icons are simply standard image files, nothing special or strange about them. And my guess is that App Store reviewers are just as clueless about Safari extension icon tinting as normal users are. (Since App Store reviewers are generally clueless about most things.) I wasn't trying to fool App Store review. I was only trying to fool the Apple engineers who decided that tinting Safari extension icons was a good idea. Nothing wrong or "illegal" about that. And again, Safari extension icon tinting is not documented by Apple at all. How can a developer break the rules when there are no rules?
On iPhone, Safari extension icons don't appear in the toolbar, because there's obviously not enough space for them. You only see the icons if you open a menu. I wouldn't mind the icon tinting if it only occurred in a menu.
The problem is that Safari extension icons are always visible on Mac, unless you customize your toolbar and remove them, and they're usually visible on iPad, unless you have multiple extensions installed. (Unfortunately, Safari on iPad doesn't allow you to manually customize your toolbar.)
You might ask, why did I publish this article and draw attention to myself, rather than continuing to fly under the radar? There are several reasons, but the main reason is that I sometimes get asked by customers why my extension icon is not blue (or the system accent color). This question comes from people who have multiple Safari extensions installed, and they say that my extension doesn't fit in.
Again, this feels like a no-win scenario for extension developers. Users with only one extension installed wonder why a blue extension icon doesn't fit in with Safari's toolbar icons, whereas users with multiple extensions installed wonder why a non-blue extension icon doesn't fit in with other extension icons (despite the fact that blue extension icons still don't fit in with Safari's toolbar icons).
I wanted to write an article that I could refer to, rather than having to repeat my explanation. Also, I hope that Apple will reconsider the whole idea of tinting Safari extension icons in the toolbar. Or if that hope is in vain, then I hope at least that other Safari extension developers will follow me in designing their toolbar icons to avoid the tinting. Then we'll all fit in!