When building your app, to offer a quality app experience you will need to consider app icons, the display name of your app, and version numbers.
These are all handled in the config.xml file that you'll find in your project root.
App Name and Description
Your app name is originally set when you first created your Cordova app. If you'd like to update it, you can do so through the config.xml file:
<name>myCordovaAppName</name>
<description>
This is my shiny new hybrid app.
</description>
<author email="myteam@example.com" href="http://blinkmobile.com.au">
BlinkMobile Development Team
</author>
name:
This is the name of your app, and will be used for display purposes on your user's device.
description:
This description may be used in some app stores.
author:
- email: your email address, which may be displayed by some app stores
- href: a link to your website, which may be displayed by some app stores
- author tag: contains a description of the developer / publisher, which may be displayed by some app stores
App Versioning
The version of your app is very important, as this will allow you to release new versions of the app, and have the user download and install them without issues. If you create a new version of an app, using the same app version number, most devices will block the installation, assuming that nothing has changed.
To change the version of your app, you can modify the version number in your widget tag:
<widget id="io.blinkm.myapp" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
The version number above can be incremented for each change, such as version="1.0.1" for a patch.
The versioning method is up to you, however a common method is: major.minor.patch
Patch version changes are often done for quick or very contained fixes.
Minor versions are changed for larger bodies of work, which shouldn't affect the user experience.
Major version changes usually reflect either large changes, including new direction or "breaking" changed where you may have removed functionality or fundamentally changed functionality.
App Icons
To add a custom icon to your project, you'll need to add the icon tags into your config.xml file. Your icon files need to be in a folder in your project root. It doesn't matter what the folder is named, as you'll be setting the path in your config.xml, however "res" is a commonly used folder name for icons.
You can either use a single icon for all platforms and resolutions, or you can use specific icon sizes for a better result.
Single Icon:
You can set a single icon that will be used for all platforms, and all display resolutions simply by using the "icon" tag:
<icon src="res/icon.png" />
Simply copy and paste this line into your XML document. It doesn't matter where, as long as it is in the "widget" level. Keep in mind, however, that this won't offer the optimum resolutions for devices, and so on some devices the icon may look fuzzy.
Specific Icon Sizes:
To better control the look of your icons, and to ensure they don't need to be resized depending on platform and device resolution, you can set multiple icon sizes.
To do this, add the following code into the <platform name="android"> section:
<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" />
<icon src="res/android/xxhdpi.png" density="xxhdpi" />
<icon src="res/android/xxxhdpi.png" density="xxxhdpi" />
</platform>
The sizes of each icon are:
ldpi : 36x36 px
mdpi : 48x48 px
hdpi : 72x72 px
xhdpi : 96x96 px
xxhdpi : 144x144 px
xxxhdpi : 192x192 px
The example above assumes you have created multiple icon sizes, as shown, and copied them into a folder named "res/android/".