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.
Update 2 October 2016: Now that it’s 2016 and iOS 10 is out things have drastically changed. There’s more screen sizes and devices so don’t worry about all these different sizes or where to upload images. Simply follow these step by step instructions on how to create Android and iOS retina home screen icons. You only need to upload one image and select some settings. I did have to play with the settings a few times to get things just right, but after testing a few times it now works perfect on many of my other sites. If you have any questions about the settings, please let me know in the comments section below.
You can forget about the directions below and just use the plugin referenced above.
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 2 October 2016: Now that it’s 2016 and iOS 10 is out things have drastically changed. There’s more screen sizes and devices so don’t worry about all these different sizes or where to upload images. Simply follow these step by step instructions to add Android and iOS retina home screen icons. You only need to upload one image and select some settings. I did have to play with the settings a few times to get things just right, but after testing a few times it now works perfect on many of my other sites. If you have any questions about the settings, please let me know in the comments section below.
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.
No problem April. Glad I could help 🙂
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?
Looks like you'll want to add "<link href="touch-icon-iphone.png" rel="apple-touch-icon-precomposed" />" to your website's header file (wordpress) or index.html if its not already there. http://www.kylejlarson.com/blog/2012/creating-ret…
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.
thanks Bryan! For whatever reason i HAD to add the code to the header on a site I designed (http://www.armadillosicecreamshoppe.com/) to get it to show up today. the favicon kept getting added by default until I added that code.
That's weird. Never heard of that before, but glad it worked out and might help others if they run into a similar issue.
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?
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