Cómo poner o cambiar el Favicon en WordPress (Con y sin plugins)

Hoy en día hay tanta competencia, que si vas en serio con tu proyecto es fundamental crear una imagen de marca potente, y entre otras muchas cosas; añadir un favicon a tu página web en WordPress, ayuda a diferenciarte.

 

Eso sí, antes de comenzar, déjame recordarte que si lo deseas, tienes a tu alcance la posibilidad de descargar mi manual WordPress avanzado con el que convertirte en todo un especialista desde cero y paso a paso. No te lo pienses mucho, ¡que es gratis!

¿Qué es un favicon?

Por si aún no sabes de qué estoy hablando, un favicon no es más que la pequeña imagen que sale en la pestaña del navegador cuando abres cualquier cada página web, junto al título de la misma. Es decir, es como se llama al icono de las páginas web.

La idea, es que cuando tienes varias pestañas abiertas en tu navegador, gracias al favicon de cada página, puedes identificar por norma general, a qué web visitada pertecene cada una, sin tener que abrir todas ellas.

La principal peculiaridad del favicon, es que a no ser que uses un plugin o el personalizador de WordPress, es necesario que la imagen que decidas añadir mediante el código HTML oportuno sea en formato .ico, pero todo esto lo veremos un poco más adelante en profundidad.

Y es que la mayoría de programas de edición (como Photoshop por ejemplo) no permiten guardar imágenes en formato .ico, por lo que será necesario usar algún conversor online gratuito que haga el trabajo por nosotros.

No te preocupes, más adelante te diré cuál es el mejor creador de favicons online que uso en todos mis proyectos, para que tú también puedas sacarle partido.

Cómo crear un Favicon para WordPress a partir de una imagen en 2024

Por lo general un Favicon tiene un tamaño de 16×16 píxeles, y en la actualidad existen infinidad de herramientas para crearlas.

A pesar de que varios navegadores o browsers ya admiten favicons en formato GIF, PNG u otros, algunas versiones de Internet Explorer aún requieren que los favicons estén en formato .ico, por lo que, dado lo fácil que es crearlos, te recomiendo añadir este formato y así cubrir todas las opciones.

Para resolver este problema compartiré contigo una herramienta donde podrás crear de manera sencilla y fácil un favicon.ico tan sólo añadiendo una imagen en cualquier formato multimedia GIF, PNG o JPEG y dejando que este convertidor online, lo transforme en un archivo .ico para que no tengas problemas de compatibilidad entre navegadores.

Esta herramienta también te permite crear favicons desde cero a través de un práctico editor en línea y además, con este editor también podrás modificar manualmente los favicons generados para garantizar el mejor resultado posible.

Qué mas se puede pedir ¿no?

La herramienta que te comento es: https://www.favicon-generator.org/ y es la que yo uso para todos mis proyectos y los de mis clientes.

Si observamos la interfaz de esta herramienta es bastante sencilla:

1. Una vez tengas tu diseño en formato JPG, PNG o GIF solo basta con arrastrarlo a la ventana de la herramienta o presionar el botón “Seleccionar archivo” y buscar la foto que quieras editar.
2. Después, debes seleccionar si crear solo un Favicon de 16×16 píxels para usarlo en una página web o también crear iconos multi-dispositivo para cuando alguien guarda tu URL en su teléfono Apple, Android, Windows Phone etc (te recomienda esta última opción).
3. Aquí debes seleccionar si quieres mantener la imagen en su tamaño original y agregar el nuevo favicon a su galería pública.
4. Por último, presiona el botón “Create Favicon” y listo, te llevará a una interfaz donde descargar tu favicon creado a partir de una imagen con instrucciones para insertarlo en tu plantilla WordPress a partir de etiquetas HTML (veremos paso a paso cómo hacerlo a continuación).

Cómo añadir el Favicon en WordPress en 2024

Ahora que ya hemos creado de cero o generado nuestro favicon para nuestra página web WordPress a partir de una imagen, sólo nos queda añadirlo o cambiar el actual.

Este proceso es bastante sencillo y para ello hay varias soluciones posibles:

Insertar favicon mediante etiquetas HTML en la plantilla de WordPress

Como te expliqué en párrafos anteriores, la mejor manera de insertar un favicon en WordPress es añadiendo unas líneas HTML en el archivo header.php de tu child theme de WordPress para así no tener que depender de ningún plugin.

Este proceso es muy sencillo, sólo tienes que seguir estos pasos:

• Una vez descargado tu favicon ya editado, debes guardarlo en la biblioteca de medios de WordPress y copiar su URL.
• Abre el archivo header.php de tu plantilla WordPress y añade las líneas que te dejo a continuación antes de la etiqueta </head> y guardar los cambios.

<link rel="shortcut icon" href="PEGA AQUÍ LA RUTA DE LA IMAGEN" type="image/x-icon">.

