App Icons

I’m currently in the process of updating several iOS apps. I keep most of the custom code on the javascript side, so the native app should just be a simple wrapper and be very easily updated. Unfortunately I find myself spending far too much time getting the details of the wrapper right. Some automation is definitely needed, and this is the first part of it.

This script takes an html version of the app icon and splash screen, and creates a full set of the images needed for the App Store.

It uses PhantomJS, a scriptable headless WebKit browser, to render the images, so the result should be very similar to what you see if you open the html file on the target device.

var fs = require("fs");
var system = require('system');

var page = require("webpage").create();

var destinationFolder = system.args[1];
var iconSource = system.args[2];
var splashSource = system.args[3];

function generate(url, w, h, fn, callback) {

    page.viewportSize = {
        width: w,
        height: h
    };

    page.open(url, function() {
        page.render(destinationFolder + "/" + fn);
        callback();
    });


};

generate(iconSource, 1024, 1024, "icon-1024.png", function() {
    generate(iconSource, 144, 144, "icon-72@2x.png", function() {
        generate(iconSource, 72, 72, "icon-72.png", function() {
            generate(iconSource, 114, 114, "icon@2x.png", function() {
                generate(iconSource, 57, 57, "icon.png", function() {
                    generate(splashSource, 640, 1136, "Default-568h@2x~iphone.png", function() {
                        generate(splashSource, 2048, 1496, "Default-Landscape@2x~ipad.png", function() {
                            generate(splashSource, 1024, 748, "Default-Landscape~ipad.png", function() {
                                generate(splashSource, 1536, 2008, "Default-Portrait@2x~ipad.png", function() {
                                    generate(splashSource, 768, 1004, "Default-Portrait~ipad.png", function() {
                                        generate(splashSource, 640, 960, "Default@2x~iphone.png", function() {
                                            generate(splashSource, 320, 480, "Default~iphone.png", function() {
                                                phantom.exit();
                                            });
                                        });
                                    });
                                });
                            });
                        });
                    });
                });
            });
        });
    });
});

Run it with

phantomjs generateicons.js <output folder> <icon source> <splash source>

I have been using html to create splash screens for a while - it is the easiest way to produce something that shares background elements, fonts, etc. with the first page of the app. Use standard media queries to adjust positioning for each output size.

Html is not as well suited for the icons, but phantomjs can also open svg, and you can always use a simple html file with a high res image background.