Cordova iOS app icon - multitasking app switcher and backgrounding app shows different icon

mobile
1

I’m seeing some strange behavior related to app icons. I believe I’ve defined all of them correctly and Xcode looks ok to me but for some reason the Cordova app icon is displayed in the multitasking app switcher and the default Meteor icon flashes briefly when backgrounding the app.

Any ideas what could be happening here? I feel like I’m at the finish line of releasing this app but can’t go live with this.

I’m on Meteor 1.8.1. Here’s what my mobile-config.js looks like:

App.icons({
  'app_store': 'resources/icon-ios-1024@1x.png', // (1024x1024)Apple App Store
  'iphone_2x': 'resources/icon-ios-60@2x.png', // (120x120) iPhone 5, SE, 6, 6s, 7, 8
  'iphone_3x': 'resources/icon-ios-60@3x.png', // (180x180) iPhone 6 Plus, 6s Plus, 7 Plus, 8 Plus, X
  'ipad_2x':  'resources/icon-ios-76@2x.png', // (152x152) iPad, iPad mini
  'ipad_pro': 'resources/icon-ios-83.5@2x.png', // (167x167) iPad Pro
  'ios_settings_2x': 'resources/icon-ios-29@2x.png', // (58x58) iPhone 5, SE, 6, 6s, 7, 8, iPad, mini, Pro
  'ios_settings_3x': 'resources/icon-ios-29@3x.png', // (87x87) iPhone 6 Plus, 6s Plus, 7 Plus, 8 Plus, X
  'ios_spotlight_2x': 'resources/icon-ios-40@2x.png', // (80x80) iPhone 5, SE, 6, 6s, 7, 8, iPad, mini, Pro
  'ios_spotlight_3x': 'resources/icon-ios-40@3x.png', // (120x120) iPhone 6 Plus, 6s Plus, 7 Plus, 8 Plus, X
  'ios_notification_2x': 'resources/icon-ios-20@2x.png', // (40x40) iPhone 5, SE, 6, 6s, 7, 8, iPad, mini, Pro
  'ios_notification_3x': 'resources/icon-ios-20@3x.png', // (60x60) iPhone 6 Plus, 6s Plus, 7 Plus, 8 Plus, X
  'ipad': 'resources/icon-ios-76@1x.png', // (76x76) Legacy
  'ios_settings': 'resources/icon-ios-29@1x.png', // (29x29) Legacy
  'ios_spotlight': 'resources/icon-ios-40@1x.png', // (40x40) Legacy
  'ios_notification': 'resources/icon-ios-20@1x.png', // (20x20) Legacy
  'iphone_legacy': 'resources/icon-ios-57@1x.png', // (57x57) Legacy
  'iphone_legacy_2x': 'resources/icon-ios-57@2x.png', // (114x114) Legacy
  'ipad_spotlight_legacy': 'resources/icon-ios-50@1x.png', // (50x50) Legacy
  'ipad_spotlight_legacy_2x': 'resources/icon-ios-50@2x.png', // (100x100) Legacy
  'ipad_app_legacy': 'resources/icon-ios-72@1x.png', // (72x72) Legacy
  'ipad_app_legacy_2x': 'resources/icon-ios-72@2x.png', // (144x144) Legacy
  // More screen sizes and platforms...
});

Here’s what app icons look like in Xcode

24%20AM
24%20AM2674×1718 312 KB

For some reason the multitasking app switcher displays the Cordova default icon

IMG_E1D866C58009-1
IMG_E1D866C58009-11125×2436 751 KB

And when I background the app by swiping up from the bottom, it briefly flashes the default Meteor icon before switching to my icon. Here’s a little video:
appicon

2

Since Cordova is not unique to Meteor, it’s always a good idea to Google Cordova issues without the “Meteor” search term.

I found this:

According to that, adding an Icon-Small@3x icon might help (don’t forget to add to mobile-config.js as well).

Look here for the full list of recommended icon sizes: Technical Q&A QA1686: App Icons on iPhone, iPad and Apple Watch

Let us know if that helps…

1 Like
3

Thanks @wildhart. Unfortunately that didn’t do the trick.

