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.

favicon wordpress
IMPORTANTE:
Desde mayo de 2019, Google está mostrando en los resultados de las búsquedas realizadas a través de dispositivos móviles los favicon de cada web.

Por este motivo, es aún más importante si cabe que sigas este tutorial para aprender como crear y añadir tu favicon en WordPress correctamente.

¿Qué es un favicon?

favicon wordpress
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

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:

Cómo añadir el Favicon en WordPress

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:

<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!

Plugins WordPress para instalar un Favicon

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

all in one favicon plugin wordpressComo ya hemos visto, la principal ventaja de usar este plugin es 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

Favicon by RealFaviconGeneratorOtro 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:

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:

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.

¿Aún tienes dudas? Contáctamente en twitter. Estaré encantado de ayudarte en @TutorialWP_

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

Cómo añadir un Favicon en WordPress– Video de DecodeCMS