Creating Apple iPhone / iPod Touch Icon's

You'll first need to create the icon that is going to represent your site. It will need to be a PNG format graphic that must be square in its dimensions. You'll see on other websites that recommendations are 45px by 45px or 60px by 60px. Once you have created your icon, name it something like apple-touch-icon.png and save it out to someplace you'll remember. NOTE: You can name the PNG icon to be anything you'd like and I have named mine as so for clarity purposes. Also, the home screen area will not understand transparency in your PNG icon and the glassy look and rounded corners of the icon are automatically generated by the device itself.

The next step is tying the graphic icon into your existing (or new) website. To do so you'll have to apply the action labelled iPhone Homescreen Icon as either a Page action or as a Folder action.

After you have applied the action (either Page or Folder) you'll get a drop-down option in your Actions palette. From the drop down select your apple-touch-icon.png file that you've created earlier.

Once you have then published your page you can view your results by either using an actual iPhone / iPod Touch device or if you're on an Intel-based Mac you can use the iPhone simulator that is available in the iPhone SDK. To see it in action you'll need to goto your page in Mobile Safari and at the bottom of the screen you'll need to touch the + icon and select Add to Home Screen.

You can either skip this step and go onto the last step but I wanted to provide a screen-capture of the step inbetween as it enhances our final results. In this screen you'll get the opportunity to name your bookmark as you'd like it to appear on your own home screen. You'll see that our icon is now added to the left of our entry form (1) and we can now enter specific text to label our new bookmark. After you've finished doing so, choose Add at the top (2).

Now our icon representation of our website is now on the home screen and it looks much better.