favicons/icons for popular units/browsers/OS

Question

I've been using an icon generator, to create favicons/icons for various popular units/browsers/OS, for a website

The result is:

<link rel="shortcut icon" href="favicon.ico />
<link rel="apple-touch-icon" sizes="57x57" href="apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="60x60" href="apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" sizes="196x196" href="favicon-196x196.png" />
<link rel="icon" type="image/png" sizes="160x160" href="favicon-160x160.png" />
<link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png" />
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png" />
<meta name="msapplication-TileColor" content="#ffffff" />
<meta name="msapplication-TileImage" content="mstile-144x144.png" />
<meta name="msapplication-config" content="browserconfig.xml" />

Of course, this seems like a bit over the top. I have never seen ANY site use this many icon variations

I would like the icon to be available on most popular units, so people can also add the website to home-screen etc. (with the icon)

But is all this really necessary, or could I easily trim it down to just a few?

What would happen if I for example only used one 152x152 size for apple devices, and skipped the smaller sizes?

Answer 1

My solution:

1) Prepare your icon image in resolution 310x310 and PNG format.

2) go to http://faviconit.com, generate your favicons, download and unzip, copy all into some folder in project (in my case root/favicon/)

3) then go to http://www.favicon-generator.org/, generate your favicons, download and unzip, then copy only android-icons (android-icon-*.png) and manifest.json into some folder in project (in my case root/favicon/)

4) don't forget to change paths in manifest.json and browserconfig.xml

5) then use in your html head something like this:

<link rel="shortcut icon" href="/favicon/favicon.ico">
<link rel="icon" sizes="16x16 32x32 64x64" href="/favicon/favicon.ico">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32.png">
<link rel="icon" type="image/png" sizes="64x64" href="/favicon/favicon-64.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon/favicon-96.png">
<link rel="icon" type="image/png" sizes="160x160" href="/favicon/favicon-160.png">
<link rel="icon" type="image/png" sizes="192x192" href="/favicon/favicon-192.png">
<link rel="apple-touch-icon" sizes="57x57" href="/favicon/favicon-57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/favicon/favicon-60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/favicon/favicon-72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/favicon/favicon-76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/favicon/favicon-114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/favicon/favicon-120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/favicon/favicon-144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/favicon/favicon-152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/favicon-180.png">
<link rel="manifest" href="/favicon/manifest.json">
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="/favicon/favicon-144.png">
<meta name="msapplication-config" content="/favicon/browserconfig.xml">
<meta name="theme-color" content="#ffffff">

Answer 2

After some more research, I ended up with this solution:

<link rel="icon" type="image/png" href="favicon.png" />
<!--[if IE]><link rel="shortcut icon" type="image/x-icon" href="favicon.ico"><![endif]-->
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
<meta name="msapplication-TileColor" content="#111111" />
<meta name="msapplication-TileImage" content="mstile.png" />

This page helped some http://www.jonathantneal.com/blog/understand-the-favicon/

favicon.png is 96x96

favicon.ico is 48x48 (or 3 variatons in one file)

apple-touch-icon.png is 152x152

mstile.png is 144x144

So, the files are a bit large, but this way I won't need a truckload of versions and files. Also, a 4-8 kb file is not that much for user to download (even on phone), and any device should grab the file and downsize it if needed

Answer 3

First solution - Files in root directory

Create:

• favicon.ico, as usual, as a 16x16 ICO picture. This is for old versions of IE.
• apple-touch-icon.png as a 152x152 PNG picture. This is for all iOS devices and Android Chrome.
• favicon-196x196.png as a 196x196 PNG picture. This is for recent desktop browsers (and also Android Chrome, also it favors Apple Touch icons at time of writing).
• mstile-144x144.png as a 144x144 PNG picture. For Windows 8 / IE 10 and Windows 8.1 / IE 11.

Place them at the root directory of your web site.

Declare them with:

<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="196x196" href="/favicon-196x196.png" />
<meta name="msapplication-TileColor" content="#ffffff" />
<meta name="msapplication-TileImage" content="/mstile-144x144.png" />

As you guess, the icons will be down-sized when necessary.

Yep, favicon.ico is not declared. IE will find it as long as it is in the root of the web site. Same for browserconfig.xml in case you use it.

Alternative solution - Files not in root directory

Create the same icons as above.

Place them somewhere in your web site, eg. /path/to/icons.

Declare them with:

<link rel="shortcut icon" href="/path/to/icons/favicon.ico />
<link rel="apple-touch-icon" sizes="152x152" href="/path/to/icons/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="196x196" href="/path/to/icons/favicon-196x196.png" />
<meta name="msapplication-TileColor" content="#ffffff" />
<meta name="msapplication-TileImage" content="/path/to/icons/mstile-144x144.png" />

Answer 4

totally overkill. For Apple, you only need the following

apple-touch-icon.png (57x57 iPhone and iPod touch)
apple-touch-icon-72x72.png (72x72 iPad 1st and 2nd gen)
apple-touch-icon-114x114.png (114x114 retina iPhone and iPod touch)
apple-touch-icon-144x144.png (144x144 retina iPad)

however, if you miss any of these, the following happens:

The icon that is the most appropriate size for the device is used. If no sizes attribute is set, the element’s size defaults to 60 x 60.

  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.

  If no icons are specified using a link element, the website root directory is searched for icons with the apple-touch-icon... prefix. For example, if the appropriate icon size for the device is 60 x 60, the system searches for filenames in the following order:

apple-touch-icon-76x76.png

apple-touch-icon.png

(extracted from IOS Developer Library)

Thus, you can easily use only 144x144.png and nothing will happen, it goes on you whether your icon design looks nice in small sizes or not, but you can totally use only one size