I have a freshly created Cordova project with the following config.xml setup (used the instructions from http://docs.phonegap.com/en/edge/config_ref_images.md.html). I also added 2 platforms (iOS and Android).
When I run either cordova run ios or cordova run android, the project still has the default Cordova icons. My understanding from the documentation is that Corodva is supposed to create the icons automatically based in the icon.png I supplied in the config.xml.
config.xml:
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.testapp" version="1.1.2" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>SingleApp</name>
<preference name="DisallowOverscroll" value="true" />
<preference name="AutoHideSplashScreen" value="false" />
<preference name="Orientation" value="portrait" />
<preference name="Fullscreen" value="false" />
<preference name="target-device" value="handset" />
<description>
A sample Apache Cordova application that responds to the deviceready event.
</description>
<author email="dev#cordova.apache.org" href="http://cordova.io">
Apache Cordova Team
</author>
<content src="index.html" />
<access origin="*" />
<icon src="icon.png" />
</widget>
I wrote a script that auto generates icons for cordova using ImageMagick:
https://github.com/AlexDisler/cordova-icon
To use it, create an "icon.png" file and place it in the root folder of your project, then run:
cordova-icon
and it will generate all the required icons for the platforms your project has.
You can also configure it as a hook in your cordova project so the icons will be generated every time you build the project based on the icon.png you've added. (instructions in the readme).
If you are using cordova 3.5.0 they have updated the docs. In older versions i've always had to replace the icons manually in the project but the latest version of cordova is working fine.
http://cordova.apache.org/docs/en/3.5.0/config_ref_images.md.html#Icons%20and%20Splash%20Screens
As you can see here https://github.com/phonegap/phonegap-cli/issues/58 it's been a common problem. So if you are using an older version of cordova i recommend to update it with the command npm update -g cordova
And after that you should update your config.xml to something like this:
<icon src="www/res/drawable-xxxhdpi/icon.png" />
<platform name="android">
<icon src="www/res/drawable-ldpi/icon.png" density="ldpi" />
<icon src="www/res/drawable-mdpi/icon.png" density="mdpi" />
<icon src="www/res/drawable-hdpi/icon.png" density="hdpi" />
<icon src="www/res/drawable-xhdpi/icon.png" density="xhdpi" />
</platform>
<platform name="ios">
<!-- iOS 7.0+ -->
<!-- iPhone / iPod Touch -->
<icon src="www/res/ios/icon-60.png" width="60" height="60" />
<icon src="www/res/ios/icon-60#2x.png" width="120" height="120" />
<!-- iPad -->
<icon src="www/res/ios/icon-76.png" width="76" height="76" />
<icon src="www/res/ios/icon-76#2x.png" width="152" height="152" />
<!-- iOS 6.1 -->
<!-- Spotlight Icon -->
<icon src="www/res/ios/icon-40.png" width="40" height="40" />
<icon src="www/res/ios/icon-40#2x.png" width="80" height="80" />
<!-- iPhone / iPod Touch -->
<icon src="www/res/ios/icon.png" width="57" height="57" />
<icon src="www/res/ios/icon#2x.png" width="114" height="114" />
<!-- iPad -->
<icon src="www/res/ios/icon-72.png" width="72" height="72" />
<icon src="www/res/ios/icon-72#2x.png" width="144" height="144" />
<!-- iPhone Spotlight and Settings Icon -->
<icon src="www/res/ios/icon-small.png" width="29" height="29" />
<icon src="www/res/ios/icon-small#2x.png" width="58" height="58" />
<!-- iPad Spotlight and Settings Icon -->
<icon src="www/res/ios/icon-50.png" width="50" height="50" />
<icon src="www/res/ios/icon-50#2x.png" width="100" height="100" />
</platform>
As you can see the URIs are relative to the cordova project's path, not to the www folder.
The config.xml settings for icons only works with the PhoneGap Build service. After adding both of your platforms you need to manually (or you can create a hook, but I haven't done that myself) place your icons in the correct paths.
For iOS:
PROJECT_PATH/platforms/ios/PROJECT_NAME/Resources/icons
For Android:
PROJECT_PATH/platforms/android/res/drawable
Android has many res/drawable-* folders, use as applies to your app but at minimum add to res/drawable
Then run cordova prepare or build or run
If you are willing to install extra software for icon generation you can use Ionic which has such function.
Do the following:
npm install ionic -g
Put png, psd or .ai files for icons and/or splashscreens to ${project_location}/resources
ionic resources
If you want to generate icons only there is a handy key for that:
ionic resources --icon
More details here
Don't you need to specify the folder that has the icon on it? Cordova replaces the icon with the default one when it is not found.
Have you tried to replace with something like:
<icon src="res/icon.png" />
npm install -g cordova-res
then cordova-res
also supports adaptive icons for android
Try following https://www.npmjs.org/package/cordova-gen-icon
Example:
$ cordova create hello com.example.hello
Creating a new cordova project with name "HelloCordova" and id "com.example.hello" at location "hello"
$ cd hello
$ cordova platform add ios
Creating ios project...
Preparing ios project
$ cordova-gen-icon
Generate cordova icons with
project: .
icon : ./www/img/logo.png
target :
generate iOS icons
Success generate icon set
A little explication for people who say <icon src="res/icon.png" /> Not work !
You must put icon.png in both this folders
project_name/res/
and
project_name/platforms/platform_name/res/
Steps:
cordova create hello com.example.hello HelloWorld
cd hello
Copy your icon.png to project_name/res/
Open config.xml and put <icon src="res/icon.png" />
After that run
cordova platform add android
Now copy your icon.png to ... hello/platforms/android/res/
then
cordova build android
and finally
adb install platforms/android/build/outputs/apk/android-debug.apk
After that you can see on device your app with your icon
Please upload your icon here: https://pgicons.abiro.com/
You can easily get all things from one station, like Icons(All Platforms), Splash Screens(All Platforms), config.xml (with generated icon name and path).
You just need to replace the res folder and update config.xml, nothing else.
Related
Trying to get adaptive icons working in a Cordova app (described here in the docs), but when I try to run cordova run android, the app never runs and the CLI just outputs this
Android Studio project detected
The "path" argument must be of type string
This is how I have the icon defined in config.xml
<platform name="android">
<resource-file src="res/colors.xml" target="/app/src/main/res/values/colors.xml" />
<icon background="#color/background" density="hdpi" foreground="res/icon.png" />
<allow-intent href="market:*" />
</platform>
And here is the contents of colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="background">#191919</color>
</resources>
I know the issue has to do with the icon config because it only happens when I use foreground instead of src. This config works fine (but the icon isn't adaptive and has the default background color).
<platform name="android">
<resource-file src="res/colors.xml" target="/app/src/main/res/values/colors.xml" />
<icon background="#color/background" density="hdpi" src="res/icon.png" />
<allow-intent href="market:*" />
</platform>
Here are my relevant versions.
node 9.11.2
npm 5.6.0
cordova 8.1.2 (cordova-lib#8.1.1)
cordova-android 7.1.1
Adaptive icons are only supported since cordova-android 8.0.0. See here.
I'm trying to change the default Cordova app icon for both ios and android using config.xml, but the build is using the Cordova logo as an icon and splash screen.
I don't have the Cordova iOS platform installed because I'm using PhoneGap build.
Here's the icon tag in config.xml
<icon src="res/icon.png" />
I put the icon inside www/res/icon.png
Is this a correct path?
The path should point to res/android/<DENSITY_TYPE>
Here is example from DOCs:
<platform name="android">
<icon src="res/android/ldpi.png" density="ldpi" />
<icon src="res/android/mdpi.png" density="mdpi" />
<icon src="res/android/hdpi.png" density="hdpi" />
<icon src="res/android/xhdpi.png" density="xhdpi" />
</platform>
The res folder should lay under your root project, not under www
My app keeps using the default cordova icon and splash screen. Upon digging, what should happen is all of my icon/splash get copies to platforms/android/res/. When I look in there, it's just the default cordova ones. However, in my resources/android/ all of my custom ones are there.
Working fine for iOS, not fine for Android at. I am running Cordova CLI 6.4.0.
I have all the custom icons and splash images setup in correct directory structure, and receive no errors during platform add or build android
Below is my config.xml
<platform name="android">
<allow-intent href="market:*" />
<icon platform="android" src="resources/icon.png" />
<icon platform="android" qualifier="ldpi" src="resources/icons/android/icon-36-ldpi.png" />
<icon platform="android" qualifier="mdpi" src="resources/icons/android/icon-48-mdpi.png" />
<icon platform="android" qualifier="hdpi" src="resources/icons/android/icon-72-hdpi.png" />
<icon platform="android" qualifier="xhdpi" src="resources/icons/android/icon-96-xhdpi.png" />
<icon platform="android" qualifier="xxhdpi" src="resources/icons/android/icon-144-xxhdpi.png" />
<icon platform="android" qualifier="xxxhdpi" src="resources/icons/android/icon-192-xxxhdpi.png" />
<splash platform="android" src="resources/splash.png" />
<splash platform="android" qualifier="ldpi" src="resources/screens/android/screen-ldpi-portrait.png" />
<splash platform="android" qualifier="mdpi" src="resources/screens/android/screen-mdpi-portrait.png" />
<splash platform="android" qualifier="hdpi" src="resources/screens/android/screen-hdpi-portrait.png" />
<splash platform="android" qualifier="xhdpi" src="resources/screens/android/screen-xhdpi-portrait.png" />
</platform>
<preference name="SplashScreen" value="screen"/>
<preference name="SplashScreenDelay" value="2000" />
<preference name="FadeSplashScreen" value="false" />
<preference name="FadeSplashScreenDuration" value="0" />
<preference name="SplashScreenBackgroundColor" value="0xFFFFFFFF" />
Same exact exact setup for iOS, and works perfectly there
I've triple checked the paths and everything is correct, and my custom icons are indeed in the indicated locations, but simply not copied over during build
I've tried several times to remove and add android platform, then build, same with cordova-plugin-splashscreen
Both the icon and the splash screen are not working on Android
And here's a screencap showing the folder layout, and the unfortunately incorrect images.
Update made some progress but not quite there. I replaced "qualifier" with "density" in my config.xml. Now what it does it create a correct looking "res" folder, but it puts it in the root of my project instead of platforms/android. It also creates platforms/android/res but all of the images in there are the default Cordova ones. If I move the new folder /res (my custom icons) into /platforms/android (default cordova icons) before build then the app shows my correct stuff. I guess it's a working workaround but an annoying one... and to note; I delete the /res folder but cordova platform add android builds it, just seems to create it in the wrong directory.
This is an issue in cordova-android solved in the version 6.1.0.
The recommended steps are:
cordova platform update android#6.1.0 --save
cordova platform rm android
cordova platform add android
Source: https://github.com/apache/cordova-android/pull/343
I have the same problem, If you find a solution tell me please :)
EDIT
I Solved updgrading my version of android
cordova platform update android#6.1.0
I had this problem some time before and I, and found two ways to pass over.
Upgrade Cordova Platform: This is the recomended, I believe that you upgrade to Cordova 6.4.x but not your Platform, please try: cordova platform update android#latest
OR
Downgrade Cordova CLI: Sometimes, the prev step does not work, so you have to do something that is disrecomended, downgrade cordova to work npm install -g cordova#6.3.1 (Note => CLI 6.3.1 is just the version I believe could work)
I've followed tutorials and solutions to Phonegap icon issues here on SO. From what I'm reading it looks like, if I'm building locally, I need to replace the PG icons in platforms/android/res/drawable (there are 3 diff folders in drawable that contain the icon) with my own. That is what I am doing. Here's where it gets weird. I replace these icons with my own (different icon, same name), then go to Terminal and do phonegap build android, and then if I navigate back to the drawables folders I see that my new icons have been replaced yet again with the default Phonegap robot icons. What am I missing?
Yes, the problem is that the platform folders are rebuilt every time you do a build or run from the PhoneGap CLI so you don't want to replace them in there manually. Instead you should keep them in a folder somewhere in the root of your project (named whatever you'd like), then refer to their paths in the config.xml file for the given platform. The PhoneGap CLI will will copy them down to the platform level for you automatically when you do a build, run etc. For Android it will copy them down to the platforms/android/res/drawable* folders specifically based on their density (ldpi etc). You just need to make sure you specify the right density attributes in the config.xml (or width/height for iOS) to match the correct paths in your root project where those can be found.
For instance, in the config.xml you may have the following for Android icons:
<platform name="android">
<icon density="ldpi" src="resources/android/ldpi-icon.png" />
<icon density="mdpi" src="resources/android/mdpi-icon.png" />
<icon density="hdpi" src="resources/android/hdpi-icon.png" />
<icon density="xhdpi" src="resources/android/xhdpi-icon.png" />
<icon density="xxhdpi" src="resources/android/xxhdpi-icon.png" />
<icon density="xxxhdpi" src="resources/android/xxxhdpi-icon.png" />
</platform>
Where resources is located in the root of your project at the same level as the www folder (ie: myProj/resources).
You can find more details about this in the Cordova docs for more details on configuring your icons.
If for some reason it doesn't work, check to make sure you have a recent version of the PhoneGap CLI or update to the latest.
~Holly
You have to add the icon configuration in you config.xml file inside your www root folder. Try adding something like this:
<platform name="android">
<icon src="res/android/ldpi.png" density="ldpi" />
<icon src="res/android/mdpi.png" density="mdpi" />
<icon src="res/android/hdpi.png" density="hdpi" />
<icon src="res/android/xhdpi.png" density="xhdpi" />
</platform>
The create these folders containing your icons and execute phonegap build android.
The answer was in fact to use this code block in config.xml at the root level (same level as www directory):
<icon src="www/res/icon/android/ldpi.png" platform="android" density="ldpi" />
<icon src="www/res/icon/android/mdpi.png" platform="android" density="mdpi" />
<icon src="www/res/icon/android/hdpi.png" platform="android" density="hdpi" />
<icon src="www/res/icon/android/xhdpi.png" platform="android" density="xhdpi" />
<icon src="www/res/icon/android/xxhdpi.png" platform="android" density="xxhdpi" />
<icon src="www/res/icon/android/xxxhdpi.png" platform="android" density="xxxhdpi"/>
Making sure, obviously, that those paths lead to your icons.
I have created an application for upload in with phonegap 3.5.0. I used the "Icons and Splash Screens" guide to create application icons, and they show up when running through debugging in the AVD and my phone. When I create the APK for upload to Google Play, however, I am prompted with "Upload failed
You need to add an icon to your APK."
What do I need to change the manifest file to in order for the be able to upload? Or is the error somewhere else? Thanks in advance for your help.
In your config.xml file > add your icons
Make sure that you placed the icon image in the folder res/android/
<platform name="android">
<icon src="res/android/ldpi.png" density="ldpi" />
<icon src="res/android/mdpi.png" density="mdpi" />
<icon src="res/android/hdpi.png" density="hdpi" />
<icon src="res/android/xhdpi.png" density="xhdpi" />
</platform>
for more information http://docs.phonegap.com/en/3.5.0/config_ref_images.md.html