Finder Quick Action icon rendering when using custom SF Symbol

App & System Services General
cmsj
cmsj OP
Created 3w
Replies 2
Boosts 0
Views 69
Participants 1

Hey folks!

I'm working on a macOS app which has a Finder Quick Action extension. It's all working fine, but I'm hitting a weird struggle with getting the icon rendering how I would like, and the docs haven't been able to help me.

I want to re-use a custom SF Symbol from my app, so I've copied that from the main app's xcassets bundle to the one in the extension, and configured it for Template rendering.

The icon renders in the right click menu in Finder, the Finder preview pane and the Extensions section of System Settings, but all of them render with the wrong colour in dark mode. In light mode they look fine, but in dark mode I would expect a templated icon to be rendered in white, not black.

I've attached a variety of screenshots of the icons in the UI and how things are set up in Xcode (both for the symbol in the xcassets bundle, and the Info.plist)

I tried reading the docs, searching Google, searching GitHub and even asking the dreaded AI, but it seems like there's not really very much information available about doing icons for Finder extensions, especially ones using a custom SF Symbol, so I would love to know if anyone here has been able to solve this in the past!

Finder preview pane in light mode:

Finder preview pane in dark mode:

Finder quick action context menu:

System Settings extension preferences:

The custom symbol in my .xcassets bundle:

The finder extension's Info.plist:

Replies  2
Boosts  0
Views  69
Participants  1
cmsj
cmsj OP
2w

After much experimentation I believe that the docs for NSExtensionServiceFinderPreviewIconName are just wrong, the images supplied should never be a template image because that always leads to incorrect rendering.

From my testing, it seems like the only way to achieve correctly coloured icons is to supply an Image Set in your asset bundle that contains a 16x16px @1x bitmap image and a 32x32px @2x bitmap image.

  • If you supply a larger image, it is not scaled, but merely cropped.
  • If you supply an SVG image it will be rendered at some random scale, and multiple layers seem to be ignored
  • If you supply a template image (ie black only) it will be rendered as black and never treated like a proper template image
  • If you supply an SFSymbol name (system or custom) it will be rendered as black and never treated like a proper template image

The rabbit hole goes even deeper though because despite these images being limited to 32x32px, Apple's own images seem to be 64x64px and they render correctly, leading to wild visual inconsistency like that seen in the System Settings panel for enabling Finder Actions:

In that screenshot, "Compress" and "Extract" are mine, "Make Gif" and "Meme Maker" are 64x64px images from Shortcuts, "Remove Background" is from Pixelmator Pro, and the other three are from Apple's sample code for making Finder Actions.

I have yet to figure out how Pixelmator is able to supply an image larger than 32x32px.

0
cmsj
cmsj OP
2w

I was able to fix the size issue, but still not the templated rendering.

I rendered my icon out as a 1024x1024px PNG, used Image2Icon to make an Iconset out of it (without clipping it to any of the built-in shapes) and then used this in the extension's Info.plist to load it:

        <key>CFBundleIcons</key>
        <dict>
            <key>CFBundlePrimaryIcon</key>
            <dict>
                <key>CFBundleIconName</key>
                <string>Icon_Template</string>
                <key>CFBundleIconFile</key>
                <string>Extract</string>
            </dict>
        </dict>

which can then be referred to by name for the finder preview icon:

<key>NSExtensionServiceFinderPreviewIconName</key>
                <string>Icon_Template</string>

Of interesting note, it's also possible to use the same undocumented thing that Apple uses to make an icon out of an SF Symbol and some colours, but that doesn't work with a custom symbol. For future travellers' reference:

		<key>ISGraphicIconConfiguration</key>
		<dict>
			<key>ISRenderingMode</key>
			<string>automatic</string>
			<key>ISSymbolName</key>
			<string>rectangle.compress.vertical</string>
			<key>ISEnclosureColor</key>
			<string>gray</string>
			<key>ISSymbolColor</key>
			<string>white</string>
		</dict>
0
Finder Quick Action icon rendering when using custom SF Symbol
First post date Last post date
 
 
Q