We've got a web app powered by cordova to generate mobile apps. Everything does work on iOS.
We're trying to add the android platform and about everything works well except application icons.
The config.xml
mostly follows what's on the docs:
<widget
id="xxx"
version="xxx"
ios-CFBundleVersion="xxx"
xmlns="http://www.w3.org/ns/widgets"
xmlns:cdv="http://cordova.apache.org/ns/1.0"
>
<name>xxx</name>
<description></description>
<author email="xxx" href="xxx">xxx</author>
<content src="index.html" />
<engine name="ios" spec="~4.5.1" />
<engine name="android" spec="~6.3.0" />
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
<preference name="BackupWebStorage" value="none" />
<preference name="deployment-target" value="8.0" />
<preference name="KeyboardDisplayRequiresUserAction" value="false" />
<preference name="UIWebViewDecelerationSpeed" value="normal" />
<icon src="resources/icons/Icon-Small.png" width="29" height="29" />
<icon src="resources/icons/[email protected]" width="58" height="58" />
<icon src="resources/icons/[email protected]" width="87" height="87" />
<icon src="resources/icons/Icon-40.png" width="40" height="40" />
<icon src="resources/icons/Icon-50.png" width="50" height="50" />
<icon src="resources/icons/[email protected]" width="100" height="100" />
<icon src="resources/icons/Icon.png" width="57" height="57" />
<icon src="resources/icons/[email protected]" width="114" height="114" />
<icon src="resources/icons/[email protected]" width="80" height="80" />
<icon src="resources/icons/[email protected]" width="120" height="120" />
<icon src="resources/icons/Icon-60.png" width="60" height="60" />
<icon src="resources/icons/[email protected]" width="120" height="120" />
<icon src="resources/icons/[email protected]" width="180" height="180" />
<icon src="resources/icons/Icon-72.png" width="72" height="72" />
<icon src="resources/icons/[email protected]" width="144" height="144" />
<icon src="resources/icons/Icon-76.png" width="76" height="76" />
<icon src="resources/icons/[email protected]" width="152" height="152" />
<icon src="resources/icons/Icon-83.5.png" width="83.5" height="83.5" />
<icon src="resources/icons/[email protected]" width="167" height="167" />
<icon src="resources/icons/[email protected]" width="1024" height="1024" />
<preference name="ShowSplashScreenSpinner" value="false"/>
<splash src="resources/splash/Default@2x~universal~anyany.png" width="2732" height="2732"/>
</platform>
<platform name="android">
<allow-intent href="market:*" />
<icon src="resources/icons/ldpi.png" density="ldpi" />
<icon src="resources/icons/mdpi.png" density="mdpi" />
<icon src="resources/icons/hdpi.png" density="hdpi" />
<icon src="resources/icons/xhdpi.png" density="xhdpi" />
<icon src="resources/icons/xxhdpi.png" density="xxhdpi" />
<icon src="resources/icons/xxxhdpi.png" density="xxxhdpi" />
<splash src="resources/splash/splash-land-hdpi.png" density="land-hdpi"/>
<splash src="resources/splash/splash-land-ldpi.png" density="land-ldpi"/>
<splash src="resources/splash/splash-land-mdpi.png" density="land-mdpi"/>
<splash src="resources/splash/splash-land-xhdpi.png" density="land-xhdpi"/>
<splash src="resources/splash/splash-port-hdpi.png" density="port-hdpi"/>
<splash src="resources/splash/splash-port-ldpi.png" density="port-ldpi"/>
<splash src="resources/splash/splash-port-mdpi.png" density="port-mdpi"/>
<splash src="resources/splash/splash-port-xhdpi.png" density="port-xhdpi"/>
<preference name="AndroidPersistentFileLocation" value="Compatibility" />
</platform>
<plugin name="cordova-plugin-whitelist" spec="1" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-navigation href="https://*/*" />
<allow-intent href="mailto:*" />
<allow-navigation href="mailto:*" />
<universal-links>
<ios-team-id value="xxx" />
<host name="$host" scheme="$scheme" event="universal-link-clicked"/>
</universal-links>
<plugin name="cordova-plugin-file-transfer" spec="~1.6.2" />
<plugin name="cordova-plugin-file" spec="~4.3.3" />
<plugin name="cordova-plugin-network-information" spec="~1.3.2" />
<plugin name="cordova-plugin-statusbar" spec="~2.2.2" />
<plugin name="cordova-plugin-background-fetch" spec="https://github.com/christocracy/cordova-plugin-background-fetch.git" />
<plugin name="cordova-plugin-inappbrowser" spec="~1.7.0" />
<plugin name="cordova-plugin-disable-bitcode" spec="~1.3.2" />
<plugin name="com.batch.cordova" spec="https://github.com/floo51/cordova-plugin.git" />
<plugin name="cordova-plugin-splashscreen" spec="~4.0.2" />
<plugin name="cordova-plugin-ios-non-exempt-encryption" spec="~1.0.0" />
<plugin name="cordova-universal-links-plugin" spec="~1.2.1" />
</widget>
There are different types of icons:
Home screen (does not work)
Runnings apps (does not work)
Most weird is that it does work on simulator (nexus 5) but not on a OnePlus One or a Moto G4.
We're using cordova 6.5. All icons are resized according to what's on the docs. Did we miss anything ?
Go to Settings, then tap on “Display” then tap on “Full screen apps“. From there, turn on what apps you want to appear on your home screen. Go back to home screen after turning on all the apps you want icons for, scroll right to left, they should all be there.
Place your source splash image and icon images in this folder. Update the config. xml configuration file to point to your custom files. If you have an Android app, the requirements to for identifying the splash images depends on whether you created the app with or without the MobileFirst template.
I recommend two things:
1) Use qualifier
instead of density
. Example:
<icon src="resources/icons/ldpi.png" qualifier="ldpi" />
2) Add default icon & splash as a fallback in the root folder of your project:
<icon src="icon.png" />
<splash src="splash.png" />
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With