Mateus Barbosa Mateus Barbosa - 2 years ago 105
Javascript Question

How can I make my FavIcon change constantly?

I've been looking for a javascript explanation of how can I change my favicon constantly but I couldn't find anything.

I have 6 favicons and I'm trying to make then switch in an order to make kind of an animation. And my problem is that I need that the icons change dynamically but automatically every 2 seconds in a loop like ico1, ico2, ico3, ico4, ico5, ico6, ico1, ico2...

See this site's Favicon as an example

Someone can please suggest something I could do?

Answer Source

Consider Using a .gif

It's worth noting that some browsers actually support the use of animated .gif images as Favicons, which might be favorable as opposed to using a Javascript-based solution :

enter image description here

Javascript Approach and Example

enter image description here

A Javascript approach might involve storing your icons within an array and using the setInterval() function to define your interval to switch them :

    <title>Favicon Testing</title>
    <!-- References to switch -->
    <link id="icon-a" rel="shortcut icon" type="image/png" href="" />
    <link id="icon-b" rel="shortcut icon" type="image/png" href="" />
    <meta charset="utf-8" />
        // Store your current icon
        var current = 0;
        var icons = ['', '', ''];
        // Every 2 seconds, switch your icon
        setInterval(function () {
            // Determine the next icon
            var icon = (++current % icons.length);
            // Grab the URL to use
            var url = icons[icon];
            // Update your elements
            document.getElementById('icon-a').href = url;
            document.getElementById('icon-b').href = url;
        }, 2000);
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download