I am working on a new web project and currently I am using the favicon files. Some time ago this was an easy task but nowadays almost the complete HTML header seems to be occupied by this topic:
All these elements are referenced using the standard <link /> tag. I now wonder when these elements are loaded:
Are all <link /> elements loaded by default or are the different browsers smart enough to only load such elements that are really used on the current platform/system? So is the Windows Tile Icon loaded on iOS as well?
The same is true for other elements that are referenced as <link />? Assume that there are 100 different style sheets linked in the header. Theoretically the browser could load these files in reverse order (later styles override earlier once). If all styles that are used in the current file are already defined in the last style sheet there is not need to load the other 99 files, is it?
Most likely in real life it is much harder to determine if a style sheet handles all possible stlyes than downloading and parsing/combining all 100 files.
However the question is the same: It seems that there are many cases when it is not necessary to download all <link /> elements. Are browsers smart enough to detect and use these cases?
Nowadays, you should declare at least 3 or 4 icons to support all browsers, and up to 20+ icons if you want to implement the full range of available icons. There are known issues regarding loading:
link rel="icon" icons; not the Apple touch icons). The root cause is that FF does not support the sizes attribute. If you feel concerned by this, please vote for this bug.sizes attribute. But apparently the Chromium team feels concerned about this./apple-touch-icon-120x120-precomposed.png). So declaring less Touch icons, or even only one Touch icon, may not be a definitive solution: Safari may try to load some icons nonetheless and get 404s.I have no data for Android Chrome or IE.