Cómo añadir un Favicon en WordPress

[ 15 mayo 2018 ] [ Autor: Jhon Marreros Guzmán ] [ Themes - Básico] [ ]

La imagen que aparece en la parte superior del navegador cuando visitas algún sitio web la llamamos favicon, existen diferentes maneras de añadir un favicon en WordPress, desde las más simple hasta las más compleja, veremos algunas de ellas a continuación.

Generalidades

Antes de empezar, ten en cuenta que no siempre es adecuado que la imagen de tu logo sea un favicon, ya que al ser una imagen pequeña ( desde 16×16 pixeles), puede ser que no se vea correctamente, lo usual es tomar una parte del logo o poner alguna imagen representativa de tu web como favicon.

En la siguiente imagen se ve que el favicon es una parte representativa del logo.

Favicon significa icono favorito, es una palabra formada por “favorite” + “icon” (en inglés).

1- Reemplazando directamente el Favicon

Si tu theme ya tiene un archivo favicon.ico en alguna ubicación, usualmente directamente en la carpeta del theme o en la carpeta de images, puedes simplemente reemplazar el archivo y con esto tendrás tu favicon cambiado.

Por ejemplo en el caso de los themes que usan el framework Genesis, puedes reemplazar el favicon.ico en la carpeta images del child-theme, tal como se ve en la siguiente imagen.

En el caso de un child-theme con Genesis, podrías incluso borrar el archivo favicon.ico y usar un archivo llamado favicon.png, favicon.gif o favicon.jpg

Puedes usar un servicio como favicon-generator para generar tu archivo .ico

2- Usando la funcionalidad de WordPress

Esta es otra forma muy cómoda de cambiar el favicon de tu sitio, haciéndolo directamente desde WordPress.

Lo primero es preparar una imagen cuadrada al menos de 512×512 pixeles.
Luego ve a: Apariencia > Personalizar > Identidad del sitio , sección Icono del sitio

Cuando usas esta opción te generará iconos de los siguientes tamaños:

32×32
192×192
180×180
270×270

Lo puedes comprobar fácilmente revisando tu código HTML generado

La generación de diferentes tamaños es para cubrir las necesidades de distintos dispositivos cuando se cree un acceso directo del sitio.

3- Agregando los favicons manualmente

Si quieras cubrir muchos más casos de favicons de los que WordPress te da por defecto, puedes evaluar crear tus favicons manualmente, existen diferentes servicios para lograr esto, por ejemplo: Realfavicongenerator

Ten en cuenta que en este caso tendrás que hacer modificaciones a los archivos de tu theme para agregar el código HTML generado.

Conclusión

En la mayoría de los casos usarás o un reemplazo del archivo favicon.ico directamente o usararás la funcionalidad de cambio de favicon que tiene WordPress, rara vez terminarás insertando varios tamaños de favicons de manera manual, salvo sea un requerimiento específico de tu cliente.

¿Aún con dudas?, en el siguiente video se explica los puntos tratados anteriormente.