Cambie el favicon al cambiar las pestañas del navegador en JavaScript

Cambie el favicon al cambiar las pestañas del navegador en JavaScript — Amit Merchant — Un blog sobre PHP, JavaScript y más

 

Estaba navegando a través de mi feed de Twitter y vi algo bastante sutil pero alucinante. Uno de los muchachos del equipo Astro estaba mostrando algunos de los nuevas cosas hicieron para la renovación de su marca.

Una de las cosas que me llamó la atención es el favicon que cambia cuando cambias entre las pestañas del navegador.

Esencialmente, el favicon cambia a una versión en escala de grises del favicon original cuando la pestaña está inactiva y vuelve al favicon original cuando la pestaña está activa.

¡Se veía genial!

Incluso compartieron cómo lo hicieron. Así que decidí probarlo en mi aplicación Notepad. Esto es lo que parece.

Cambiar favicon al cambiar las pestañas del navegador en JavaScript

Bastante enfermo, ¿verdad?

Aquí está el código que hace esta magia.

const favicon = document.querySelector('link[rel="icon"]')

document.addEventListener("visibilitychange", () => {
    const hidden = document.hidden

    favicon.setAttribute(
        "href", 
        `/favicon${hidden ? "-hidden" : ""}.ico`
    )
})

Como puede ver, primero buscamos la instancia de favicon usando el querySelector() método. y luego el visibilitychange El evento se usa para detectar cuándo el contenido de la pestaña está oculto o visible. Y en base a eso, podemos manipular el favicon.

Para que esto funcione, todo lo que hice fue crear un favicon-hidden.ico archivo (que es una versión en escala de grises del favicon original). Y luego cambió el href atributo de la link elemento a la favicon-hidden.ico archivo usando setAttribute() cuando la pestaña está oculta. Y volvió al favicon original cuando la pestaña está visible.

 

Si quieres conocer otros artículos parecidos a Cambie el favicon al cambiar las pestañas del navegador en JavaScript puedes visitar la categoría Código.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas