3

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:

  • Default favicon
  • iOS favicon
  • Microsoft favicon and tiles
  • Android favicon
  • Safari tabs icons
  • Chrome icons
  • ...

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?

Andrei Herford
  • 17,570
  • 19
  • 91
  • 225
  • I am sorry, but I do not understand what you are trying to say... – Andrei Herford Mar 15 '16 at 15:51
  • Sorry I meant to say, it should be using the `` tag. Well, your question is confusing. Even after reading it fully, unable to understand. The `` tags are loaded when they are seen by the parser. – Praveen Kumar Purushothaman Mar 15 '16 at 15:53
  • @PraveenKumar The `link` tags contain enough information for the browser to skip some of them. For example, the `sizes` attribute let you declare several icons with different sizes: if a browser decides the 32x32 is the best, one could suppose it won't load the 16x16 icon, too. But is that really the case? I think this is the meaning of the question. Well, I hope so, because I've spent quite some time answering it ;-) – philippe_b Mar 15 '16 at 21:40
  • Andrei, if @philippe_b has it right, please [edit] your question with the information. You should clarify and narrow it regardless. If it gets put on hold or closed in the mean time, you can still flag it to be reopened after editing it. – Mogsdad Mar 16 '16 at 21:07

2 Answers2

1

Assuming the response from:

How to prevent favicon.ico requests?

in Chrome and Android an IFRAME will generate 3 requests for favicons:

"GET /favicon.ico HTTP/1.1" 404 183 "GET /apple-touch-icon-precomposed.png HTTP/1.1" 404 197 "GET /apple-touch-icon.png HTTP/1.1" 404 189

And from: Will browsers request /favicon.ico or <link> first?

I guess that the browsers requests all the favicons in the <link> first, if no specified, then search for 'favicon' in the root of the folder.

FYI: You can take a look at: https://github.com/audreyr/favicon-cheat-sheet too to get more info! Hope it helps!

Community
  • 1
  • 1
JP. Aulet
  • 4,375
  • 4
  • 26
  • 39
1

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:

I have no data for Android Chrome or IE.

philippe_b
  • 38,730
  • 7
  • 57
  • 59