I didn’t see a specific recommendation on how to add via App.icons in the Meteor Mobile Guide so I added using App.appendToConfig to replicate the config.xml that the Github issue suggests following: https://github.com/phonegap/phonegap-app-developer/blob/master/config.xml

I’m pretty stumped at the moment. I can’t find the default Cordova image anywhere in the cordova-build folder.

Has anyone else come across this?

4

I haven’t noticed it on my own app on a couple of iPad Minis and an iPhone 8. Could you try my app on your device and report back?

Here's my App.icons used to generate that app. 
// https://docs.meteor.com/api/mobile-config.html#App-icons
App.icons({
  app_store:'private/ios/Icon-1024.png', // (1024x1024) // Apple App Store - NO TRANSPARENT BACKGROUND
  iphone_2x:'private/ios/Icon-120.png', //  (120x120) // iPhone 5, SE, 6, 6s, 7, 8
  iphone_3x:'private/ios/Icon-180.png', //  (180x180) // iPhone 6 Plus, 6s Plus, 7 Plus, 8 Plus, X
  ipad_2x:'private/ios/Icon-152.png', //  (152x152) // iPad, iPad mini
  ipad_pro:'private/ios/Icon-167.png', //  (167x167) // iPad Pro
  ios_settings_2x:'private/ios/Icon-58.png', //  (58x58) // iPhone 5, SE, 6, 6s, 7, 8, iPad, mini, Pro
  ios_settings_3x:'private/ios/Icon-87.png', //  (87x87) // iPhone 6 Plus, 6s Plus, 7 Plus, 8 Plus, X
  ios_spotlight_2x:'private/ios/Icon-80.png', //  (80x80) // iPhone 5, SE, 6, 6s, 7, 8, iPad, mini, Pro
  ios_spotlight_3x:'private/ios/Icon-120.png', //  (120x120) // iPhone 6 Plus, 6s Plus, 7 Plus, 8 Plus, X
  ios_notification_2x:'private/ios/Icon-40.png', //  (40x40) // iPhone 5, SE, 6, 6s, 7, 8, iPad, mini, Pro
  ios_notification_3x:'private/ios/Icon-60.png', //  (60x60 // iPhone 6 Plus, 6s Plus, 7 Plus, 8 Plus, X
  ipad:'private/ios/Icon-76.png', // (76x76) // Legacy
  ios_settings:'private/ios/Icon-29.png', // (29x29) // Legacy
  ios_spotlight:'private/ios/Icon-40.png', // (40x40) // Legacy
  ios_notification:'private/ios/Icon-20.png', // (20x20) // Legacy
  iphone_legacy:'private/ios/Icon-57.png', // (57x57) // Legacy
  iphone_legacy_2x:'private/ios/Icon-114.png', // (114x114) // Legacy
  ipad_spotlight_legacy:'private/ios/Icon-50.png', // (50x50) // Legacy
  ipad_spotlight_legacy_2x:'private/ios/Icon-100.png', // (100x100) // Legacy
  ipad_app_legacy:'private/ios/Icon-72.png', // (72x72) // Legacy
  ipad_app_legacy_2x:'private/ios/Icon-144.png', // (144x144) // Legacy
  android_mdpi: 'public/favicon-48x48.png',
  android_hdpi: 'public/favicon-72x72.png',
  android_xhdpi: 'public/favicon-96x96.png',
  android_xxhdpi: 'public/favicon-144x144.png',
  android_xxxhdpi: 'public/favicon-192x192.png'
});

Maybe the icon is hanging round from a previous build? Have you tried uninstalling the app, deleting .meteor/local/cordova-build, rebuilding and re-installing the app?

Edit: if you want to add me as a TestFlight user I’d be happy to try your app on my devices. If so, PM me…

5

Thank you for the generous offer to help test! So here’s something weird, after several hours of frustration :slight_smile: , I went to bed. The next day, I was playing with the app when it was not plugged in to my computer and suddenly the issues are no longer there.

I have some theories that I’m hoping to test later tonight. Will report back.

6

Confirmed that using your App.icons set up works. :slight_smile: I’m not sure where I was running into an issue. I had been clearing the cordova-build folder and reinstalling. Maybe it had something to do with the way the icon files were named? If I had more time, I’d try harder to repro. I’m just glad it’s working.

Thanks again for your help. I really appreciate it.