Elevate Your Website's Look: Dynamic Favicon with React
Tags: react, javascript, favicon, webdev
Published: 2024-02-17 22:32:37

Elevate Your Website's Look: Dynamic Favicon with JavaScript
"Revamp Your Website with Dynamic Favicon in JavaScript"

> **Problem**: 🔕🧾
>  A client requested that the favicon be changed depending on whether the user opened the tap
> To set a specific icon
> Or open a different tap
> Another icon appears

## In the end, the icon will look like this

**When the user is in the tap
**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6bokuf6eywytpezvfkrw.png)



**When the user is in the different tap
**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rvkjoml57weio52dm88u.png)







Unlock the potential of your website's visual appeal by adding a dynamic touch to its favicon. In this tutorial, you'll discover how to seamlessly change your site's favicon based on the time of day using JavaScript. Elevate your web development skills and give your users a personalized and engaging experience.
 

> It's all about
> is Document: [visibilitychange event](https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilitychange_event)



**Article:**
```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Ret</title>
    <script type="module" src="/src/main.jsx"></script>
  </head>
  <body>
    <div id="root"></div>
    
    <script>
      // Get the current hour
      var currentHour = new Date().getHours();
      
      // Define the day and night icons
      var dayIcon = "/day-icon.svg";
      var nightIcon = "/night-icon.svg";
      
      // Choose the appropriate icon based on the current hour
      var iconPath = currentHour >= 6 && currentHour < 18 ? dayIcon : nightIcon;
      
      // Set the favicon dynamically
      var linkElement = document.querySelector("link[rel='icon']");
      linkElement.href = iconPath;
    </script>
  </body>
</html>
```

---


**The icon changes depending on whether the user has opened the page or not**

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/onpage.svg" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>my stite </title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
    <script >
var linkElement = document.querySelector("link[rel='icon']");
  window.addEventListener('visibilitychange', () => {
    linkElement.href = document.hidden ? "start.png":"onpage.svg";
});
    </script>
  </body>
</html>

```

---


**Pausing music on transitioning to hidden**

```JS
document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === "visible") {
    backgroundMusic.play();
  } else {
    backgroundMusic.pause();
  }
});
```

for icons [https://icons8.com/icons](https://icons8.com/icons)

Upgrade your website's user experience by implementing this simple JavaScript trick. Learn the step-by-step process and make your site more professional and visually appealing. Don't miss out on this opportunity to stand out in the competitive world of web development! 🌐✨ #javascript #webdevelopment #favicon #programmingtips