Create Apple Touch Icons and Startup Images

Get touchy on Apple

Tonight’s call will focus on two simple identifiers which are useful on mobile devices, namely on Apple devices such as the iPhone, iPod and iPad.

iPhone 4 Screen Image

Apple Touch Icons

Apple Touch Icons are identifiers for your web page or application which can be placed on the home screen of devices, such as the iPhone as seen here above. When Bookmarking a site and adding an icon to the home screen, default icons would be a screenshot of an uncontrollable part of your web page.

Similar to favicons, we can add touch icons to our site, which will replace the default and become visible as a custom icon.

Apple Startup Images

They are similar to Icons in as much as they load while the user is waiting for the actual application is loading or if the app is offline.

When surfing a site for which you like to create a link (icon) on the home screen, just select as per here below:

iPhone 4 Screenshot

You will end up with the icon on your home screen asseen on the image on top of this post.

Icon Sizes

Create your icons in 57 x 57 pixels, 114 x 114 pixels and 512 x 512 pixels and load them to the root folder of your site.

Yorgo Nestoridis Touch Icon

Yorgo Nestoridis Touch Icon

For the touch icon: call the image:




and so on.

Apple will add the rounded corners and the gloss automatically.

Startup Image

The start up image has a standard size of 320 x 460 pixels and should be in png portrait format.

Yorgo Nestoridis Startup Image

Name the image startup.png.


If your icon is not in the root folder, just place the following codesnippet in your header:

<link rel="apple-touch-icon" href="apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png" />

The above code would be for different image sizes.

That’s it.

More details and a step by step workshop at tonight’s call.