Change Favicon on Tab Change

Question

I'd like to change my favicon and browser tab text when a user navigates away to another browser tab. Does anyone know of a simple way to do this?

Don't cache that value and redegine it. – Robin Jun 28 '15 at 21:06 — Robin, Jun 28 '15 at 21:06

score 1 · Accepted Answer · edited May 23 '17 at 12:30

1

Use the window.onblur event to change document.title and the favicon. Changing favicons in some browsers can be tricky. See stackoverflow.com/questions/260857/changing-website-favicon-dynamically/260876#260876 for more info.

window.onblur=function(){
    //change favicon
    document.title="bye";
}
window.onfocus=function(){
    document.title="hello";
}

edited May 23 '17 at 12:30

Community

answered Jun 28 '15 at 21:24

sudo rm -rf slash

score 0 · Answer 2 · edited May 23 '17 at 12:30

The simplest way to achieve this would be to use javascript to detect if the tab is active:

Start with this next line in your <head></head>

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

Using the javascript example linked above to check if the tab is no longer active change the href to the new directory location like so using jquery.

$("#changingFavicon").attr("href", "http://newlocation.com/favicon.png");

2 Answers2