Sustituye el texto PEGA AQUÍ LA RUTA DE LA IMAGEN (no borres las comillas) que verás en el código, por la URL de la imagen que quieras añadir como favicon. Puedes copiarla directamente desde la biblioteca de medios en WordPress y…

¡Listo!

Si has aplicado los pasos de manera correcta tal y como acabamos de ver, ya deberás tener tu Favicon en tu WordPress (vacía la caché de tu navegador web si aún no te aparece).

Eso sí, debes tener en cuenta, que este método, aunque es el más recomendable ya que te ahorra instalar plugins adicionales para una tarea tan simple, sólo servirá mientras estés usando esta plantilla.

Si decides cambiarla, o actualizarla sin tener un child theme creado, este favicon se dejará de mostrar y tendrás que volver a añadir estas líneas en el nuevo theme.

¿No te convence? ¿Sientes pánico cada vez que oyes hablar de tocar el código de la web?

¡No problem!

Aquí tienes soluciones alternativas y de lo más fácil de implementar en forma de plugin para añadir favicons en WordPress.

¡Seguimos!

Cuáles son los mejores plugins WordPress para instalar un Favicon en 2024

Si prefieres una solución más «duradera» e independiente de la plantilla que uses, siempre puedes usar alguno de los plugins gratuitos del repositorio que realizan esta función:

All In One Favicon

Como ya hemos visto, la principal ventaja de usar esta opción, es que es un plugin con el que si actualizamos o cambiamos nuestro tema o plantilla WordPress, no se perderá el favicon que se haya añadido.

Por contra, cargarás tu instalación con un plugin extra para realizar una simple tarea que puedes realizar, tal y como hemos visto, pegando dos líneas en tu archivo header.php.

Tú decides.

Como añadido extra, este plugin te ofrece la posibilidad de alternar el Favicon entre la parte visual de tu web (lo que ven los lectores) y otro para la parte de administración.

Además, su interfaz es bastante sencilla, sólo debes seleccionar el formato que vas a subir, (no necesariamente tiene que ser .ico) y después pulsar en «Guardar cambios» para ver el resultado de inmediato.

Favicon by RealFaviconGenerator

Otro plugin de WordPress para poner el favicon en WordPress muy interesante es Favicon by RealFaviconGenerator.

Este plugin no sólo permite crear tu favicon, si no que además, crea una versión adaptada a cualquier dispositivo independientemente del sistema operativo con el que trabaje:

• Windows (Chrome, Firefox, Opera, Safari e Internet Explorer)
• Mac (Safari, Chrome, Firefox, Opera, Camino)
• iOS (Safari, Chrome, Coast)
• Android (Chrome, Firefox)
• Surface (IE)
• Otros

Además, este plugin es totalmente gratuito, y puedes descargarlo directamente desde el repositorio oficial de WordPress o si lo puedes descargarlo aquí.

Otras opciones para cambiar un Favicon en WordPress

Las opciones que hemos visto hasta ahora son bastante fáciles y efectivas para crear e insertar un favicon a tu WordPress, pero antes de despedirme quisiera comentarte que existe una opción mixta entre las 2 anteriores que hemos visto.

Y es que algunas plantillas o themes de WordPress, ofrecen la posibilidad de, directamente desde el panel de administración, añadir nuestro favicon sin necesidad de agregar etiquetas HTML a nuestro archivo header.php gracias a las opciones que traen por defecto.

Cambiar o añadir Favicon en GeneratePress theme

Por ejemplo, en el caso del theme GeneratePress podrás añadir el favicon con esta opción sin necesidad de realizar los pasos anteriores.

Si cuentas con esta plantilla debes seguir los siguientes pasos:

1. Ves al apartado personalizar identidad del sitio
2. Desde ahí cargar directamente un archivo en formato PNG o JPG con un tamaño al menos de 512 x 512 px
3. Listo. GeneratePress se encargará de todo y aplicará los cambios necesarios para añadir tu Favicon en WordPress

Conclusión ¿Qué método es mejor para añadir un favicon a WordPress?

Espero que este tutorial para insertar un favicon en tu página web creada con WordPress te haya sido de utilidad.

Como has podido ver, cualquiera de las diferentes opciones es bastante sencilla, y acepta diferentes formatos como JPG, PNG o GIF, además de por supuesto el ya mencionado .ICO.

Como ya he comentado; en mi opinión, lo más eficaz, es añadir el código a mano en un child theme, pero si lo que quieres es una solución duradera y rápida, y tu theme no trae la opción por defecto, siempre puedes instalar un plugin para añadir tu Favicon a WordPress.

¿No lo ves claro? Te invito a ver este video en el que podrás ver paso a paso lo que debes hacer.

¿Quieres aprender más sobre WordPress? Descarga GRATIS mi guía de WordPress actualizada en 2024. Sólo tienes que dejarme tu email un poco más abajo para recibirla junto con otros recursos.