Mobile Favicons

Question

So I'm doing some research regarding mobile site user experience and stumbled upon the fact of the whole favicon.ico being completely outdated and all.

Looking around I've gathered that I require various new sets of images/icons to actually present the "favicon" properly on various mobile devices like android, iphones and windows phones.

Now the question here is, I've got the following code:

<link rel="apple-touch-icon" sizes="57x57" href="images/favicons/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="images/favicons/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/favicons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="images/favicons/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/favicons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="images/favicons/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="images/favicons/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="images/favicons/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="images/favicons/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="images/favicons/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="images/favicons/favicon-194x194.png" sizes="194x194">
<link rel="icon" type="image/png" href="images/favicons/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="images/favicons/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="images/favicons/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="images/favicons/manifest.json">
<meta name="apple-mobile-web-app-title" content="JoJo Productions">
<meta name="application-name" content="JoJo Productions">
<meta name="msapplication-TileColor" content="#00aba9">
<meta name="msapplication-TileImage" content="images/favicons/mstile-144x144.png">
<meta name="msapplication-config" content="images/favicons/browserconfig.xml">
<meta name="theme-color" content="#555555">
<link rel="shortcut icon" href="favicon.ico">

but for me this is just a too huge chunk of code to just show the favicon properly. So I was wondering what I would be able to remove and what I should definitely keep to present it properly on "most" mobile devices.

Most other websites that make use of mobile favicons only use a handful of the above mentioned code, being the: 57x57, 72x72, 114x114 and the 144x144 this all being the apple-touch-icons. So are the images/code parts really that important for Iphone or other mobile users? Or is it possible to have it a bit more optimised?

Either way thanks for the information.

---

Edit

So with some further research I've gotten to this result which seems to work okay on most modern devices:

<meta name="msapplication-config" content="images/favicons/browserconfig.xml">
<meta name="msapplication-TileImage" content="images/favicons/mstile-large.png">
<meta name="msapplication-TileColor" content="#ae8160">
<meta name="application-name" content="JoJo Productions">
<link rel="shortcut icon" sizes="16x16 24x24 32x32 48x48" href="favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="favicon.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">

Which is of course better for me as the amount of code/images has been decreased significantly. And as long as it works on most modern mobile devices I'm happy.

With a combination of this "cheat sheet", this tutorial, and the help from Philippe B. I managed to get it to this.

Either way thanks for all the help and hopefully in the coming years they'll make a proper standard for the favicon!

Eng

I also think it's crazy to have a huge bunch of tags just for icons, so thanks for the question. – Dorkas

Answer 1

To address as many platforms as possible without a large set of icons, you basically need four icons:

• A PNG icon, for modern, desktop browsers.
• An Apple Touch icon for mobile browsers (iOS Safari of course, but also Android Chrome and many others; and also Mac OS Yosemite Safari).
• favicon.ico, for legacy browsers (think IE 9, 8, ...).
• A tile icon for IE on Windows 8 and 10.

This gives us:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" href="/favicon.png" sizes="32x32">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="msapplication-TileColor" content="#00aba9">

A few comments about this code:

• apple-touch-icon.png is 180x180, which is the highest supported resolution by iOS (iOS 8 on iPhone 6+ and Retina iPad). Lesser platforms will scale the icon down.
• apple-touch-icon.png is named this way and placed in the root directory of the web site because this is a convention from Apple. If you place it or name it differently, you will probably notice 404 errors in your server's logs. Nothing to worry but if you can avoid them...
• favicon.png is 32x32. Not too small and not too large. You might make it large, but for no significant benefits.
• favicon.ico is in the root directory of your web site because this is a convention from IE. For example, Yandex search engine expects it here.
• In this example, I used mstile-144x144.png and no browserconfig.xml. I did this because it looks easier (this is just two lines of HTML and a picture; no extra XML file involved). But this choice is arguable. The msapplication-TileImag and msapplication-TileColor metas introduced by Win 8.0 / IE 10 have been replaced by browserconfig.xml in Win 8.1 / IE 11. So browserconfig.xml is a longer term solution. Plus, if you put this file in the root directory of your site, you don't have to declare it in the HTML: IE 11 will find it by convention ("favicon.ico" style). Note that Coast by Opera picks msapplication-TileImag for bookmarks. Now make your choice!

A final note: the large code chunk you quote in your question was generated by RealFaviconGenerator. As the author of this tool, your question makes me sad ;-)

Stome

Thank you for your extended comment regarding this problem, the code in question is indeed generated with RealFaviconGenerator and combined with favicomatic exports and doing some general research. The code produced pretty much stayed the same though. That said the 5 lines of code you provided might be a lot more interesting for me rather than the huge chunk of code, so as this was more of a question of confirmation I'll go give it a try and report back if necessary. Either way thanks for your help and your feedback. – Atmospherics

It seems to me, Android Chrome now needs manifest.json to find the icon when adding a shortcut to desktop. – Trot

@Trot Absolutely. However, a few months ago, Android Chrome used to pick the Apple Touch icon when it couldn't find anything better (I don't know if this is still true; at least the documentation still says so: developer.chrome.com/multidevice/android/…). So if your're going for the lightest package, skipping the manifest can be a sensible choice. As an aside, RealFaviconGenerator was refactored to generate less icons, yet keeping the compatibility with as many platforms as before. And it does create the manifest. – Stome

@Stome I used your tool (thanks for it!), but my concern was more about the application/web name: the e-shop I am collaborating on supports multiple languages (13 at the moment), which would have lead me to create 13 manifests. In the end I just deleted the name from the generated manifest and used the <meta name="application-name"> tag mentioned above to control the app name (the default <title> contains too much SEO poetry for just a shortcut (sic!). – Trot

@Trot Thank you! Nice trick. I didn't know Android Chrome could use application-name (it's not documented here at least developer.chrome.com/multidevice/android/installtohomescreen). Plus, when the manifest was first supported, Android Chrome required the name field (maybe only for some display modes? Can't remember). But I tested this again with Android Chome 51 and now the manifest is accepted even if it has no name. In that case, Chrome is using application-name or the classic title, just as you said. – Stome