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 chrome
s webstore?(ie, what lines of (html
)code).
Hope experts here will help me. Thanks in advance.
PS:
I've already read:
-
How to have multiple favicon sizes, yet serve only a 16×16 by default? ,
-
What is currently the best way to get a favicon to display in all browsers that support Favicons? ,
-
How can I add a picture in address bar of the browser when my page is browsed? .
But they were of very little or no use.
Best Answer
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:I have commented each line of code for better understanding. Now to answer your questions:
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.
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.
See above code.
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 theindex.html
page. I typically have the above code in my template which applies it to all pages on my site.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:
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.