Introducción:
En este tutorial, aprenderemos cómo cambiar el favicon de un sitio web basado en el esquema de color del sistema del usuario. Esto significa que el favicon se mostrará de manera diferente según si el sistema está en modo claro u oscuro. Lo mejor de todo es que lo haremos sin necesidad de usar JavaScript.
Requisitos:
Un editor de texto (como Visual Studio Code).
Conocimientos básicos de HTML.
Paso 1: Preparación de los Favicones
Antes de comenzar, necesitaremos tener dos favicones: uno para el modo claro y otro para el modo oscuro. En mi caso el diseñador me paso una imagen en modo oscuro, es decir solo para la preferencia a modo claro y como desarrolladores con habilidades recursivas debemos ayudar a agilizar este tipo de cosas sin depender de que el diseñador se desocupe para nosotros llevar a acabo este tipo de tareas tan sencillas.
En mi caso utilice esta herramienta online:
https://pinetools.com/es/colorizar-imagen
Paso 2: Estructura Básica del Documento HTML
Creamos un nuevo archivo HTML y escribimos la estructura básica del documento HTML en mi caso lo incluí en el Layout ya que estaba trabajando sobre ASTRO, esto también aplica para aplicaciones de NextJs (en esta caso es un poco distinto debido a la naturaleza del servidor de renderizado y la gestión del ciclo de vida en Next.js, pero si es posible) esta comprobado:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cambio Dinámico de Favicon</title>
<!-- Aquí añadiremos las etiquetas <link> para los favicones -->
</head>
<body>
<h1>Lorem ipsum</h1>
</body>
</html>
Paso 3: Incluir los Favicones en el Documento HTML
Ahora, vamos a incluir los favicones en el documento HTML utilizando las etiquetas con el atributo media:
<head>
<!-- Incluimos el favicon para el modo claro -->
<link href="/fav_negro.ico" rel="icon" media="(prefers-color-scheme: light)">
<!-- Incluimos el favicon para el modo oscuro -->
<link href="/fav_blanco.ico" rel="icon" media="(prefers-color-scheme: dark)">
</head>
Paso 4: Explicación
Utilizamos la etiqueta con el atributo media para especificar el favicon que se debe utilizar según el esquema de color del sistema.
(prefers-color-scheme: light) indica que el favicon se utilizará cuando el sistema esté en modo claro.
(prefers-color-scheme: dark) indica que el favicon se utilizará cuando el sistema esté en modo oscuro.
Paso 5: Verificación
Guarda el archivo HTML y ábrelo en tu navegador. Cambia el tema de tu sistema entre claro y oscuro para ver cómo el favicon se actualiza automáticamente.
Y este fue mi caso:
Conclusión:
¡Felicidades! Has aprendido cómo cambiar dinámicamente el favicon de tu sitio web basado en el esquema de color del sistema del usuario sin necesidad de usar JavaScript. ¡Ahora tu sitio será aún más personalizado y atractivo para tus visitantes!
Top comments (0)