Facebook Twitter Gplus LinkedIn RSS
Home HTML Adding an Icon and Startup

Adding an Icon and Startup

As mentioned previously, there are two header specific tags that you can implement in order to help make your web application look and feel even more like it was downloaded straight from the App Store.  All of these cool features will be shown once a user has saved your web page to their iDevice’s home screen(to do this, pretend you are about to bookmark your web page in Safari, but instead press “Add to Home Screen”).  By doing this, you can get a nifty little icon and even a startup image integrated into your application.

If you need a refresher, the two tags were

<link rel="apple-touch-icon" href="icon.png" />
<link rel="apple-touch-startup-image" href="startup.png" />

Thankfully enough, both tags are pretty self explanatory.  The first one,

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

will help establish the icon that will be displayed when you save your web page to your home screen.  This icon needs to be 57×57 pixels and of a .png or .jpg format.  One neat fact is that if you don’t have any icons specified using the link element, then your website’s root directory is actually searched for files with the prefixes in the following order to find an icon to use:

  1. apple-touch-icon-57×57-precomposed.png
  2. apple-touch-icon-57×57.png
  3. apple-touch-icon-precomposed.png
  4. apple-touch-icon.png

However, it’s probably better to just set your desired link source with either a general naming for the file(such as icon.png), or just one file you always plan to stick with(maybe along the lines of cutekitty.png? haha).

The second tag:

<link rel="apple-touch-startup-image" href="startup.png" />

will specify a startup splash screen image to be displayed when your web application is ever opened from the home screen.  This image, also either .png or .jpg format, needs to be 320×460 pixels in order to work. A common misconception is that since the screen for an iPhone or iPod Touch is 320×480 pixels, you will need a startup image of that size, but the reason we are given 20 pixels less on the vertical side of things is to account for the status bar up top that includes our signal strength, time, and battery life.

Get creative!  Try and design something that will make your web application look genuine.  Although you can’t really have a loading bar on your startup screen, you can always try to add a little “loading…please wait” type text, or whatever you come up with to make the user experience all the better.  Apple is even nice and automatically adds those nice smooth curved edges to your icon, and gives it a glossy look! (So that people like me who can barely use Photoshop can feel better about their icon.)

Now that the visual side and offline side of things are done, we will move on to a slightly harder topic, which is implementing and using a local database on the client’s device through javascript.  This can be extremely useful for things such as making a “to-do list” type web application, or even for storing data to retrieve in a game!  Brace yourselves, and click on to learn more! Next ->


One Response

  1. I would really like to say thanks a lot for the job you have made in writing this article. I am hoping the same most effective work by you later on also.

Leave a Reply to Christel Cancel reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>