I want to notify users for new ining messages when they are browsing other browser tabs.

First I have to set a blinking red bot as a favicon (the problem here is that Google Chrome doesn't support GIF animations as favicon)

$('#favicon').attr('href','_/css/img/favicon.gif');

is there a way to loop through two images one red and one white form 500ms each?

setInterval(function() {
    $('#favicon').attr('href','_/css/img/red.png');
}, 500);

How do I do a loop of 500ms for two icons?

I want to notify users for new ining messages when they are browsing other browser tabs.

First I have to set a blinking red bot as a favicon (the problem here is that Google Chrome doesn't support GIF animations as favicon)

$('#favicon').attr('href','_/css/img/favicon.gif');

is there a way to loop through two images one red and one white form 500ms each?

setInterval(function() {
    $('#favicon').attr('href','_/css/img/red.png');
}, 500);

How do I do a loop of 500ms for two icons?

• javascript
• jquery
• favicon

2 Answers 2

Use a variable and toggle it each time you change:

var red=1; 
setInterval(function() {  
    if (red==1) { 
        red=0;
        $('#favicon').attr('href','_/css/img/white.png');
    } else { 
       red=1;
       $('#favicon').attr('href','_/css/img/red.png');
    }
}, 500);

Plain Javascript it the simplest solution, and such answer was already given.

As an alternative, you can use favicon.js to play a video as the favicon. You could achieve this by converting your existing GIF to a video and then play it with favicon.js. The advantage of this solution is that your animation can be as plex as you want.