3

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 have any idea what should I do?

Mateus Barbosa
  • 87
  • 1
  • 13
  • Possible duplicate of [How to use multiple favicons for one site](http://stackoverflow.com/questions/25005936/how-to-use-multiple-favicons-for-one-site) – Eric G May 13 '16 at 20:15
  • I'm voting to close this question as off-topic because it is a blatant request for someone to code a solution. – Tony Hinkle May 13 '16 at 20:46

2 Answers2

5

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 :

<head>
    <title>Favicon Testing</title>
    <!-- References to switch -->
    <link id="icon-a" rel="shortcut icon" type="image/png" href="http://icons.iconarchive.com/icons/icons8/windows-8/16/Numbers-1-icon.png" />
    <link id="icon-b" rel="shortcut icon" type="image/png" href="http://icons.iconarchive.com/icons/icons8/windows-8/16/Numbers-1-icon.png" />
    <meta charset="utf-8" />
</head>
<body>
    <script>
        // Store your current icon
        var current = 0;
        var icons = ['http://icons.iconarchive.com/icons/icons8/windows-8/16/Numbers-1-icon.png', 'http://hakimuzunyol.orgfree.com/Tugce/assets/icons/twitter_23.png', 'https://upload.wikimedia.org/wikipedia/commons/5/5a/T-bane_3_icon.png'];
        // 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);
    </script>
</body>
Rion Williams
  • 74,820
  • 37
  • 200
  • 327
1

You could either create an animated .ico by converting a gif, or you could throw in a bit of javascript to do it. Some ways to do it through js can be found here:

Changing website favicon dynamically

Next time you might want to post what code you've tried, people on here tend to negatively view questions that are open-ended like yours fyi.

Community
  • 1
  • 1
Jayson
  • 940
  • 8
  • 14
  • It's not the same thing! I've seen this post a hundred times and this one the icon changes because of an event – Mateus Barbosa May 13 '16 at 20:21
  • Is it not just calling the function that causes the .ico to change? I would think that's very similar to what Mathias's solution in that link does. – Jayson May 13 '16 at 20:24
  • @MateusBarbosa instead of assigning the function to `btn.onclick`, just pass it as an argument to `setInterval()`. Minimum effort there. – Patrick Roberts May 13 '16 at 20:56