Question

在HTML中，您可能会执行类似link rel="icon" type="image/x-icon" href="IMG/favicon.ico"的操作，并且您的网页上会有一个图标。我想知道我是否有多个图标（favicon2.ico，favicon3.ico等），有没有办法让浏览器从文件夹中的图标文件中随机分配一个图标？

因此，一个用户可能会加载页面并获得favicon2作为页面图标，而另一个用户可能会获得favicon3，这可能吗？

Answer 1

您可以通过在页面加载时通过添加javascript来动态加载它：

let fav_num = Math.floor(Math.random() * 10);

        let favicon = document.createElement('link');
        favicon.rel = 'icon';
        favicon.href = `IMG/favicon${fav_num}.ico`;

        document.head.appendChild(favicon);

Answer 2

只需为目录中的一系列所需收藏图标文件分配编号。然后为文档头中的链接分配一个ID。

收藏夹图标的href可以使用js进行更改，然后在页面加载时进行更改。

// HTML
    <link id="fav-ico" rel="shortcut icon" href="favicon-0.ico">

// JS

    let num = Math.floor(Math.random() * 10);
    let favIco = document.querySelector('#fav-ico');

    favIco.href = "path/to/file/favicon-" + num + ".ico"

Answer 3

您可以使用javascipt获得随机Favicon。

要获得结果：

将收藏夹图标添加到文件夹（'./'）或其他任何文件夹的根目录（收藏夹名称的前缀路径）
像这样向链接元素添加ID。

<link id="favicon" rel="shortcut icon" href="./favicon1.ico" type="image/x-icon">

然后添加JS脚本以获取随机的Favicons（在这里，我将其替换为3个favicon，更多图标只需将3替换为图标数量）

查找附带的代码段。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link  id="favicon" rel="shortcut icon" href="./favicon1.ico" type="image/x-icon">
    <title>Document</title>
    <script>
    let faviconElem = document.getElementById('favicon');
    faviconElem.setAttribute('href',`./favicon${Math.floor(3*Math.random())+1}.ico`);
    </script>
</head>
<body>
    
</body>
</html>

如何随机分配网页图标？

3 个答案: