How To Add a Custom Home Screen and Web Clip Icon To Your iOS Device

Home/DIY, Technology/How To Add a Custom Home Screen and Web Clip Icon To Your iOS Device

How To Add a Custom Home Screen and Web Clip Icon To Your iOS Device

October 12th, 2012|DIY, Technology|

Ever wonder how websites get those awesome icons that pop onto you homepage when ever you add a website to your iPhone or iPad’s home screen? Well, get ready to be blown away. Its the easiest graphic design you will ever do.

1. Open Photoshop and create a new 158 x 158 document.

2. Add your graphic/content to this new Photoshop document.

3. Save as apple-touch-icon.png.

4. Place the image in the root of your website’s hosting.

Apple will reform the image to create the rounded edges and center highlight automatically! (If you do not want these auto formats, save the image as apple-touch-icon-precomposed.png instead of the above image name.

If you want to use a different icon for every or maybe one or two separate pages, simply place this code in the <head> of the document (replace “path/myicon.png” with you images name and path:

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

Pretty simple huh? and you thought it was going to be hard?