The Custom Icon and Image Creation Guidelines for iOS applications recommend different web clip and application icon sizes for phones and tablets. Sencha Touch provides a means to define these icons in the Application Class. The icons will be shown on the home screen for iPhone and iPad applications.
These are the web clip and Application icon sizes, as recommended by the guidelines:
- Size for iPhone and iPod touch (in pixels): 57 x 57
- Size for high-resolution iPhone and iPod touch (in pixels): 114 x 114
- Size for iPad (in pixels): 72 x 72
- Size for high-resolution iPad (in pixels): 144 x 144
In Sencha Touch, we define the app’s icons with the help of three configuration options of the Application Class – icon, phoneIcon, and tabletIcon.
Defining Sencha Touch Application Icons Using The icon, phoneIcon, and tabletIcon Configs
The icon config has two modes of operation. The first mode accepts a string with the path to a single icon, which will be used regardless of the iOS device where the application is installed. Here’s an example:
Ext.application({ name: "IconsSample", views: ["MainPanel"], icon: "img/app-icon.png", launch: function () { var mainPnl = Ext.create("IconsSample.view.MainPanel"); Ext.Viewport.add(mainPnl); } });
This config can be used together with the phoneIcon and tableIcon configs to define default icons for phone and tablet applications:
Ext.application({ name: "IconsSample", views: ["MainPanel"], icon: "img/app-icon.png", phoneIcon: "img/app-phone-icon.png", tabletIcon: "img/app-tablet-icon.png", launch: function () { var mainPnl = Ext.create("IconsSample.view.MainPanel"); Ext.Viewport.add(mainPnl); } });
When this configuration is present, Sencha Touch uses the following code to define the application’s icons:
// Fragment of sencha-touch-all-debug: if (Ext.isString(icon) || Ext.isString(phoneIcon) || Ext.isString(tabletIcon)) { icon = { '57': phoneIcon || tabletIcon || icon, '72': tabletIcon || phoneIcon || icon, '114': phoneIcon || tabletIcon || icon, '144': tabletIcon || phoneIcon || icon }; }
Note how the icon config is transformed into an object with four properties. Each property is in turn and object representing an icon configuration that follows the guidelines above.
Defining Sencha Touch Application Icons Using a Set of Images
The second mode of operation of the icon config gives you maximum control, as you have the opportunity to directly define the icon for each iOS device. In this case you specify an object with four properties, each representing an icon configuration for a particular device. This mode supersedes the phoneIcon and tabletIcon configs. Here’s an example:
Ext.application({ name: "IconsSample", views: ["MainPanel"], icon: { "57": "img/app-icon57.png", "72":"img/app-icon72.png", "114": "img/app-icon114.png", "144": "img/app-icon144.png" }, launch: function () { var mainPnl = Ext.create("IconsSample.view.MainPanel"); Ext.Viewport.add(mainPnl); } });
In both modes, Sencha Touch inspects the icon config, creates links to the icons, and inserts the links in the app’s html document:
// Fragment of sencha-touch-all-debug.js: precomposed = (Ext.os.is.iOS && config.glossOnIcon === false) ? '-precomposed' : ''; if (icon) { var iconString = 'apple-touch-icon' + precomposed, iconPath; // Add the default icon addLink(iconString, icon['57'] || icon['72'] || icon['114'] || icon['144']); // Loop through each icon size and add it for (iconPath in icon) { addLink(iconString, icon[iconPath], iconPath + 'x' + iconPath); } }
Very interesting, right?
Stay Tuned
Don’t miss any articles. Get free updates in your inbox.
You said about the sencha touch 2.0, right?
I didn’t find the icon configuration feild in sencha touch 1.1
Sencha Touch 2.
And how to add those to native compilation for iOS?
on packager.json by default it uses icon.png, but I need to specify one for each model.
Hi Jorge,
Please can you provide any tutorial on adding a custom image/icon on a button in sencha touch 2 using sass
Very good article, thx. I quote it in one of our blog post talking about saving a web site as an application on iOS and how Sencha Touch 2 does it.
one2teamdev.blogspot.fr/2012/09/web-site-as-web-app.html
Thanks, Ronan.