Cómo insertar un favicon en tu web WordPress

La gran mayoría de los sitios webs cuentan con una imagen en formato de icono que se encuentra a la izquierda del título del sitio web, el cual lo veas cuando tienes abierto la web en una pestaña del navegador. Probablemente si estás en este post ya sepas lo qué es, pero además enseñarte a agregar uno en WordPress, explicaremos de forma breve en qué consiste un favicon.

¿Qué es un favicon?

Es el icono que representa tu sitio web, cuyo objetivo es hacer más fácil de identificar tu sitio cuando el usuario tiene varias pestañas abiertas en el navegador.

Este icono también aparece en la barra de marcadores, en los resultados de búsqueda de Google y si añades la web a un acceso directo:

La importancia de un favicon

Un favicon mejora la experiencia del usuario, permitiendo reconocer fácilmente a tu sitio y es una oportunidad para fortalecer tu marca, reflejando profesionalismo y destacando a tu sitio por encima del resto.

Características de un favicon

Un favicon debe ser:

· Simple y reconocible: No debe tener detalles complicados, ya que al ser un tamaño tan pequeño no llegarán a apreciarse y se perderán, por lo que debe un diseño sencillo que a la vez permita reconocer a tu marca.

· Tamaño correcto: Generalmente tienen un tamaño de 16x16 o 32x32 píxeles, por lo que es recomendable que la imagen que insertes sea de alguno de estos dos tamaños. En algunos casos se suelen generar versiones más grandes de 48x48, 64x64 o hasta 512x512 para asegurar la compatibilidad con diferentes dispositivos.

· Colores acordes a tu marca: La estética de tu favicon tiene que ser coherente con los colores que usas en tu sitio web.

· Formato de imagen: Los formatos más comunes son .ico, .png y .svg.

¿Cómo agregar un favicon en WordPress?

Existen diferentes formas de que puedas poner tu favicon en WordPress, aquí te explicaremos cada una:

1. Desde Personalizar

Antes que nada, debes tener un tema que utilice el Editor de sitio. Esto lo hacen la mayoría de los temas: Astra, Hello Elementor, Neve y un largo etcétera. El problema es con los temas que trae por defecto WordPress, que utilizan el Editor de bloques y desde WordPress 6.0 la opción de Personalizar que se encontraba dentro de Apariencia no se encuentra habilitada por defecto. Es por ello que primero deberemos instalar un tema. Para este ejemplo instalé Neve, pero el tutorial sirve para cualquiera.

Estos son los pasos a seguir:

1. Puedes instalar cualquier tema yendo al botón que dice Añadir nuevo tema:

2. Aquí WordPress te ofrecerá una amplia variedad de temas para que puedas escoger:

3. Una vez te decides por uno, le das a Instalar y luego a Activar para tener el tema en funcionamiento.

Ahora sí, con nuestro tema instalado, nos dirigimos a Personalizar:

Ahora utilizamos el buscador y buscamos por “Identidad del sitio” o “Icono del sitio” y seleccionamos la opción que haga referencia al icono o logotipo:

Allí podrás agregar la imagen dándole a Seleccionar el icono del sitio, dónde podrás cargar la imagen de la Biblioteca de medios o directamente la puedes subir desde tu ordenador.

Una vez subida la imagen le damos a Publicar y cuando ingresemos a la web tendremos nuestro favicon:

2. Con un plugin

WordPress cuentan con plugins que simplifican el proceso, a los cuales les cargamos la imagen y la extensión se ocupa de realizar el proceso de convertir al tamaño soportado para el favicon.

Si vas al apartado de Plugins, verás muchas opciones que te permiten insertar tu favicon, para este ejemplo lo haremos con Favicon by RealFaviconGenerator:

Una vez instalado y activado, nos dirigimos nuevamente a Apariencia y tendremos una nueva sección llamada “Favicon”. Allí simplemente cargamos la URL o la imagen desde la biblioteca de medios o de forma local. Una vez cargado, le damos al botón de Generar el favicon.

Después de darle al botón nos enviará a una página web en dónde nos permitirá personalizar con múltiples opciones nuestro favicon y nos mostrará cómo se verá en cada contexto (modo oscuro, en móvil, acceso directo, .etc). Cuando hayamos terminado, nos vamos al botón de Generate and install favicon:

¡Y con esto ya tendremos listo nuestro favicon! El plugin nos mostrará cómo se verá:

3. Insertarlo manualmente

Otra alternativa que permite WordPress es hacerlo a mano la inserción del favicon. Para ello necesitaremos de una herramienta para generar el favicon, como por ejemplo, la del plugin que hemos utilizado anteriormente, Real Favicon Generator. Allí, insertamos la imagen que deseamos convertir a un favicon:

Como hicimos con el plugin, podremos ajustar la imagen con las diferentes opciones que nos ofrecen. Si no nos interesan, seguimos de largo y pasamos al siguiente paso, en dónde nos dejará descargar el paquete que contiene el favicon y nos mostrará los códigos en los diferentes lenguajes de programación que nos ofrece para implementarlo. Para este tutorial usaremos el de HTML_

Ahora debes subir el paquete del favicon al directorio raíz de tu web,lo puedes hacer a través de FTP o accediendo a tu panel de hosting como Plesk o DirectAdmin. Cuando tengas el archivo subido, lo siguiente será ir al archivo header.php del tema que estás utilizando, a este puedes acceder desde el apartado de Aparienciab insertar el código que te había proporcionado Real Favicon Generator dentro de la sección dónde se encuentra la etiqueta <head>:

Debes asegurarte de que tanto el dominio como la ruta del favicon sean las correctas para tu sitio web.

¿Cómo crear un tema hijo en Magento 2.4?