Probablemente notará que muchas redes sociales y aplicaciones web modernas tienen favicons dinámicos. Los favicons dinámicos pueden tener diferentes propósitos, por ejemplo, las redes sociales lo usan para mostrar notificaciones o mensajes. Algunos sitios web también tienen el favicon basado en porcentajes que rastrea los niveles de éxito, y si completa un nivel, el favicon se reemplaza con un ícono de éxito. El favicon se cambia para captar la atención de las personas. Puede rotar entre diferentes íconos para diferentes páginas de su aplicación web.
Para cambiar los favicons dinámicamente, crearemos dos funciones javascript, para cambiar los favicons GeeksforGeeks y Technical Scripter respectivamente. Asignaremos una variable constante y la obtendremos por el Id de favicon con la función getElementById() . Después de eso, crearemos 2 funciones y asignaremos dos botones para eso. Al pasar el cursor sobre esos botones, el favicon cambiará.
El siguiente ejemplo ilustra el enfoque:
Ejemplo: Para empezar, crearemos una página HTML con dos botones. Estos botones ayudarán a cambiar el favicon usando el mouse.
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Favicon</title>
<!-- Default favicon image -->
<link id="favicon" rel="icon"
href="image_name.png"
type="image/png"
sizes="16x16">
<!--To style the Buttons-->
<style>
.btn1 {
background-image: url('img2.png');
border: none;
}
.btn2 {
background-image: url('img.png');
border: none;
}
.container {
text-align: center;
}
h1 {
color:green;
}
</style>
</head>
<body>
<div class="container">
<h1>GeeksforGeeks</h1>
<h3>Change favicon with JavaScript</h3>
<!--Creating buttons to change favicons on
the hover of the mouse on the button-->
<button class="btn1" type="button" onmouseover="toRed()">
GeeksforGeeks
</button>
<button class="btn2" type="button" onmouseover="toBlue()">
Tecnical Scripter
</button>
<script>
// 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");
}
</script>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por KanishkaLahori y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA