Replacing the Cordova icon.png with app icon.png

1

So, I made some changes to an app I am working on and updated my config.xml with additional logos and screens, built the app successfully, well almost…my icon.png file is not being loaded/built with with the app; it’s defaulting to the cordova robot guy logo. my config.xml file is in the root of the project as its always been and the icons and screens are in the www/res/icons directory except for the logo.png which is in the /www directory. Here’s how I have the icons listed in my config file; any feedback on what I might be missing would be much appreciated. Thank you…

<icon src="www/img/icon.png" />
    <icon src="www/img/res/icons/ios/icon-57.png"            gap:platform="ios"        width="57" height="57" />
    <icon src="www/img/res/icons/ios/icon-57-2x.png"         gap:platform="ios"        width="114" height="114" />
    <icon src="www/img/res/icons/ios/icon-72.png"            gap:platform="ios"        width="72" height="72" />
    <icon src="www/img/res/icons/ios/icon-72-2x.png"         gap:platform="ios"        width="144" height="144" />
    <icon src="www/img/res/icons/android/icon-36-ldpi.png"   gap:platform="android"    gap:qualifier="ldpi" />
    <icon src="www/img/res/icons/android/icon-48-mdpi.png"   gap:platform="android"    gap:qualifier="mdpi" />
    <icon src="www/img/res/icons/android/icon-72-hdpi.png"   gap:platform="android"    gap:qualifier="hdpi" />
    <icon src="www/img/res/icons/android/icon-96-xhdpi.png"  gap:platform="android"    gap:qualifier="xhdpi" />
    <gap:splash gap:platform="android" gap:qualifier="port-ldpi" src="www/img/res/screen/android/screen-ldpi-portrait.png" />
    <gap:splash gap:platform="android" gap:qualifier="port-mdpi" src="www/img/res/screen/android/screen-mdpi-portrait.png" />
    <gap:splash gap:platform="android" gap:qualifier="port-hdpi" src="www/img/res/screen/android/screen-hdpi-portrait.png" />
    <gap:splash gap:platform="android" gap:qualifier="port-xhdpi" src="www/img/res/screen/android/screen-xhdpi-portrait.png" />
    <gap:splash gap:platform="android" gap:qualifier="port-ldpi" src="www/img/res/screen/android/screen-ldpi-landscape.png" />
    <gap:splash gap:platform="android" gap:qualifier="port-mdpi" src="www/img/res/screen/android/screen-mdpi-landscape.png" />
    <gap:splash gap:platform="android" gap:qualifier="port-hdpi" src="www/img/res/screen/android/screen-hdpi-landscape.png" />
    <gap:splash gap:platform="android" gap:qualifier="port-xhdpi" src="www/img/res/screen/android/screen-xhdpi-landscape.png" />
    <gap:splash gap:platform="ios" height="480" src="www/img/res/screen/ios/screen-iphone-portrait.png" width="320" />
    <gap:splash gap:platform="ios" height="960" src="www/img/res/screen/ios/screen-iphone-portrait-2x.png" width="640" />
    <gap:splash gap:platform="ios" height="1136" src="www/img/res/screen/ios/screen-iphone-portrait-568h-2x.png" width="640" />
    <gap:splash gap:platform="ios" height="1024" src="www/img/res/screen/ios/screen-ipad-portrait.png" width="768" />
    <gap:splash gap:platform="ios" height="768" src="www/img/res/screen/ios/screen-ipad-landscape.png" width="1024" />
2

try to remove the platforms then add them again and see if that solves the problems

cordova platform rm android ios
cordova platform add android ios

My config.xml is not that much code. All I do is this

<icon src="www/img/res/appIcon.png" />
2 Likes
3

