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

Tap Add to Home Screen and select the icon next to your shortcut under Home Screen Name and Icon. In the pop-up window that appears, select File, Photo, or Take Photo. You can crop an image to customize what will show, but happily, the image needn't be square or a specific size. Tap Add > Done.