I asked a similar question about signs even after several links were provided. I came up with a solution for several sizes, etc.
I use the following code in the <head> my site:
<meta name="msapplication-TileColor" content="#D83434"> <meta name="msapplication-TileImage" content="path/to/tileicon.png"> <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png"> <link rel="icon" href="path/to/favicon.png">
I commented on each line of code for a better understanding. Now, to answer your questions:
-How to determine which icon should be sent in the browser (how to determine that the browser requests an icon to display it in the address bar? Or to save as a tile? Or for speed dialing?)
You may be able to create a JS solution that will work, but I feel it is not necessary. As you see above, I am creating several different sizes and conditional comments for IE. Each icon is designed for a specific browser (s), and the rest do not load, which reduces overhead.
-How to use this particular icon for the browser without losing connection speed due to the large size of the icon?
For me, I compress the image as much as possible. I use 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 are on average 3-6 kilobytes (varies depending on the icon). Although this is more than a 16x16 ICO file, I believe that it provides the best experience on all devices.
- which lines of code (html) should be added, where in the html (file) for the specified purpose?
See above code.
-By By loading all the icons on the index.html page, can the browser cache them all for all subpages? (Putting all the icons in the root directory of the site?)
The root of the site works for ICO files named favicon.ico , but not for PNG or other file types. I am not sure that it will cache the file for all pages of the site if the code is only on the index.html page. Usually I have the code above in my template, which applies it to all pages of my site.
-But again, this will affect the performance of the site, increasing the loading time of the index page itself.
So, all the same, you need to determine for what purpose the icon is needed, and then dynamically serve it (for example, using JavaScript), without losing the page loading speed? Also how to have an icon for chromes website? (That is, what lines of code (html)).
I see a slight impact on site performance with my code above. Again I compress all PNG files.
As stated above, I do not think the JS solution is really necessary. I saw this question here on SO that asks about JS and favicons. Personally, I could see where JS would add more overhead than the file sizes themselves. I cannot backup this statement with the actual test, just a thought. (The thought of how much code is required to access the signs and do you really save the overhead?)
Theoretically, you should specify icon 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 it does not work well in all browsers . Some browsers choose the best size, while others download all sizes, thereby increasing overhead.
From all that I read and my experience, I highly recommend using the code used at the beginning of this answer in the sizes indicated in the comments. This covers most browsers without a lot of overhead and provides the end user with a good experience.
Chrome Webstore is 128x128px in size , but I'm not sure about the exact code you should use if it differs from the standard favicon code.