The iPhone home screen icon is the ultimate visual reminder for someone to revisit your web-app or mobile friendly site. I’m going to show you four simple steps to making your own icon and installing it on your site.

First

Create a 57 x 57 .png file in Photoshop or your favorite image editor.

Second:

Insert your artwork to make your icon pretty.

Third

Save the file for web & devices with the name “apple-touch-icon.png.”

Fourth

Now just upload this file to the root folder of your website. Don’t confuse this with the root folder of your web server. Now if you don’t want to have it in the root folder and you want to place it in the images folder, you can insert this code into the header of your site:

Thats it! Your done! You can now go to your site on your iPhone or iTouch and test it!

Tags: Home Screen Icon, iPhone

This entry was posted on Thursday, October 22nd, 2009 at 3:16 pm and is filed under General, Website, iPhone. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.