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

javascript html css performance favicon
Sam picture Sam · Mar 4, 2011 · Viewed 49.1k times · Source

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

<link rel="shortcut icon" href="http://hi.org/icon.ico" type="image/x-icon">

But I think it is just silly that for a tiny several-byte icon you need yet another HTTP request. So I wondered, how could I make that image part of a sprite (e.g. background-position=0px -200px;) in order to speed up and save that valuable HTTP request. How can I get this into an existing sprite image with my logo and other artworks?

Answer

James Anderson picture James Anderson · Mar 18, 2011

I think for the most part it does not result in another HTTP request as these are usually dumped in the browser's cache after the first access.

This is actually more efficient than any of the proposed "solutions".

Related questions

Retrieve the position (X,Y) of an HTML element relative to the browser window

I want to know how to get the X and Y position of HTML elements such as img and div in JavaScript relative to the browser window.

Read More
Set cookie and get cookie with JavaScript

I'm trying to set a cookie depending on which CSS file I choose in my HTML. I have a form with a list of options, and different CSS files as values. When I choose a file, it should be saved …

Read More
Failed to load resource: the server responded with a status of 404 (Not Found)

I can't solve my link problem. Could you help on to this to link CSS and JS File? CSS: <link href="../Jquery/jquery.multiselect.css" rel="stylesheet"/> <link href="../Jquery/style.css" rel="stylesheet" /> <link …

Read More