简体   繁体   English

如何让我的FavIcon不断改变?

[英]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. 我一直在寻找一个javascript解释,我怎么能不断更改我的图标,但我找不到任何东西。

I have 6 favicons and I'm trying to make then switch in an order to make kind of an animation. 我有6个favicons,我正在尝试按顺序切换以制作动画。 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... 而我的问题是,我需要动态但动态地每隔2秒自动更改一次,如ico1,ico2,ico3,ico4,ico5,ico6,ico1,ico2 ...

See this site's Favicon as an example 以此网站的Favicon为例

Someone have any idea what should I do? 有人知道我该怎么办?

Consider Using a .gif 考虑使用.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 : 值得注意的是, 有些浏览器实际上支持使用动画.gif图像作为Favicons ,这可能是有利的,而不是使用基于Javascript的解决方案:

在此输入图像描述

Javascript Approach and Example Javascript方法和示例

在此输入图像描述

A Javascript approach might involve storing your icons within an array and using the setInterval() function to define your interval to switch them : Javascript方法可能涉及将您的图标存储在数组中,并使用setInterval()函数来定义切换它们的时间间隔:

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

You could either create an animated .ico by converting a gif, or you could throw in a bit of javascript to do it. 您可以通过转换gif来创建动画.ico,或者您可以投入一些javascript来执行此操作。 Some ways to do it through js can be found here: 可以在此处找到通过js执行此操作的一些方法:

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. 下次你可能想要发布你尝试过的代码时,这里的人往往会像你的fyi一样负面地看待开放式的问题。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM