Adding icons to IOS App in Cordova CLI 6.3.1

2019-06-07 02:53发布

问题:

I am creating an app in IOS and android in cordova cli 6.3.1.

I am not getting the app icon displayed in IOS but working fine in android.

Here is my config


My APP My APP

<content src="index.html" />

<plugin name="cordova-plugin-splashscreen" spec="4.0.0" />
<plugin name="cordova-plugin-network-information" spec="1.3.0" />
<plugin name="cordova-plugin-dialogs" spec="1.3.0" />
<plugin name="cordova-plugin-device" spec="1.1.3" />
<plugin name="cordova-plugin-statusbar" spec="2.2.0" />
<plugin name="cordova-plugin-whitelist" spec="1" />

<preference name="DisallowOverscroll" value="true" />
<preference name="SplashScreenDelay" value="5000" />
<preference name="StatusBarOverlaysWebView" value="true" />
<preference name="backgroundColor" value="#c72678" />
<preference name="ShowSplashScreenSpinner" value="false"/>
<preference name="prerendered-icon" value="false" />
<preference name="orientation" value="portrait" />
<preference name="fullscreen" value="false" />
<preference name="target-device" value="universal" />
<preference name="deployment-target" value="6.1" />

<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
    <allow-intent href="market:*" />
    <splash src="images/splashscreen/android/800x1280.png" />
    <splash src="images/splashscreen/android/200x300.png"  platform="android" qualifier="ldpi" />
    <splash src="images/splashscreen/android/307x480.png"  platform="android" qualifier="mdpi" />
    <splash src="images/splashscreen/android/480x800.png"  platform="android" qualifier="hdpi" />
    <splash src="images/splashscreen/android/720x1280.png" platform="android" qualifier="xhdpi" />
    <splash src="images/splashscreen/android/720x1280.png" platform="android" qualifier="fr-xhdpi" />
    <icon src="images/icon.png" />
</platform>
<platform name="ios">
    <allow-intent href="itms:*" />
    <allow-intent href="itms-apps:*" />
</platform> 
<config-file platform="ios" target="*-Info.plist" parent="UIStatusBarHidden">
           <true/>
</config-file>
<config-file platform="ios" target="*-Info.plist" parent="UIViewControllerBasedStatusBarAppearance">
       <false/>
</config-file>

<!-- iPhone and iPod touch -->
<splash src="images/splashscreen/ios/320x480.png" platform="ios" width="320" height="480" />


<!-- iPhone 5 / iPod Touch (5th Generation) -->
<splash src="images/splashscreen/ios/640x1136.png" platform="ios" width="640" height="1136" />

<!-- iPhone 6 -->
<splash src="images/splashscreen/ios/750x1334.png" platform="ios" width="750" height="1334" />
<splash src="images/splashscreen/ios/1242x2208.png" platform="ios" width="1242" height="2208" />


<!-- iPad -->
<splash src="images/splashscreen/ios/768x1024.png" platform="ios" width="768" height="1024" />


<!-- Retina iPad -->
<splash src="images/splashscreen/ios/1536x2048.png" platform="ios" width="1536" height="2048" />


<!-- iPad -->
<icon src="images/icon_76x76.png" platform="ios" width="76" height="76" />




<!-- iPhone / iPod Touch -->
<icon src="images/icon_57x57.png" platform="ios" width="57" height="57" />


<!-- iPad -->
<icon src="images/icon_72x72.png" platform="ios" width="72" height="72" />

The icon images are there in specified folder.

Can anyone hep me in sorting out the issue? Thanks in advance

回答1:

You're probably missing the right icon size. Currently these are all the icons iOS requires.

<platform name="ios">
        <icon height="57" src="res/icons/icon-57.png" width="57" />
        <icon height="114" src="res/icons/icon-114.png" width="114" />
        <icon height="72" src="res/icons/icon-72.png" width="72" />
        <icon height="144" src="res/icons/icon-144.png" width="144" />
        <icon height="76" src="res/icons/icon-76.png" width="76" />
        <icon height="152" src="res/icons/icon-152.png" width="152" />
        <icon height="40" src="res/icons/icon-40.png" width="40" />
        <icon height="80" src="res/icons/icon-80.png" width="80" />
        <icon height="50" src="res/icons/icon-50.png" width="50" />
        <icon height="100" src="res/icons/icon-100.png" width="100" />
        <icon height="120" src="res/icons/icon-120.png" width="120" />
        <icon height="180" src="res/icons/icon-180.png" width="180" />
        <icon height="29" src="res/icons/icon-29.png" width="29" />
        <icon height="58" src="res/icons/icon-58.png" width="58" />
        <icon height="87" src="res/icons/icon-87.png" width="87" />
        <icon height="167" src="res/icons/icon-167.png" width="167" />
</platform>


回答2:

Yes. For cordova with iOS and change icon and splash image, the simplest way is:

  1. Having a 1024 icon for better quality Process for iOS all sizes with pgicons.abiro.com
  2. Get zip uncompressed and copy to the root directory of the project.
  3. Finally edit from root directory the config.xml and include or create the code generated by the web online.



回答3:

You can try the following scripts that auto-generate icons and splashscreens for Cordova using ImageMagick:

https://github.com/AlexDisler/cordova-icon

https://github.com/AlexDisler/cordova-splash