How to create custom Document Icon in iOS 14+ apps

Question

I am trying to create a custom document icon for my multi-platform (iOS 14 - macOS Big Sur) app.

So, for macOS, it's pretty easy, I can either attach a legacy icon, or better, supply a combination of background, image and text, to composite a document icon, as described in macOS Document Icon Human Interface Guidelines .

So, in Info.plist, the UTExportedTypeDeclarations would contain a UTTypeIcons key like the following:

        <key>UTTypeIcons</key>
        <dict>
            <key>UTTypeIconBackgroundName</key>
            <string>Icon Fill</string>
            <key>UTTypeIconBadgeName</key>
            <string>Icon Image</string>
            <key>UTTypeIconText</key>
            <string>Dapka</string>
        </dict>

Now, the real challenge is in the iOS document icon. First, there are no updated documentation. Second, I couldn't do it like I did with macOS. Here, I should only supply one image, so I uploaded it as PNG in Resources folder, and then modified the UTExportedTypeDeclarations in Info.plist as following:

        <key>UTTypeIconFiles</key>
        <array>
            <string>Document Icon</string>
        </array>

But, the icon didn't appear correctly, it appeared as a centered image with white background, and no text.

Any ideas?

Answer 1

If your app creates custom documents, you don't need to design document icons because iOS uses your app icon to create document icons automatically. See the tip in docs Documentation

Answer 2

You need to add CFBundleTypeIconsFiles in your Document Type in info.plist