Names, Versioning, and Icons

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

This is based on the widely accepted http://semver.org/ versioning:

1. MAJOR version when you make incompatible API changes,
2. MINOR version when you add functionality in a backwards-compatible manner, and
3. PATCH version when you make backwards-compatible bug fixes.

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 (please see the note below regarding iOS limitations), 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.

Android:

To add Android specific icon sizes, 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 example above assumes you have created multiple icon sizes, as shown, and copied them into a folder named "res/android/".

The sizes of each icon are:

ldpi : 36x36 px
mdpi : 48x48 px
hdpi : 72x72 px
xhdpi : 96x96 px
xxhdpi : 144x144 px
xxxhdpi : 192x192 px

iOS:

To add iOS specific icon sizes, add the following code into the <platform name="ios"> section:

    <platform name="ios">
        <icon src="res/ios/icon-60@3x.png" width="180" height="180" />
        <icon src="res/ios/icon-60.png" width="60" height="60" />
        <icon src="res/ios/icon-60@2x.png" width="120" height="120" />
        <icon src="res/ios/icon-76.png" width="76" height="76" />
        <icon src="res/ios/icon-76@2x.png" width="152" height="152" />
        <icon src="res/ios/icon-40.png" width="40" height="40" />
        <icon src="res/ios/icon-40@2x.png" width="80" height="80" />
        <icon src="res/ios/icon.png" width="57" height="57" />
        <icon src="res/ios/icon@2x.png" width="114" height="114" />
        <icon src="res/ios/icon-72.png" width="72" height="72" />
        <icon src="res/ios/icon-72@2x.png" width="144" height="144" />
        <icon src="res/ios/icon-small.png" width="29" height="29" />
        <icon src="res/ios/icon-small@2x.png" width="58" height="58" />
        <icon src="res/ios/icon-50.png" width="50" height="50" />
        <icon src="res/ios/icon-50@2x.png" width="100" height="100" />
    </platform>

The example above assumes you have created multiple icon sizes, as shown, and copied them into a folder named "res/ios/"

The sizes of each icon are:

You can read more about the use of each icon size on Apple's website:

https://developer.apple.com/ios/human-interface-guidelines/graphics/app-icon/

Next Step

Building for Android