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.

Update: This has slightly changed starting with iOS 7 and now iOS 8. It’s pretty much the same steps even though the screenshots are of iOS6 with the only change being what you name the file. Name it apple-touch-icon.png only as Apple is no longer supporting the precomposed overlay feature.

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. Apple is no longer supporting the precomposed overlay feature so don’t use apple-touch-icon-precomposed.png.

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.

Update: This has slightly changed starting with iOS 7 and now iOS 8. It’s pretty much the same steps even though the screenshots are of iOS6 with the only change being what you name the file. Name it apple-touch-icon.png only as Apple is no longer supporting the precomposed overlay feature.

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.

  3. says

    Hey Bryan can we change the location of icon upload. I don’t want to use the root directory location as there are other images saved in my root folder and its automatically picking one of them?

  4. says

    Hi Niki,

    Sorry for the rather late response. I’m not aware of any other way other than using the root directly as that’s where it should pull from if you’re naming it that so not sure why it would pull another image if it’s not named exactly that. You might try searching for a WordPress plugin if you’re using WP to run your site.

    Best of luck,

    Bryan

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=""> <s> <strike> <strong>