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.
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:
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.
For the touch icon: call the image:
apple-touch-icon.png
or
apple-touch-icon-114×114.png
apple-touch-icon-57×57.png
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.
Name the image startup.png.
Embedding
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.
