Unable to create custom folder icon with MacOS UTI

Targets macOS
1

Hi,

I recently saw that some apps create a custom folder in the /Documents folder which has the app’s logo on the folder icon, eg GarageBand, Pages, BBEdit. I thought that would be pretty cool, and tried to do the same for my app, following these instructions:

https://blog.xojo.com/2019/07/30/custom-folder-icons-with-macos-uniform-type-identifiers/

However, when I follow the example, increase my app’s version number, build it and use it to create a custom folder on the desktop, while it does create a folder, it does not have the custom icon, just the usual default folder icon. Below is a screenshot of the settings I have tried in the FileType set. I have also tried setting the Type to File and Role to View or Edit without success.

Would anyone know what I’m doing wrong?

Thanks,
Frank

image
image1776×630 102 KB

2

Does the folder that you created have the file extension at the end of its name?

3

Hi Greg,

Yes it does. After creating the FileType set, I put this code into a button.Action event:

Var f As FolderItem = SpecialFolder.Desktop.Child("test.makmakerfolder")
f.CreateFolder
f.ExtensionVisible = False

and it creates a folder on the desktop, just without the custom icon (see screenshot below).

image
image540×1626 118 KB

4

Oh, my bad! It actually has worked! :grin:

image
image1626×554 96.2 KB

In a Finder window looking at the desktop, the custom folder icon is displayed – the icon is just not displayed on the desktop directly. Now I just have to work out why my folder icon isn’t transparent around the edges…

Thanks Greg for writing that tutorial.

Cheers,
Frank

1 Like
5

FWIW, it won’t change ones that already exist if they didn’t get the UTI assigned to them.

6

A couple of interesting findings that may hopefully help someone else troubleshoot who is trying to do the same as me:

  1. I rebooted my computer – not sure if that made any difference or not – and my test folder on the desktop still displayed the default folder icon until I right clicked on it and selected “Get Info”, and then it changed into my custom icon. So there must be some caching or something going on until it is forced to refresh.
  2. When I loaded my .ico file into the FileType set, it seems to have lost its mask, which is why it is not transparent around the edges, so I’ll need to figure out what happened there.

Cheers,
Frank

7

There’s a bug in the IDE right now concerning loading ico files on macOS. I suggest opening it in Preview and saving either as icns or as individual pngs.

8

Can an UTI be assigned after the item has been created?

9

In all my searches, I was unable to find a way to do that.

10

Clearly similar to other missing stuffs or bugs at Apple. They make new features but half-baked only.

11

It seems like the terminal command “mdimport” would do the trick (credits to Norman Palardy who told me this).

12

One final follow up. I tried Greg’s suggestion of using icns instead of ico, however there were also issues with that!

  1. I converted my png into icns using this workflow https://filipmolcik.com/convert-png-to-icns-right-click-converter/, which taught me a bit on how Automator works :slight_smile:
  2. I opened up my Xojo 2021r2 IDE, opened my FileType group and dragged the icns onto the icon field. It was accepted, however when I clicked on the icon field to expand it, I could see that the images were not properly formatted (the mask was a black square and for some reason the transparent parts of the image were black, not white)
  3. So I tried dragging the icns onto the expanded icon window → crashed the IDE. I have reported a Feedback bug (#65654)

The workaround I have cobbled together, which works for me is this:

  1. Duplicated my png and renamed it to mask.png. Used Preview tools to create a mask (instant alpha, invert selection, adjust colour settings)
  2. Converted my png and mask into ico using this website https://hnet.com/png-to-ico/
  3. Dragged ico onto the image tab of the icon window in FileType group
  4. Changed to the mask tab (mask is just a black square) and dragged on mask.png
  5. Changed to preview tab to confirm that icon now looks as it should

Increased my app version, built it. My custom folder icon now looks as I want it (after forcing a refresh with Get Info) :grinning_face_with_smiling_eyes:

Frustrating, but learnt some new things along the way…

1 Like