1

My goal is to allow a small keepalive timeout (of about 3 seconds) with a max of about 5 requests, just enough for the page HTML, page assets, and the page icon. So far, every browser loads nearly all page components at the beginning however it seems that Chrome and IE 8 load the icon towards the end.

The only browser that seems to have everything loaded correctly and in the right order is Firefox. I inserted this line between <head> and </head> of my HTML:

<link rel="icon" href="http://example.com/favicon.ico" type="image/x-icon">

The only effect it had with the HTML processing is that I was able to specify the location of the favicon that I wanted to use, but it did not load the icon early. This declaration even came before any reference to any other external file.

These are the test results:

Toronto - IE 8: http://www.webpagetest.org/result/150916_J9_C5K/1/details/

Montreal - Chrome: http://www.webpagetest.org/result/150916_9D_BRS/1/details/

Montreal - Firefox: http://www.webpagetest.org/result/150916_K1_C42/1/details/

Is there any way I can force the icon to load early in all browsers (preferably before first object in any advertisement loads)? or am I stuck with increasing keep-alive time to compensate for advertisement loading time?

Improve this question

1 Answer 1

Reset to default
1

If you really want to set a small keepalive timeout. You can do that.

NOTE: the tests are no longer available on webpagetest, so I couldn't see them. I'm assuming that the connection isn't used for a few seconds and then the favicon is requested.

You have two options.

  1. Accept that a new connection is required the first time the favicon is requested. However make sure the favicon is then cached in the browser. So this only happens on the first visit.
  2. You can inline the favicon using a data-URI. Like this <link href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABmJLR0T///////8JWPfcAAAACXBIWXMAAABIAAAASABGyWs+AAAAF0lEQVRIx2NgGAWjYBSMglEwCkbBSAcACBAAAeaR9cIAAAAASUVORK5CYII=" rel="icon" type="image/x-icon" />

You can create a data-uri from a file here. This is supported in most browsers, but if you need to support old IE versions you may need a fallback. Details on caniuse.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.