Mobile app version of vmapp.org
Login or Join
LarsenBagley505

: Forcing website icon to load early in all web browsers 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

@LarsenBagley505

Posted in: #Assets #Favicon #Icon #Keepalive #Performance

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: www.webpagetest.org/result/150916_J9_C5K/1/details/
Montreal - Chrome: www.webpagetest.org/result/150916_9D_BRS/1/details/
Montreal - Firefox: 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?

10.01% popularity Vote Up Vote Down


Login to follow query

More posts by @LarsenBagley505

1 Comments

Sorted by latest first Latest Oldest Best

 

@Cooney921

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.


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.
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.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme