Logo Socratech
Contacto

Favicon dinámico: adaptable a modo claro y modo oscuro

Favicon dinámico para el modo claro y modo oscuro con SocraTech

Si quieres que un favicon dinámico para tu página web que cambie según si se utiliza el modo claro u oscuro del navegador, échale un vistazo al siguiente video de Sergio, nuestro profesor del bootcamp, que te enseñará cómo llevarlo a cabo con HTML.

Aceptar el consentimiento para ver esto

Como puedes ver en el vídeo, Sergio utiliza el atributo media para diferenciar el logo que quiere que se muestre según el modo del navegador y conseguir así el favicon dinámico. De esta forma, se obtiene como resultado el siguiente código:

				
					<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="icon" href="./white-favicon.png" media="(prefers-color-scheme: dark)" />
        <link rel="icon" href="./blue-favicon.png" media="(prefers-color-scheme: light)" />
        <title>Favicon</title>
    </head>
    <body></body>
</html>

Puedes utilizar este código para implementar un favicon dinámico en tu proyecto insertando en el atributo href la ruta del archivo favicon que deseas establecer con cada modo.

Si quieres aprender más sobre HTML y otras tecnologías relacionadas con el desarrollo web, apúntate a nuestro Bootcamp Full Stack Web Developer y conviértete en profesional.

Imagen de Carlos Yáñez

Carlos Yáñez

Ingeniero Informático, con más de 15 años de experiencia en el sector IT, reconocido a nivel nacional por su experiencia en formación, Inteligencia Artificial y nuevas tecnologías, Carlos se especializa en formación de plantillas corporativas en el uso de IA Generativa (ChatGPT, Claude y Gemini). Galardonado con el Premio Educa Abanca al Mejor Docente de España y Premio Nacional de Tecnología, Carlos fusiona en sus clases su conocimiento técnico con una metodología práctica. Su misión actual es ayudar a equipos a integrar la IA en sus procesos de trabajo diario, multiplicando su productividad, automatizando procesos y optimizando la toma de decisiones.
Más información

Otros posts relacionados...