Isn't it silly that a tiny favicon requires yet another HTTP request? How can I put the favicon into a sprite?

Question

Everybody knows how to set up a favicon.ico link in HTML:

Answer 1

I'm sorry, but you can't combine the favicon with another resource.

This means you have basically two options:

1. If you're comfortable with your site not having a favicon - you can just have the href point to a non-icon resource that is already being loaded (e.g. a style sheet, script file, or even some resource that benefits from being pre-fetched.)
   (My brief testing indicates that this works across most, if not all, major browsers.)

2. Accept the extra HTTP request and just make sure your favicon file has aggressive HTTP cache-control headers set.
   (If you have other websites under your control, you might even have them sneakily preload the favicon for this website - along with other static resources.)

P.S. Creative solutions that will not work:

• The the weird CSS data-uri trick (linked to by commenter Felix Geenen) does not work.
• Using Javascript to perform a delayed injection of the favicon element (as suggested by user @yc) will likely just make things worse - by resulting in two HTTP requests.