如何动态更改网站图标？

您可能会注意到，许多社交网络和现代 Web 应用程序都有动态网站图标。动态图标可能用于不同的目的，例如，社交网络使用它来显示通知或消息。一些网站还有基于百分比的图标来跟踪成功的程度，如果您完成了一个级别，则该图标会替换为成功图标。更改网站图标以吸引人们的注意力。您可以在 Web 应用程序的不同页面的不同图标之间旋转。

要动态更改收藏夹图标，我们将创建两个 javascript 函数，分别更改收藏夹图标 GeeksforGeeks 和 Technical Scripter。我们将分配一个常量变量并使用getElementById()函数通过图标 Id 获取它们。之后，我们将创建 2 个功能并为其分配两个按钮。通过悬停这些按钮图标会改变。

下面的示例说明了该方法：
示例：首先，我们将创建一个带有两个按钮的 HTML 页面。这些按钮将有助于使用鼠标悬停来更改网站图标。

  

    Dynamic Favicon
    
    
    
    
    
    
        .btn1 {
            background-image: url('img2.png');
            border: none;
              
        }
        .btn2 {
            background-image: url('img.png');
            border: none;
        }
          
        .container {
            text-align: center;
        }
          
        h1 {
            color:green;
        }
    

  

    
    GeeksforGeeks
    Change favicon with JavaScript
    
    
    
      GeeksforGeeks
    
    
      Tecnical Scripter
    
    
    
        
        // Assign a constant variable and get them by the favicon Id
        const favicon = document.getElementById("favicon");
        
        // Creating a function for the button GeeksforGeeks
        function toRed() {
            favicon.setAttribute("href", "img2.png"); 
        }
        // Creating a function for the button Techiniacl Script
        function toBlue() {
            favicon.setAttribute("href", "img.png");
        }
    
    

  

输出：