How To Easily Create iPhone & iPad Home Screen Retina Icons For Your Website

One question I’ve been getting asked lately is how to make Home Screen icons for iPhone and/or iPad for your website and that also look great on the new Retina displays. Well it’s actually really easy.

Step #1

Simply open your handy graphics editor app like PhotoShop or in my case Pixelmator and create a new image that is 512×512 pixels. This will make it look great for Apple’s new Retina displays, but don’t worry… Apple will auto scale it down to also look great on non Retina devices like the iPhone 3G or iPad’s version 1 or 2.

Step #2

Save your icon as apple-touch-icon.png if you want the bubble highlight overlay or apple-touch-icon-precomposed.png if you don’t want it. You can see both examples towards the end of this post.

Step #3

Upload your saved icon to your websites root directory. In WordPress this typically would be where all your WordPress core files are located.

Step #4

Visit your website on your iPhone or iPad and tap the Add to Home Screen/Share/Whatever they call that button. (I put a red square around it in the pic to highlight it.;)

Step #5

Tap Add to Home Screen.

Step #6

Call it whatever you want. It pulls this from the website’s home page title tag, but can be edited.

That’s it! Now you have your shiny new Retina ready iOS icon on your iPhone or iPad. Now your only choice is to use the bubble overlay or not. I decided to not for this site. You can see both examples of this site’s icon below.

Comments

  1. April Books & Wine says

    I have been looking all over for instructions on how to make iPhone icons for my blog and they've all been so complicated. Thank you SO much for this, providing easy instructions.

  2. says

    didnt work for me. i put the image in the root of my site "/" (wordpress) and it keep pulling the favicon. I even deleted safari data on my iphone 5. what gives?

      • says

        You shouldn't need to add that and the favicon.ico should have no bearing on it at all. I've literally added it to close to a 100 of my sites along with clients.

        Make sure your root is where your WordPress files are like wp-config, wp-admin etc… Just upload it there and call it apple-touch-icon-precomposed.png

        What's the site you're uploading to? Btw I checked out your tech4eleven site and you've done a great job on it :) If you need more help you can comment here or contact me directly through my contact page.

Leave a 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>