multiple favicon sizes, How, Where and when to use them?

Question

I was reading an article(s):

Create a favicon for your site and Why so many files?.

According to them, If you need to use an favicon for various purposes, you'll need to create different for each purpose(For tiles in WIN8, For speed dial in Opera & Chrome).

Okay That's fine, I still use an 16X16 .ico file which I think is suitable for optimization purposes.

But now after reading those articles, I've various questions like(Assume that I've created various icons for various purposes using photoshop):

-How to detect that which icon should be served to browser (how to detect that browser is asking favicon for showing it in address bar? or for to save as tile? or for a speed dial?)

-How to serve that specific icon to browser without losing speed of connection because of large icon size?

-what lines of (html)code should be added where in html(file) for the specified purpose?

Currently for 16X16 icon I use:

<link rel="icon" type="image/x-icon" href="favicon.ico"/>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/><!-- IE8 -->

-By Loading all the icons on index.html page, can a browser cache them all for all the subpages?(By placing all the icons in root directory of site?)

-But again that will affect the performance of site by increasing the load time of index page itself.

so, Is there anyway to detect for which purpose the favicon is needed and then to serve it dynamically(using JavaScript for example), without losing speed of page load? Also how to have a favicon for chromes webstore?(ie, what lines of (html)code).

Hope experts here will help me. Thanks in advance.

PS:

I've already read:

But they were of very little or no use.

L84 L84 · Accepted Answer · 2014-07-16T20:27:17

I asked a similar question about favicons and after a few links were provided I came up with a solution for multiple sizes, etc.

I use the following code in the <head> of my site:

<!-- For IE 9 and below. ICO should be 32x32 pixels in size -->
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->

<!-- IE 10+ "Metro" Tiles - 144x144 pixels in size icon should be transparent -->
<meta name="msapplication-TileColor" content="#D83434">
<meta name="msapplication-TileImage" content="path/to/tileicon.png">

<!-- Touch Icons - iOS and Android 2.1+ 152x152 pixels in size. --> 
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

<!-- Firefox, Chrome, Safari, IE 11+ and Opera. 96x96 pixels in size. -->
<link rel="icon" href="path/to/favicon.png">

I have commented each line of code for better understanding. Now to answer your questions:

-How to detect that which icon should be served to browser (how to detect that browser is asking favicon for showing it in address bar? or for to save as tile? or for a speed dial?)

You may be able to create a JS solution that would work, however, I feel that is not needed. As you see above I create a few different sizes and a conditional comment for IE. Each icon targets a specific browser(s) and the rest are not loaded thus reducing overhead.

-How to serve that specific icon to browser without losing speed of connection because of large icon size?

For me I compress the image as much as possible. I am using PNG files (with the exception of IE 9 and below which is an ICO file) and I use TinyPNG to compress those and it works very well. My icons average 3 - 6 kilobytes in size (it varies depending upon the icon). While that is bigger than a 16x16 ICO file I believe it provides the best experience across all devices.

-what lines of (html)code should be added where in html(file) for the specified purpose?

See above code.

-By Loading all the icons on index.html page, can a browser cache them all for all the subpages?(By placing all the icons in root directory of site?)

The root of the site works for an ICO files named favicon.ico but not for PNG or other file types. I am unsure if it will cache the file for all pages on a site if the code is only on the index.html page. I typically have the above code in my template which applies it to all pages on my site.

-But again that will affect the performance of site by increasing the load time of index page itself.

so, Is there anyway to detect for which purpose the favicon is needed and then to serve it dynamically(using JavaScript for example), without losing speed of page load? Also how to have a favicon for chromes webstore?(ie, what lines of (html)code).

I see a negligible impact on site performance with my code above. Again, I compress all PNG files heavily.

As stated above, I don't believe a JS solution is really needed. I saw this question here on SO that ask about JS and favicons. Personally I could see where JS would add more overhead than the file sizes themselves. I cannot backup that statement with actual test, just a thought. (The thought is, how much code will be required to access the favicons and are you really saving any overhead?)

Theoretically you should be able to specify the favicons sizes using the following HTML:

<link rel=icon href=favicon.png sizes="16x16" type="image/png">
<link rel=icon href=windows.ico sizes="32x32 48x48" type="image/vnd.microsoft.icon">
<link rel=icon href=mac.icns sizes="128x128 512x512 8192x8192 32768x32768">
<link rel=icon href=iphone.png sizes="57x57" type="image/png">
<link rel=icon href=gnome.svg sizes="any" type="image/svg+xml">

In theory the browser then selects the best size and loads it, however, this doesn't work well across all browsers. Some browsers choose the best size while others load all sizes thus increasing overhead.

From everything I have read and my experience I highly recommend the code used at the start of this answer at the sizes specified in comments. That covers most browsers without massive overhead and provides the end user with a good experience.

The Chrome Webstore is 128x128px in size but I am unsure of the exact code you should use if it differs from the standard favicon code.

multiple favicon sizes, How, Where and when to use them?

1 Answers