How to Add Icons for iPhone, iPad & Android to Your Website

Many sites currently add a favicon before launch that is visible in your user’s browser tabs and bookmarks, but lots of sites are still missing icons for iOS. By adding an iOS icon, anyone who decides to save your webpage to the home screen of their iPhone, iPad, or Android* will see a nice app-like icon rather than an image of your page.

The first step is creating an image. To support the newest high resolution iPhone and iPad you’ll want to create several different sized images (The device will take the nearest size larger than it’s default size if you don’t have them all). You can save your images as PNGs to any directory on your site.

With the icons on older iOS versions you had to determine if you were going to use apple-touch-icon-precomposed vs letting apple apply some effects to your icon. That is no longer a concern with iOS 7. You’ll just need to create a square icon and it will round the edges for you.

ios 7 icons

Here is a table of the current iOS icon sizes from Apple (this has been updated for iOS 7 icon sizes):

classic iPhone / iPod iPad iPhone / iPod Retina iPad Retina iPhone 6 Plus
57×57 76×76 120×120 152×152 180×180

For Android icons you’ll want to follow these specifications:

Android Regular Android Hi-Res
128×128 192×192

Next you’ll just add a simple bit of code to the HEAD of your site so the devices can find your images (iOS will find these automatically if they are in your site’s root directory and named this way, but it’s recommended to include it). Android uses the two icons with rel=”icon” and apple uses the ones prefixed with “apple-“:

<link href="" rel="apple-touch-icon" />
<link href="" rel="apple-touch-icon" sizes="76x76" />
<link href="" rel="apple-touch-icon" sizes="120x120" />
<link href="" rel="apple-touch-icon" sizes="152x152" />
<link href="" rel="apple-touch-icon" sizes="180x180" />
<link href="" rel="icon" sizes="192x192" />
<link href="" rel="icon" sizes="128x128" />

If you don’t want to create all these images, you should at least create the larger resolution ones. That way they’ll look good on the hi-res devices. The older devices will load the closest size available to their required size and shrink them down (this works but isn’t ideal if you want complete control and the fastest download).

If you’re creating your iOS icon image you can find templates for use around the web; here’s a couple good ones: appicontemplate for ios7 and iOS7 icon template for photoshop & sketch that cover all the sizes. Note that you’ll only need some of the icons represented in these templates unless you’re releasing an app in the App Store.

ios icon homescreen

* Updated this old article from Sept 3, 2010 to reflect changes with the new iPad and Oct, 30 2013 for updates in iOS 7 icon sizes and Dec, 12 2014 to include Android changes and iPhone 6 icon sizes.

Tags: , ,

