Missing/detached sizes for iOS app icons

[bmcharg]

When I add the iOS platform in my project, not all icons required are generated. From a clean project, I see the following when inspecting images.xcassets in Xcode 10.2 after cordova-res has been run

As you can see, the following sizes are missing;

Apple Watch Home Screen 44pt@2x
Apple Watch Home Screen 50pt@2x
Apple Watch Short Look 108pt@2x

and there is an unassigned image

AppIcon44x44@2x.png

The code which gets added to my config.xml is as follows;

        <icon height="57" src="resources/ios/icon/icon.png" width="57" />
        <icon height="114" src="resources/ios/icon/icon@2x.png" width="114" />
        <icon height="20" src="resources/ios/icon/icon-20.png" width="20" />
        <icon height="40" src="resources/ios/icon/icon-20@2x.png" width="40" />
        <icon height="60" src="resources/ios/icon/icon-20@3x.png" width="60" />
        <icon height="29" src="resources/ios/icon/icon-29.png" width="29" />
        <icon height="58" src="resources/ios/icon/icon-29@2x.png" width="58" />
        <icon height="87" src="resources/ios/icon/icon-29@3x.png" width="87" />
        <icon height="48" src="resources/ios/icon/icon-24@2x.png" width="48" />
        <icon height="55" src="resources/ios/icon/icon-27.5@2x.png" width="55" />
        <icon height="88" src="resources/ios/icon/icon-44@2x.png" width="88" />
        <icon height="172" src="resources/ios/icon/icon-86@2x.png" width="172" />
        <icon height="196" src="resources/ios/icon/icon-98@2x.png" width="196" />
        <icon height="40" src="resources/ios/icon/icon-40.png" width="40" />
        <icon height="80" src="resources/ios/icon/icon-40@2x.png" width="80" />
        <icon height="120" src="resources/ios/icon/icon-40@3x.png" width="120" />
        <icon height="50" src="resources/ios/icon/icon-50.png" width="50" />
        <icon height="100" src="resources/ios/icon/icon-50@2x.png" width="100" />
        <icon height="60" src="resources/ios/icon/icon-60.png" width="60" />
        <icon height="120" src="resources/ios/icon/icon-60@2x.png" width="120" />
        <icon height="180" src="resources/ios/icon/icon-60@3x.png" width="180" />
        <icon height="72" src="resources/ios/icon/icon-72.png" width="72" />
        <icon height="144" src="resources/ios/icon/icon-72@2x.png" width="144" />
        <icon height="76" src="resources/ios/icon/icon-76.png" width="76" />
        <icon height="152" src="resources/ios/icon/icon-76@2x.png" width="152" />
        <icon height="167" src="resources/ios/icon/icon-83.5@2x.png" width="167" />
        <icon height="29" src="resources/ios/icon/icon-small.png" width="29" />
        <icon height="58" src="resources/ios/icon/icon-small@2x.png" width="58" />
        <icon height="87" src="resources/ios/icon/icon-small@3x.png" width="87" />
        <icon height="1024" src="resources/ios/icon/icon-1024.png" width="1024" />

What are we doing wrong, and is there a way to add the alternative sizes in ourselves via config.xml?

Ionic:

   Ionic CLI          : 5.3.0 (/Users/Brian/.nvm/versions/node/v11.7.0/lib/node_modules/ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.2.4

Cordova:

   Cordova CLI       : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms : ios 4.5.5
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, (and 16 other plugins)

Utility:

   cordova-res : 0.6.0 
   native-run  : 0.2.8 

System:

   Android SDK Tools : 26.1.1 (/Users/Brian/Library/Android/sdk)
   ios-deploy        : 1.9.4
   NodeJS            : v11.7.0 (/Users/brian/.nvm/versions/node/v11.7.0/bin/node)
   npm               : 6.5.0
   OS                : macOS Mojave
   Xcode             : Xcode 10.2.1 Build version 10E1001

[imhoffd]

Are you targeting the Apple Watch with Cordova? or maybe I'm misunderstanding something?

[bmcharg]

I have an app built in Cordova which also has watch functionality. The generator appears to create all the other watch icons with the exception of these three.

[imhoffd]

Oh, sure! I see.

So, I'm confused as to why it's saying an icon is unassigned. We're generating a 44x44@2x icon:

        <icon height="88" src="resources/ios/icon/icon-44@2x.png" width="88" />

[bmcharg]

Yeah, that’s odd. Don’t understand why that doesn’t get hooked up. I presume the other two aren’t being generated at all and probably need an update, but that one is odd.

It happens every time the platform is removed and added, so it’s a consistently replicable pattern. I even tried removing all references to the icon from the config.xml and they were correctly regenerated, but with these same three problematic sizes.

[imhoffd]

Okay, I'll mark it as a bug. I can't promise I'll get around to this in a timely manner--I have other priorities at the moment. If you like, this tool is easy enough to setup locally and work on. The icons are listed here: https://github.com/ionic-team/cordova-res/blob/master/src/resources.ts#L425

[bmcharg]

Ah ok, cool. Well thanks for the quick replies. I’ll maybe take a look and do a PR then.

[WuglyakBolgoink]

related to https://blog.iconfinder.com/icons-for-apple-watch-the-definitive-guide-3d7f6d1b8016

in my case xCode cannot find this icon:

[imhoffd]

@WuglyakBolgoink Looks like it's not acknowledged by Cordova: apache/cordova-ios#657

[runspired]

I noticed when using cordova-res today that it generates 28 icons but not all of them are placed into the ios project. I wonder if this is the source of the configuration problem.

The files that are generated into resources/ios/icon but not copied into the project include:

- icon-24@2x.png
- icon-27.5@2x.png
- icon-44@2x.png
- icon-50.png
- icon-50@2x.png
- icon-60.png
- icon-72.png
- icon-72@2x.png
- icon-72@3x.png
- icon-86@2x.png
- icon-98@2x.png
- icon-108@2x.png
- icon-1024@2x.png
- icon.png
- icon@2x.png

Additionally, its not clear where the 512 dimension icon in the project is sourced from, as that's not one of the asset dimensions generated into the resources folder.

[mlynch]

Fixed in @capacitor/assets