How to set the icon to appear on Spotlight for a Phonegap App?

Question

I am creating an application that is coded with HTML & Javascript and is built into iOS and Android apps through the Phonegap build web service.

When searching the app through Spotlight in iOS, it shows the default Phonegap icon instead of my app icon. I need for it to show my app icon.

I have created icons of different sizes and configured config.xml like so:

<icon src="res/logo.png"/>
<platform name="ios">
        <icon src="res/iOS/icons/Icon-App-20x20@1x.png" width="20" height="20"  />
        <icon src="res/iOS/icons/Icon-App-20x20@2x.png" width="40" height="40"   />
        <icon src="res/iOS/icons/Icon-App-20x20@3x.png" width="60" height="60"   />
        <icon src="res/iOS/icons/Icon-App-29x29@1x.png" width="29" height="29"   />
        <icon src="res/iOS/icons/Icon-App-29x29@2x.png" width="58" height="58"   />
        <icon src="res/iOS/icons/Icon-App-29x29@3x.png" width="87" height="87"   />
        <icon src="res/iOS/icons/Icon-App-40x40@1x.png" width="40" height="40"   />
        <icon src="res/iOS/icons/Icon-App-40x40@2x.png" width="80" height="80"   />
        <icon src="res/iOS/icons/Icon-App-40x40@3x.png" width="120" height="120"   />
        <icon src="res/iOS/icons/Icon-App-57x57@1x.png" width="57" height="57"   />
        <icon src="res/iOS/icons/Icon-App-57x57@2x.png" width="114" height="114"   />
        <icon src="res/iOS/icons/Icon-App-60x60@1x.png" width="60" height="60"   />
        <icon src="res/iOS/icons/Icon-App-60x60@2x.png" width="120" height="120" />
        <icon src="res/iOS/icons/Icon-App-60x60@3x.png" width="180" height="180" />
        <icon src="res/iOS/icons/Icon-App-72x72@1x.png" width="72" height="72"   />
        <icon src="res/iOS/icons/Icon-App-72x72@2x.png" width="144" height="144" />
        <icon src="res/iOS/icons/Icon-App-76x76@1x.png" width="76" height="76"   />
        <icon src="res/iOS/icons/Icon-App-76x76@2x.png" width="152" height="152" />
        <icon src="res/iOS/icons/Icon-App-76x76@3x.png" width="228" height="228" />
    </platform>
<icon src="icon.png" />

Then, I have put the corresponding files in the path in src.

Is there anything else I should do that I am missing?

I've edited the tool slightly as i was informed that it was creating one of the Android icons incorrectly. it should work fine. If my answer has answered your question please accept it. thanks — David Hope, May 23 '17 at 18:39

score 0 · Answer 1 · answered May 22 '17 at 14:44

I've created a simple to use tool that allows you to convert your PNG image into iOS and Android APP icons for Phonegap.

It covers all the different sizes and all you need to do is to upload a PNG file that is 1204x1204 pixels and get your icons in a matter few seconds.

This is the link to the tool:

https://vps267717.ovh.net/phonegap-assets/

As for your question, You need to use the following code in your config.xml:

<!-- iPhone and iPod touch -->
<splash src="Default.png" gap:platform="ios" width="320" height="480" />
<splash src="Default@2x.png" gap:platform="ios" width="640" height="960" />


<!-- iPhone 5 / iPod Touch (5th Generation) -->
<splash src="Default-568h@2x.png" gap:platform="ios" width="640" height="1136" />



<!-- iPhone 6 -->
<splash src="Default-667h@2x.png" gap:platform="ios" width="750" height="1334" />
<splash src="Default-Portrait-736h@3x.png" gap:platform="ios" width="1242" height="2208" />

<!-- iPad -->
<splash src="Default-Portrait.png" gap:platform="ios" width="768" height="1024" />
<splash src="Default-Landscape.png" gap:platform="ios" width="1024" height="768" />


