Cómo poner o cambiar el favicon en WordPress con y sin plugins

Actualizado: junio 2018

Si has llegado hasta aquí buscando un tutorial paso a paso sobre cómo cambiar o añadir un favicon a WordPress con o sin plugins, enhorabuena. Estás en el lugar indicado.


Cómo poner o cambiar el favicon en WordPress con y sin plugins
5 (100%) 1 vote

Hoy en día hay tanta competencia, que si vas en serio con tu proyecto es fundamental crear una imagen alusiva a tu marca para agregarla como favicon a tu página web en WordPress.

¿Qué es el 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. Es decir, es como se llama al icono de las páginas web.

La idea, es que de esa forma y por norma general, cuando tienes varias pestañas abiertas, gracias al favicon añadido, puedes identificar perfectamente cada web visitada sin necesidad de revisar cada pestaña una a una.

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 (que luego veremos) es en formato .ico.

La mayoría de programas de edición no permiten guardar imágenes en formato .ico, es por eso que será necesario usar algún conversor online que haga el trabajo por nosotros.

No te preocupes, más adelante te diré cuál es el mejor creador de favicons para que tú también puedas usarlo.

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, en la actualidad existen infinidad de herramientas para crearlas en un formato .ico a pesar de que varios navegadores o browser admiten favicons en formato GIF, PNG u otros, las versiones de Internet Explorer aún requieren que los favicons en formato .ico.

Para resolver este problema te presentaré una herramienta donde podrás crear de manera sencilla y fácil un faicon.ico a partir de la conversión de cualquier formato multimedia GIF, PNG o JPEG a .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.

Además, el editor le permite modificar manualmente los favicons generados para garantizar el mejor resultado posible.

La herramienta a la cual te hago mención es https://www.favicon-generator.org/

Si observamos la interfaz de esta herramienta es bastante sencilla y la cual te explicaré a continuación:

  1. Una vez tengas tu diseño en formato JPG, PNG o GIF solo basta con arrastrarla hasta este punto o presionar el botón “Seleccionar archivo”.
  2. Como segundo paso debes seleccionar si crear solo un Favicon 16×16 px que va servirte para tu página web o también crear iconos para aplicaciones Microsoft, Android y similares.
  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, solo debes presionar 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 a partir de etiquetas HTML para ello más adelante te explicaré como hacerlo.

Cómo añadir o cambiar el favicon en WordPress

Ya que hemos generado nuestro favicon para nuestra página web WordPress querrás ahora insertarlo, en realidad es bastante sencillo y para ello hay varias soluciones posibles y son las siguientes:

Insertando etiquetas HTML a nuestra plantilla WordPress.

Como te había explicado en párrafos anteriores la inserción de tu favicon en tu WordPress lo puede hacer agregando unas líneas de etiquetas HTML.

  • Una vez descargado tu favicon generado debes guardarlo en la biblioteca de medios y copiar su url.
  • Luego debes dirigirte a tu archivo header.php y en las etiquetas <head> </head> tienes que insertar el siguiente código:

<link rel=”shortcut icon” href=”ingresa la url de tu favicon” type=”image/x-icon”>.

Listo, si aplicas los pasos de manera correcta ya deberás tener tu Favicon en tu WordPress, sin embargo debes tomar en cuenta que este cambio solo se hará efectivo mientras no se actualice tu tema WordPress, para ello lo puedes solucionar de dos maneras haciendo uso de un Child theme o a través de un plugin, para esta última solución te voy a recomendar uno que usó de manera habitual.

A través de la instalación de plugins.

Una de las ventajas de usar plugins es que si actualizamos nuestro tema o plantilla WordPress no se pierde el favicon que se haya subido,entonces para ello utilizaremos el plugin All In One Favicon.

Este interesante plugin te ofrece dos posibilidades, por ejemplo puedes poner un Favicon distinto para tu frontend y backend

Como puedes observar su interfaz es bastante sencilla, solo debes seleccionar el formato que vas a subir, para nuestro ejemplo tomarás el formato ICO ya que en paso anteriores creaste uno y luego presionas el botón “Guardar cambios” y listo, el resultado lo podemos ver a continuación.

Opciones incluidas en nuestra plantilla.

Creo que con las opciones que has visto hasta ahora son bastante fáciles y efectivas para crear e insertar un favicon a tu WordPress pero por último quisiera presentarte una última opción que conozco y es que algunas plantillas tienen la opción de insertar sin necesidad de agregar etiquetas HTML a nuestro archivo header.php o a través de la instalaciones de plugin, te hablo concretamente de la plantilla GeneratePress.

Si cuentas con esta plantilla puedes ir al apartado personalizar/identidad del sitio, ahí puedes cargar directamente un archivo en formato PNG o JPG con un tamaño al menos de 512 x 512 px.

Concluyendo

Espero haya sido de gran utilidad para ti este post de como crear e insertar un favicon en tu web WordPress, aquí pudiste observar lo sencillo que es crearlo a partir de un archivo multimedia en formato JPG, PNG o GIF e insertarlo en tu página web a través de etiquetas HTML en tu archivo header.php, a través del plugin All In One Favicon o a través de las interfaces que te provee ciertas plantillas, creo que con estos métodos tendrás varias opciones a la mano por si alguna de ella fala o se te hace imposible aplicar alguna de ella ya sea por su nivel de complejidad ingresando etiquetas HTML en nuestro archivos de WordPress.

¿Alguna pregunta?

Si tienes alguna duda, o si te ha gustado el post, te espero en Twitter: @TutorialWP_

¡Sigue leyendo!