CODEWITHSUNDEEP
javascriptjqueryfavicon
medk
medk

Reputation: 9529

Animated Favicon for notification

I want to notify users for new incoming 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?

Upvotes: 2

Views: 3842

Answers (2)

philippe_b
philippe_b

Reputation: 41308

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 complex as you want.

Upvotes: 2

fdomn-m
fdomn-m

Reputation: 28611

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);

Upvotes: 6

Related Questions