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.
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.
* 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.
41 Comments
Tayna Castongvay
this article really helps to me,thank u
Nick
Tried this. Works on ipod touch but not ipad???
Reece
No, I have iPad mini and my site (www.coolodeon.co.uk) seems to have worked fine… Even without the HEAD code:)
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
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…
newfront
This works fine in android – precomposed, but you don’t need it on ios.
Thanks for the post.
tylerabell
what icon size should you use for android ?
kiquenet kiquenet
in Android, when I add web site bookmark ?
Marek Trochan
If you like google search you can use Ninja Gate on ninjagate.com
ErikU
These size are incorrect according to apple’s developer site : https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
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.
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.
elgandoz
Android works in the same way as iOS do, but it needs the absolute URL of your files.
from https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW3:
“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.
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?
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.
NewsTrunk
What icon size for android?
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!
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:
https://developer.chrome.com/multidevice/android/installtohomescreen#icon
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.
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: [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!
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
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é
alexaliothomas
Hey yulpik, I am looking for the same thing but cant find it anywhere, any luck so far?
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
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.
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!
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***
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.
Kushikuto
Hi,
Can we set a specific link? (for example; another website link)
My site link is http://www.mysite.com/folder/ but I want to set http://www.mysite.com
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.
Josué Morales
Thank you! this is exactly what I was looking for!
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?
evangelin
wow really superb you had posted one nice information through this. Definitely it will be useful for many people. So please keep update like this.
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!
Andrea Miller
Hi Kyle,
Like few others, I am also having issues with iPad. I am running OS8 and for some reason it doesn’t pick up the image.
Thanks,
Andrea