How to change a Favicon dynamically using JavaScript
In this post we will give you information about How to change a Favicon dynamically using JavaScript. Hear we will give you detail about How to change a Favicon dynamically using JavaScriptAnd how to use it also give you demo for it if it is necessary.
we are going to learn about how to change a webpage favicon dynamically using JavaScript.
Getting started
Let’s start with an Html markup.
<head> <title>Dynamically change icons</title> <link rel="icon" href="https://angular.io/assets/images/favicons/favicon.ico"/></head><div> <button id="react">Change to react favicon</button> <button id="google">Change to google favicon</button></div>
In the above markup, we have added default favicon using the link tag then we added two-button elements that are used to change the favicon.
Changing favicon dynamically
To change a favicon dynamically first, we need to access the favicon element using the document.querySelector() method then set a new favicon by assigning a value to the href property.
// accessing the faviconconst favicon = document.querySelector('[rel=icon]');const react = document.getElementById('react');const google = document.getElementById('google');react.addEventListener('click',()=>{ // setting new favicon favicon.href = "https://reactjs.org/favicon.ico";})google.addEventListener('click',()=>{ // setting new favicon favicon.href = "https://www.google.com/favicon.ico";})Now, if we click on Change to react favicon button our favicon is changed to react favicon or if we click on Change to google favicon button our favicon is changed to google favicon.
Hope this code and post will helped you for implement How to change a Favicon dynamically using JavaScript. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs