如何使用 JavaScript 动态更改网站的 Favicon？

动态更改网站图标

在 Web 开发领域，自定义用户体验通常涉及使网站的外观与登录用户的偏好保持一致。可能需要定制的一方面是网站的图标。这个微小但有影响力的图标代表了浏览器选项卡和书签中的品牌。

动态更改图标

根据自有标签动态更改图标的任务是一项挑战。您可能已经设想了一种解决方案，其中涉及存储一组图标并在 HTML 页面生成过程中引用相应的图标。

JavaScript 来救援

幸运的是，有一个简单的 JavaScript 解决方案可以解决此问题：

var link = document.querySelector("link[rel~='icon']");
if (!link) {
    link = document.createElement('link');
    link.rel = 'icon';
    document.head.appendChild(link);
}
link.href = 'https://stackoverflow.com/favicon.ico';

在此代码中：

• document.querySelector定位现有的 rel 属性包含字符串“icon”的元素。
• 如果没有找到这样的元素，则会创建一个新的 。元素被创建，其 rel 属性设置为“icon”。
• 新创建或检索的元素被附加到 上。
• 最后， 的 href 属性元素设置为所需的 favicon 图像的 URL。

通过动态更新 href 属性，您可以切换浏览器选项卡或书签中显示的 favicon。通过将网站的品牌与活跃用户的偏好保持一致，可以有效地定制用户体验。

以上是如何使用 JavaScript 动态更改网站的 Favicon？的详细内容。更多信息请关注PHP中文网其他相关文章！