@meiding Thank you for the suggestion but that didn’t work. I decide to search the folder of my project for icon.png because as you know, when you run a build, it creates /res/drawable-* directories and renames each icon size to icon.png and places them in their own directory. Now for some reason, when I ran a build it would move my icons to /platforms/android/res/drawable-* and /platforms/android/ant-build/res/drawable-* - so when I did a search of my entire project for icon.png, I notice a hand-full of the cordova icon’s still lingering around. Deleting them fixed my issue immediately. It would be nice that if this post makes any sense and someone in the community understands whats going on that I can get a suggested fix, but if not, searching and deleting added like a minute to my workflow, so not a huge deal.

Thank you for taking the time to respond. Have a great weekend.

1 Like
4

hi rooster
the solution you gave was awesome which helped me to solve my problem very easily
i almost gave up because i could not figure out what mistake i was making but your solution is the most perfect one…
Thanks alot… =)

5

you should ook at the new ionic cli which has ionic resources which makes the icons and splashscreens for your app from a psd file this is documentation from the ionic cli github

Icon and Splash Screen Image Generation

Automatically generate icons and splash screens from source images to create each size needed for each platform, in addition to copying each resized and cropped image into each platform’s resources directory. Source images can either be a png, psd Photoshop or ai Illustrator file. Images are generated using Ionic’s image resizing and cropping server, instead of requiring special libraries and plugins to be installed locally.

Since each platform has different image requirements, it’s best to make a source image for the largest size needed, and let the CLI do all the resizing, cropping and copying for you. Newly generated images will be placed in the resources directory at the root of the Cordova project. Additionally, the CLI will update and add the correct configs to the project’s config.xml file.

During the build process, Cordova (v3.6 or later) will look through the project’s config.xml file and copy the newly created resource images to the platform’s specific resource folder. For example, Android’s resource folder can be found in platforms/android/res, and iOS uses platforms/ios/APP_NAME/Resources.

Icon Source Image

Save an icon.png, icon.psd or icon.ai file within the resources directory at the root of the Cordova project. The icon image’s minimum dimensions should be 192x192 px, and should have no rounded corners. Note that each platform will apply it’s own mask and effects to the icons. For example, iOS will automatically apply it’s custom rounded corners, so the source file should not already come with rounded corners. This Photoshop icon template provides the recommended size and guidelines of the artwork’s safe zone.

$ ionic resources --icon
Photoshop Icon Template
Splash Screen Source Image

Save a splash.png, splash.psd or splash.ai file within the resources directory at the root of the Cordova project. Splash screen dimensions vary for each platform, device and orientation, so a square source image is required the generate each of various sizes. The source image’s minimum dimensions should be 2208x2208 px, and its artwork should be centered within the square, knowning that each generated image will be center cropped into landscape and portait images. The splash screen’s artwork should roughly fit within a center square (1200x1200 px). This Photoshop splash screen template provides the recommended size and guidelines of the artwork’s safe zone.

$ ionic resources --splash
Photoshop Splash Screen Template
Generating Icons and Splash Screens

To generate both icons and splash screens, follow the instructions above and run:

$ ionic resources
Platform Specific Resource Images

One source image can be used to generate images for each platform by placing the file within the resources directory, such as resources/icon.png. To use different source images for individual platforms, place the source image in the respective platform’s directory. For example, to use a different icon for Android, it should follow this path: resources/android/icon.png, and a different image for iOS would use this path: resources/ios/icon.png.

1 Like
6

How to Add Icons to Your Ionic Framework Apps

7

Add Icons to Your Ionic Framework Apps

8

For some reasons, none of the previously mentioned solutions work for me. There is a difference though. When I emulate (and the emulator wants to work…), the app actually appears with my app icon but it appears with cordova icon when on mobile.

Any idea? Some sort of cache?

9

I have only an issue on iPhone 6+ which is iOS 9.3.

tested with other iPhones.
iPhone 5c (iOS 8.x) works
iPhone 5c (iOS 9.3) works.
iPhone 6+ (iOS 9.3) does not working. it shows cordova robot image.

I don’t know where to start looking for.

Thanks