How can I make my FavIcon change constantly?
Question
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?
2 answers
solution1
5 ACCPTED 2016-05-13 20:17:57
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 :
Javascript Approach and Example
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>
solution2
1 2016-05-13 20:17:17
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.