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

January 13th, 2017 by Kyle J. Larson

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. 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:

iPhone 6/7, iPhone 6/7s, iPhone SE iPad / iPad Mini iPad Pro iPhone 6/7 Plus, iPhone 6/7s Plus
120×120 152×152 167×167 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="http://www.yoursite.com/apple-touch-icon.png" rel="apple-touch-icon" />
<link href="http://www.yoursite.com/apple-touch-icon-152x152.png" rel="apple-touch-icon" sizes="152x152" />
<link href="http://www.yoursite.com/apple-touch-icon-167x167.png" rel="apple-touch-icon" sizes="167x167" />
<link href="http://www.yoursite.com/apple-touch-icon-180x180.png" rel="apple-touch-icon" sizes="180x180" />
<link href="http://www.yoursite.com/icon-hires.png" rel="icon" sizes="192x192" />
<link href="http://www.yoursite.com/icon-normal.png" rel="icon" sizes="128x128" />

Make the first apple one the 120 x 120.

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 good one: iOS App Icon. 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, Jan 12, 2017 to include latest iPad & iPhone.

Tags: , , ,

« Older     Newer »

Leave a Reply

41 Comments

      • 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?

        Reply

        • Antonio

          used

          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…

          Reply

    • tylerabell

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

      Reply

  7. khoailang

    Hello,

    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

    http://farm3.staticflickr.com/2856/11768957516_2c29a5514a_z.jpg

    )

    Might I missing something?

    I am sorry if I have multiple duplicated posts.

    Reply

    • 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.

      Reply

  10. 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!

    Reply

  13. 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: [email protected]

    I assumed I had to change the name to [email protected]…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 [email protected].

    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!

    Reply

    • 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. ??

      Reply

  14. yulpik

    Hello,

    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é

    Reply

  15. Moraima Diaz

    Hi, I know the last update for this was 2014 but I can’t get this to work on Android. It worked on apple right away but won’t pickup the image for Android. Any suggestions? TIA

    Reply

    • Kyle Larson

      Hmm… I’m not sure, did you include a 192×192 with rel=”icon” like this: That’s what android recommends, but I don’t have an android or emulator here to test it out.

      Reply

      • Moraima Diaz

        hmm yes I did exactly like that, I even found another site that suggested <link rel="shortcut icon"… but that didn't work either …Thanks for your reply though!

        Reply

  16. Kiquenet

    According _https://developer.apple.com/library/safari/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html#//apple_ref/doc/uid/TP40006556-CH27_ the sizes for Apple (**Web clip icon** ) are ***76×76, 120×120, 152×152, 167×167, 180×180***

    According _https://developer.chrome.com/multidevice/android/installtohomescreen_ the sizes for Android are ***36×36, 48×48, 72×72, 96×96, 144×144, 192×192***, maybe too ***128×128***

    Reply

  17. Glen

    Thank you for this info. It works perfectly. But which of the above files interferes with the .ico file? The

    icon-hires.png? icon-normal.png? Or some other? Suddenly my favicon is being overridden.

    Reply

  19. Jayasri Magesh

    your work is really a great job by learning this from your blog , now i itself can do this work on my own and it is very much impressive and very well nice.

    Reply

  21. Joanne

    This was somewhat helpful, I’m using Blogspot, and as I’m sure you know this is a content management system that does not allow access to the root directory. I’ve tried connecting DropBox as a file-host but this just isn’t working. What am I doing wrong?

    Reply

  23. http://naltrexone.paka.info

    Awesome site you have here but I was curious if you knew of any message boards that cover the same
    topics discussed here? I’d really love to be a part of online community where
    I can get suggestions from other experienced individuals that share
    the same interest. If you have any suggestions, please let me know.

    Appreciate it!

    Reply
Back to top