Mobile Res Generator

config.xml

    <!-- If you use PhoneGap or PhoneGap build you may want to add the following lines to config.xml -->
    <icon src="icon.png" />
    <icon gap:platform="android" gap:qualifier="ldpi" src="res/icon/android/icon-36-ldpi.png" />
    <icon gap:platform="android" gap:qualifier="mdpi" src="res/icon/android/icon-48-mdpi.png" />
    <icon gap:platform="android" gap:qualifier="hdpi" src="res/icon/android/icon-72-hdpi.png" />
    <icon gap:platform="android" gap:qualifier="xhdpi" src="res/icon/android/icon-96-xhdpi.png" />
    <icon gap:platform="blackberry" src="res/icon/blackberry/icon-80.png" />
    <icon gap:platform="blackberry" gap:state="hover" src="res/icon/blackberry/icon-80.png" />
    <icon gap:platform="ios" height="57" src="res/icon/ios/icon-57.png" width="57" />
    <icon gap:platform="ios" height="72" src="res/icon/ios/icon-72.png" width="72" />
    <icon gap:platform="ios" height="114" src="res/icon/ios/icon-57-2x.png" width="114" />
    <icon gap:platform="ios" height="144" src="res/icon/ios/icon-72-2x.png" width="144" />
    <icon gap:platform="webos" src="res/icon/webos/icon-64.png" />
    <icon gap:platform="winphone" src="res/icon/windows-phone/icon-48.png" />
    <icon gap:platform="winphone" gap:role="background" src="res/icon/windows-phone/icon-173.png" />
    <gap:splash gap:platform="android" gap:qualifier="port-ldpi" src="res/screen/android/screen-ldpi-portrait.png" />
    <gap:splash gap:platform="android" gap:qualifier="port-mdpi" src="res/screen/android/screen-mdpi-portrait.png" />
    <gap:splash gap:platform="android" gap:qualifier="port-hdpi" src="res/screen/android/screen-hdpi-portrait.png" />
    <gap:splash gap:platform="android" gap:qualifier="port-xhdpi" src="res/screen/android/screen-xhdpi-portrait.png" />
    <gap:splash gap:platform="blackberry" src="res/screen/blackberry/screen-225.png" />
    <gap:splash gap:platform="ios" height="480" src="res/screen/ios/screen-iphone-portrait.png" width="320" />
    <gap:splash gap:platform="ios" height="960" src="res/screen/ios/screen-iphone-portrait-2x.png" width="640" />
    <gap:splash gap:platform="ios" height="1136" src="res/screen/ios/screen-iphone-portrait-568h-2x.png" width="640" />
    <gap:splash gap:platform="ios" height="1024" src="res/screen/ios/screen-ipad-portrait.png" width="768" />
    <gap:splash gap:platform="ios" height="768" src="res/screen/ios/screen-ipad-landscape.png" width="1024" />
    <gap:splash gap:platform="winphone" src="res/screen/windows-phone/screen-portrait.jpg" />

icon_formats

icon.png	128
res/icon/android/icon-36-ldpi.png	36
res/icon/android/icon-48-mdpi.png	48
res/icon/android/icon-72-hdpi.png	72
res/icon/android/icon-96-xhdpi.png	96
res/icon/blackberry/icon-80.png	80
res/icon/blackberry/icon-80.png	80
res/icon/ios/icon-57.png	57
res/icon/ios/icon-72.png	72
res/icon/ios/icon-57-2x.png	114
res/icon/ios/icon-72-2x.png	144
res/icon/webos/icon-64.png	64
res/icon/windows-phone/icon-48.png	48
res/icon/windows-phone/icon-173.png	173

Mobile Res Generator

These shell scripts automatically generate PNG icons and splash screens (launch images) at different sizes and resolutions given a default icon and splash screen in Inkscape SVG format.

PREREQUISITES
Make sure that you have Inkscape installed. Running the following command you should see the path to the executable:

> which inkscape
/usr/bin/inkscape

CONFIGURATION
You can specify the input icon and splash screen (and some other options) in the configuration at the top of each shell script.

You can choose the output formats by editing icon_formats and splash_formats. In these files the columns (output file name, output width, output height) are separated using tabs.

USE
Generate all the icons/splash screens described in icon_formats/splash_formats running mobile_icon_generator.sh or mobile_splash_generator.sh

mobile_icon_generator.sh

#!/bin/sh

# The icon in input (in SVG format)
export src_icon_svg=icon.svg

cat icon_formats | while read icon; do
	file_name=$(echo "$icon" | cut -f1)
	width_and_height=$(echo "$icon" | cut -f2)
	mkdir -p $(dirname $file_name)
	inkscape $src_icon_svg --export-png=$file_name -w$width_and_height
done

mobile_splash_generator.sh

#!/bin/sh

# The launch image in input (in SVG format)
export src_splash_svg=splash.svg
export src_splash_width=320
export src_splash_height=320

cat splash_formats | while read splash; do
	file_name=$(echo "$splash" | cut -f1)
	width=$(echo "$splash" | cut -f2)
	height=$(echo "$splash" | cut -f3)
	half_width=$(expr $width / 2)
	half_height=$(expr $height / 2)
	src_half_width=$(expr $src_splash_width / 2)
	src_half_height=$(expr $src_splash_height / 2)
	x0=$(expr $src_half_width - $half_width)
	y0=$(expr $src_half_height - $half_height)
	x1=$(expr $src_half_width + $half_width)
	y1=$(expr $src_half_height + $half_height)
	mkdir -p $(dirname $file_name)
	inkscape $src_splash_svg --export-png=$file_name --export-area=$x0:$y0:$x1:$y1 -w$width -h$height
done

splash_formats

res/screen/android/screen-ldpi-portrait.png	200	320
res/screen/android/screen-mdpi-portrait.png	320	480
res/screen/android/screen-hdpi-portrait.png	480	800
res/screen/android/screen-xhdpi-portrait.png	720	1280
res/screen/blackberry/screen-225.png	225	225
res/screen/ios/screen-iphone-portrait.png	320	480
res/screen/ios/screen-iphone-portrait-2x.png	640	960
res/screen/ios/screen-iphone-portrait-568h-2x.png	640	1136
res/screen/ios/screen-ipad-portrait.png	768	1024
res/screen/ios/screen-ipad-landscape.png	1024	768
res/screen/windows-phone/screen-portrait.jpg	480	800