iPhone ‘Add to Home Screen’ Custom Icon

Posted on Thursday, March 11, 2010 in General Tips, Tutorials, Web Design

When you bookmark your website on an iPhone or iTouch by default it takes a screen shot of the current page. If you want to add a custom icon follow these simple steps!

1)  Create an image 129x129px 72dpi. This is the correct size! Other website debate the actual size, but for top quality and crispness use 129px by 129px. Make sure to save it as a PNG. (in photoshop go to ‘Save For Web & Devices’)

2A) In the head “<head></head>” of your website add this code:

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

2B) You can also just drop an image named “apple-touch-icon.png” in your root directory and it will work the same.

That’s it. Now on your iDevice add your site to the home page and boom!

iPhone Custom Icon

Rate this post:
(2 votes, average: 5.00 out of 5)
Loading ... Loading ...

Come on you know you want to be the first to comment!

Speak your mind!