How to change the icon in the head to "loading" during an ajax request?

Question

I have realised that Facebook does that, don't know if any other webpage too. i wanted to know if it was possible using jquery, I have used common loading gifs previously while doing an ajax call but i figure this would be a nice touch. I appreciate your help

possible duplicate of http://stackoverflow.com/questions/260857/changing-website-favicon-dynamically — Apoorv Saxena, Sep 23 '12 at 20:19

Apoorv Saxena · Answer 1 · 2012-09-23T20:22:02.340

1

Here's the procedure to change it:

HTML for your favicon in HEAD:

<link id="favicon" rel="shortcut icon" type="image/png" href="favicon.png" />

You can change the favicon using Javascript by changing the HREF element on this link, for instance (assuming you're using JQuery):

$("#favicon").attr("href","favicon2.png");

edited Sep 23 '12 at 20:22

answered Sep 23 '12 at 20:13

Apoorv Saxena

4,086
10
30
46

I think he is talking about the "favicon"-icon which is shown most likely in a browser-window or tab, not an ordinary image. – jAndy Sep 23 '12 at 20:17
yes, i am aware of the common procedure to do that. what i was wondering was if it is possible to change the icon in the "title" of the page, in order to make it look as it was loading a whole new page. Facebook does something like that, i guess it does it throug javascript, i wondered if anyone knew how to. thanks regardless – Tomas Raies Sep 23 '12 at 20:17

score 1 · Answer 2 · answered Sep 23 '12 at 20:21

The favicon is either transfered automatically by a server HTTP application (just shipping a file called "favicon.ico" which has to be in a specific location) or you can explicitly require it by creating a <link> element.

For instance

<link type="image/x-icon" href="http://server.com/path/name.ico" rel="shortcut icon">

So, of course we can create that programatically too! Using jQuery:

var favIcon = $('<link>', {
    type:    'image/x-icon',
    rel:     'shortcut icon',
    href:    'http://servername.com/path/name.ico'
}).appendTo( document.head || document.getElementsByTagName( 'head' )[ 0 ] );

Now with that basic knowledge, we could switch favicons by removing and creating those <link> elements. So we could just call favIcon.remove() and create another one.

i guess I could change the favicon to another while the page is loading, but is there any way for the browser to show the same image it shows while a webpage is loading? — Tomas Raies, Sep 23 '12 at 20:27

How to change the icon in the head to "loading" during an ajax request?

2 Answers2