« Older     Newer »
  • Pingback: How to Setup Your Site for the iPhone «

  • Tayna Castongvay

    this article really helps to me,thank u

  • Nick

    Tried this. Works on ipod touch but not ipad???

  • Pingback: iPhone 5 Web Design Kyle Larson Web Design Articles()

  • newfront

    This works fine in android – precomposed, but you don’t need it on ios.

    Thanks for the post.

  • Marek Trochan

    If you like google search you can use Ninja Gate on

  • Pingback: QuickTip: Adding an Icon for iOS & Android to Your Website | Mel's space()

  • Pingback: Generate Favicons and Apple Touch Icons | Andrew Moss' blog()

  • Website Design Manchester

    Very good post, I followed it and it worked on android but not on the iPad?
    If you are looking for some guidance on how to create a Favicon Suite for all devices take a look at :

    Many Thanks

  • ErikU
  • Kyle Larson

    Thanks Erik, looks like this has actually changed to some new sizes for iOS7. I’ll add the new sizes in here.

  • ErikU

    Leave it up to a company to change the “default” size huh? :)

  • tylerabell
  • tylerabell

    you should use the filenames I listed above, from apples dev site, just in case. Because iOS devices automatically scan for them.

  • tylerabell

    what icon size should you use for android ?

  • Reece

    No, I have iPad mini and my site ( seems to have worked fine… Even without the HEAD code:)

  • khoailang


    1. should we put all of four links into the website or just one of them accordingly to iphone or ipad, ..?.

    I put all four and test it in IPhone 5s, it looks like the latest icon is always used (152×152)

    2. for the Android, when I “add bookmark” and “add to home screen”.

    The favicon is used instead of the apple-touch-icon-precomposed.png as I expecting (likes this


    Might I missing something?

    I am sorry if I have multiple duplicated posts.

  • elgandoz

    Android works in the same way as iOS do, but it needs the absolute URL of your files.

    “If there is no icon that matches the recommended size for the device, the smallest icon larger than the recommended size is used. If there are no icons larger than the recommended size, the largest icon is used.”

    So your code have to look like this:

    I tested it personally on JellyBean and KitKat with Chrome.

  • Kyle Larson

    Thanks for sharing that, I updated the code above to include an absolute path to the files.

  • Pingback: How to dynamically create Mobile Touch Shortcut Icon for Apple iOS and Android | henrywrites()

  • Pingback: Pragmatic Responsive Design |

  • DJRipster

    Is there any way to add a separate icon for Android ? Or even use the favicon instead of the apple touch icon ?

  • Kyle Larson

    I haven’t tested and gotten anything to work yet, but you might try adding to the mix above (using the largest size icon you’re creating) and see if Android picks that one up instead. I’d guess maybe list that first, but you could try it both first in the list of icons or last.

  • Pingback: Icon images not being detected for web app on any devices | SuperBlog()

  • Pingback: Icon images not being detected for web app on any devices | lonte facebook()

  • Pingback: Prelaunch Checklist: 10 Things To Do Before Launching your WordPress Site()

  • 1judah

    did you ever get that right? I was wonderin tha same thing, i got your 5 links, what about android, windows 8, HIM, Linux; all in 1. like creating a 512×512 and resiezing them for each, and someone finding each code?

  • NewsTrunk

    What icon size for android?

  • Pingback: How to Add Icons to iPhone, iPad & Android to Your Website - appgong()

  • Frederic Gauld

    Thanks Kyle!

    That’s a very useful tip for me. We’re soon launching a web app and since it won’t be native for a while, this will be a seamless workaround. Cheers from Montreal!

  • Pingback: How to Add Icons for iPhone, iPad & Android to Your Website | Share Everything()

  • Pingback: Prelaunch Checklist: 10 Things To Do Before Launching your WordPress Site – WordPress Mastery,collections of free and WordPress themes and plugins()

  • Antonio

    hello, i tried all solution none works in ipad… i was able to make favicons work only in desktops or laptops… so what am i doing wrong?

  • Antonio


    i put the icons in img/… first
    then changed to root directory and used full path in the href

    doesnt show the favicon in ios … iphone or ipad…

  • Pingback: Ipad Website Shortcut Icon | Get Your iPad Now()

  • Pingback: How To Easily Create iPhone & iPad Home Screen Retina Icons For Your Website()

  • Matt Mink

    Since your post is still one of the first that appears for a Google search on this topic, I thought it worth mentioning that the Android specifications have changed:

    Caution:The 192px image format is recommended. The last two formats (apple-touch-*) are deprecated, and will be supported only for a short time.

  • Kyle Larson

    Hey @mattmink:disqus thanks for letting me know about the change! I’ll update the article so others get the info as well.

  • Pham Van The

    Thank you very much for your useful article, hoping its work well in my website

  • V8

    wow this is sheer insanity 5 diff sizes wtf

  • Donna Bayes Scott

    AWWRRRGGG! I’m having trouble adding the icon to my website. I’ve been able to add a simple favicon to my web browsers in the past, but now I’m trying to get it to look like an app on an iphone. All I get is the changing web page icon. Last night, in a stroke of luck, it worked–magically! I got a beautiful app, however, it wasn’t the final picture I wanted so without changing any code, I replaced the picture file. It kept coming up with the original picture. Even though I deleted it from my directory, it still was saving the same dang picture. So, I started deleting everything and doing it over. And now I get nothing. :(

    I used the code above both now and when it worked, changing the mysite to the name of my own address. I’ve pasted it before the and tested it. I’ve pasted it in the HEAD, and tested it. Not sure where it is supposed to go.

    I’ve replaced the pictures. They are in my public_html. Is that the right place? It’s where I’ve put the favicon in the past. It’s where they were last night when it magically worked.

    Maybe I don’t have the pic files named correctly. I got all the different sizes from an online site. I uploaded the

    I’ve got one named apple-touch-icon.png and then I put a few more over there. They came from the download named like: Icon-72@2x.png

    I assumed I had to change the name to apple-touch-icon-72@2x.png…so I did that…but then I also uploaded apple-touch-icon-120×120.png as well as the way it came from the picture file of apple-touch-icon-60@2x.png.

    I don’t know how I got the icon last night and can’t seem to get it today. Could someone please help me? I’m definitely a self-taught newbie who knows enough to be really dangerous!

  • Donna Bayes Scott

    Well, it magically started working and I have an app icon. Yea! Maybe it just takes some time for it to show up. ??

  • yulpik


    I created a mobile website and I do not intend to make an apps. I would like to facilitate the steps of inserting the website shortcut on the home screen and thus encourage people to put icon on their device. Apple and others explain the steps to do but people often become discouraged or do not always know how.

    I would write this on my website:
    Add the mobile site shortcut icon on the Home screen of your laptop or tablet, click here.

    When the person clicks on that link, the icon will appear on the Home screen of his mobile or tablet. Programming and some scripts on my site will be necessary.

    Could you please help me or guide me if not do you know resources on the web to find an answer to my question?

    Thank you in advance

    Richard Tassé

Back to top
More Posts