<!-- Retina iPad -->
<splash src="Default-Portrait@2x.png" gap:platform="ios" width="1536" height="2048" />




<gap:plugin name="cordova-plugin-network-information" source="npm" /> 

<gap:plugin name="cordova-plugin-inappbrowser" source="npm" /> 

<icon src="icon.png" gap:role="default" />
<icon src="icons/ios/icon.png" />

<!-- iPhone 6 / 6+ -->
<icon src="icons/ios/icon-60@3x.png" gap:platform="ios" width="180" height="180" />

<!-- iPhone / iPod Touch  -->
<icon src="icons/ios/icon-60.png" gap:platform="ios" width="60" height="60" />
<icon src="icons/ios/icon-60@2x.png" gap:platform="ios" width="120" height="120" />

<!-- iPad -->
<icon src="icons/ios/icon-76.png" gap:platform="ios" width="76" height="76" />
<icon src="icons/ios/icon-76@2x.png" gap:platform="ios" width="152" height="152" />

<!-- Settings Icon -->
<icon src="icons/ios/icon-small.png" gap:platform="ios" width="29" height="29" />
<icon src="icons/ios/icon-small@2x.png" gap:platform="ios" width="58" height="58" />

<!-- Spotlight Icon -->
<icon src="icons/ios/icon-40.png" gap:platform="ios" width="40" height="40" />
<icon src="icons/ios/icon-40@2x.png" gap:platform="ios" width="80" height="80" />

<icon src="icons/ios/icon-40@3x.png" gap:platform="ios" width="120" height="120" />


<!-- iPhone / iPod Touch -->
<icon src="icons/ios/icon.png" gap:platform="ios" width="57" height="57" />
<icon src="icons/ios/icon@2x.png" gap:platform="ios" width="114" height="114" />

<!-- iPad -->
<icon src="icons/ios/icon-72.png" gap:platform="ios" width="72" height="72" />
<icon src="icons/ios/icon-72@2x.png" gap:platform="ios" width="144" height="144" />

<!-- iPhone Spotlight and Settings Icon -->
<icon src="icons/ios/icon-small.png" gap:platform="ios" width="29" height="29" />
<icon src="icons/ios/icon-small@2x.png" gap:platform="ios" width="58" height="58" />

<!-- iPad Spotlight and Settings Icon -->
<icon src="icons/ios/icon-50.png" gap:platform="ios" width="50" height="50" />
<icon src="icons/ios/icon-50@2x.png" gap:platform="ios" width="100" height="100" />



<!-- iPhone / iPod Touch -->
<icon src="icons/ios/icon.png" gap:platform="ios" width="57" height="57" />
<icon src="icons/ios/icon@2x.png" gap:platform="ios" width="114" height="114" />

<!-- iPhone Spotlight and Settings Icon -->
<icon src="icons/ios/icon-small.png" gap:platform="ios" width="29" height="29" />
<icon src="icons/ios/icon-small@2x.png" gap:platform="ios" width="58" height="58" />



<!-- Android Icon -->
<icon src="icons/android/icon.png" gap:platform="android" gap:role="default" />
<icon src="icons/android/ldpi.png" gap:platform="android" gap:qualifier="ldpi" />
<icon src="icons/android/mdpi.png" gap:platform="android" qualifier="mdpi" />
<icon src="icons/android/hdpi.png" gap:platform="android" qualifier="hdpi" />
<icon src="icons/android/xhdpi.png" gap:platform="android" qualifier="xhdpi" />
<icon src="icons/android/xxhdpi.png" gap:platform="android" qualifier="xxhdpi" />
<icon src="icons/android/xxxhdpi.png" gap:platform="android" qualifier="xxxhdpi" />

Make sure the path to the icons reflects to your icons and everything should work just fine.

How to set the icon to appear on Spotlight for a Phonegap App?

1 Answers1