What are the correct sizes and colours to provide for the toolbar icon of a Safari Extension on iOS?
For the size I tried creating a solid black icon and measuring the size. They seem to render at 24x24pt but providing 24px, 48px, and 72px images still look blurry. This also only covers the default text size; the icons scales with the system text size.
The MDN documentation (which I cannot link here) says that an SVG can be used but supplying an SVG displays the app icon instead.
The example icons are all black (like other toolbar icons on iOS) but when displayed in dark mode they are still black, which does not match the other icons in the list. Do I need to specify black and white icons? I tried using browser_action's theme_icons but they seem to be ignored.
I've seen other solutions to switch out the icon at runtime but that requires a content script to be injected in to every page or for the popup to be opened by the user.
iOS is already tinting the icon blue when the extension is active, can it tint it white when inactive in dark mode?
At some point in the beta cycle this seems to have been improved and icons are now tinted and scaled correctly. The sizes I'm using are:
- 19px (iPad and iPhone menu 1x)
- 24px (iPad address bar 1x)
- 38px (iPad and iPhone menu 2x)
- 48px (iPad address bar 2x)
- 57px (iPad and iPhone menu 3x)
- 72px (iPad address bar 3x)