WordPress

Cómo Cambiar el Color del Favicon para Modo Oscuro (Dark Mode) en WordPress

Cuando subes una imagen de favicon en el personalizador de WordPress, se ofrece una útil vista previa para ver cómo aparecerá tu favicon en los navegadores que utilizan el modo claro u oscuro.

Cuando el color del favicon no funciona bien con el modo oscuro, una solución común es reemplazar el PNG transparente con un JPG que tiene un fondo blanco, pero entonces terminas con un cuadrado blanco en el modo oscuro.

Como alternativa, puedes utilizar un SVG para el favicon y modificar el estilo del favicon en función de la combinación de colores.

Crear favicon SVG

Cree un SVG cuadrado con el icono que desee. Tendrá un aspecto similar al siguiente:

<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
	<path fill="#0F145B" d="......" />
</svg>

Elimine cualquier estilo de las formas en el SVG y añade esos estilos con CSS en línea.

Puede utilizar @media ( prefers-color-scheme: dark ) para dar un estilo diferente a la versión en modo oscuro. Este es el aspecto que tiene ahora mi SVG:

<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
	<style>
		path {
			fill: #0F145B;
		}
		@media ( prefers-color-scheme: dark ) {
			path {
				fill: #43C1C5;
			}
		}
	</style>
	<path d="....." />
</svg>

Añade un favicon SVG a tu tema

He añadido mi favicon.svg al directorio de mi tema /assets/images/ pero puedes añadirlo en cualquier lugar de tu tema.

Añade el siguiente código al archivo functions.php de tu tema para incluir el favicon SVG.

/**
 * SVG Favicon
 */
function be_svg_favicon() {
	echo '<link rel="icon" href="' . esc_url( get_stylesheet_directory_uri() . '/assets/images/favicon.svg' ) . '" type="image/svg+xml">';
}
add_action( 'wp_head', 'be_svg_favicon', 100 );

Parece que el favicon SVG tiene prioridad sobre el generado por WP, independientemente de si aparece antes o después en el marcado de la página, pero tengo la prioridad establecida en 100 para que aparezca después, por si acaso.

Incluso con este enfoque, deberías subir una versión JPG del favicon en el personalizador de WordPress. Todavía hay muchos navegadores que no soportan los favicones SVG, por lo que querrás tener una alternativa.

Adicionalmente, quizás pueda interesarte nuestro tutorial para saber cómo crear favicons dinámicos que cambian de color en WordPress..

Etiquetas

Publicidad

Síguenos en Facebook