¿Qué es un Favicon y cómo crear el tuyo propio en WordPress?

[anuncio_b30 id=1]

¿Sabes qué es un favicon? ¿No sabes cómo crear un favicon personalizado para la web de tu negocio? ¡Hoy aprenderás paso a paso a poner el tuyo propio en tu página o Blog!

Muchas de las personas que se deciden por crear un Blog y me contactan para ayudarles con su estrategia, me suelen preguntar a menudo de qué se trata esta opción que incluyen la mayoría de plantillas de WordPress.

Por tanto, para resolver esta duda, he creado esta completa guía donde aprenderás qué es, qué tamaño exacto debería tener y cómo instalarlo tú mismo en pocos minutos y sin ayuda de un profesional.

¡Comenzamos!

¿Qué es un favicon?

Un favicon, también llamado favicono, “fav icon” (escrito separado), icono de página o de marcadores, no es más que esa pequeña imagen asociada a una página en particular, que se puede ver en la pestaña del navegador, justo en la parte superior de tu ordenador o dispositivo móvil.

Cuando escribimos la URL del sitio web en cuestión en la barra de direcciones, suele subirse a Internet en la forma de un archivo denominado favicon.ico que ya luego los navegadores descargan para mostrar a todos sus visitantes.

Muchas veces (en la mayoría de hecho), estas pequeñas imágenes son el logo de la empresa a la que pertenece la página, o una versión simplificada de éste.

Su nombre original proviene de “Favorites Icons”, que se traduciría del inglés como “Iconos de favoritos”.

De igual forma, si buscabas una página en la barra de búsqueda y ésta estaba agregada a tus marcadores, también mostraba este “mini-logo”.

Tiempo después, esto fue cambiado, debido a que se podía saber la cantidad de personas que añadieron tu página a marcadores en base a la cantidad de descargas del elemento, por lo que ahora todos los navegadores muestran esta imagen sin importar si has añadido o no la página a marcadores.

¿Para qué sirve un favicon?

[anuncio_b30 id=3]

Una vez que ya hemos aprendido qué es y cuál es su origen, es momento de repasar sus diversas utilidades, más allá de lo meramente estético.

» Mejorar la Imagen de tu Marca

Básicamente, este elemento es una de las formas que tenemos de darle una imagen más atractiva a la página web de nuestro negocio online.

Ya sabes, la Reputación de una Marca es uno de los factores esenciales para conseguir atraer a tus potenciales clientes, además del precio y otras decenas de condicionantes más.

Es además un medio a través del cual las personas pueden identificar nuestro sitio web o Blog de una forma mucho más sencilla, asociando nuestra página a una imagen característica y única.

Esto hace que la dote de identidad, algo así como un logo que reducimos y pegamos a la pestaña del navegador cuando éste entra a nuestra web.

» Diferenciación

¿Te imaginas tener muchas pestañas abiertas y no tener ni idea de qué página hay en cada pestaña?

Estoy seguro de que, si trabajas habitualmente con Internet, te habrás encontrado en esta situación, teniendo que ir pestaña por pestaña para encontrar una web concreta de todas que tienes abiertas.

La verdad es que yo no querría estar yendo de una en una hasta encontrar la que busco. De ahí la utilidad de este elemento, que de un vistazo te va a permitir identificarla.

» Genera confianza al usuario

Dicho esto, también hay que aclarar que indirectamente, este elemento juega un papel importante como forma de generar confianza a los usuarios que ingresan a la página ya que, después de todo, prácticamente todas los sitios webs oficiales y “seguros” poseen un logo propio en la pestaña del navegador.

No cabe duda que ésta es una señal de profesionalidad.

Esto en contrapartida, es también motivo de desconfianza, ya que hoy en día una gran parte de los usuarios que navega habitualmente por Internet saben qué es un favicon y están acostumbrados a verlos en la parte superior de sus navegadores.

Por tanto, cuando una página no tiene la famosa imagen en miniatura, les suele crear un poco de recelo…

» Mantenerte en el “top of mind”

Finalmente, también te ayuda a que las personas que previamente ya te han visitado, recuerden con mayor facilidad tu Marca, sobre todo cuando tu imagen es sencilla pero llamativa y, a su vez, fácil de recordar.

Si creas uno con estas características, lograrás que te relacionen con esos valores que tu logo transmite.

Qué tamaño debe tener un favicon

Si atendemos a los cánones teóricos, su tamaño puede variar, dependiendo de la plataforma en la que se use, yendo del estándar que es 16×16 hasta tamaños de 128×128 e incluso de 228×288 px, como te muestro en la siguiente tabla:

Sin embargo, si eres de los que prefiere tomar un “atajo”, un icono de marcadores como el que hoy analizamos suele representarse por una imagen con “pequeñas dimensiones”, como te he mencionado anteriormente.

Hago este inciso porque, ante la duda de qué dimensiones exactos debe tener, si quieres dejarlo finalmente en 16×16 píxeles. no necesariamente tienes que crearlo directamente en esa medida.

Esto te vendrá de maravilla si ya tienes una imagen previa, que simplemente quieras colocar como tal.

Cómo instalar o cambiar tu favicon en WordPress

Ahora vamos con la parte tutorial de este artículo, y es que de nada te sirve saber qué es un favicon ni las dimensiones que debe tener si no tienes ni idea de cómo implementarlo en tu web.

Es por ello por lo que yo te mostraré paso a paso cómo implementarlo en WordPress muy fácilmente, además de cambiarlo más adelante si te apetece.

Para hacer esto, te voy a mostrar dos métodos: uno de ellos a través de WordPress directamente, mientras que el segundo es utilizando un plug-in dentro de esta plataforma.

¡Ahí van ambos!

2 Métodos de crear un favicon online paso a paso para tu web

En caso de que seas diseñador/a gráfico o se te de bien la creación y edición de archivos audiovisuales, puedes hacerlo tú mismo desde el principio en PhotoShop o programas similares.

También puedes ayudarte de algunas de las muchas herramientas que puedes encontrar en Internet para generar este tipo de iconos gratuitos.

Para ello, más adelante te mostraré algunos programas gratuitos, que te ayudarán a crear el tuyo propio.

Ahora es hora de implementarlo de una de estas dos formas:

1) Menú de personalización de WordPress

Éste es quizás uno de los más usados, sobre todo cuando es la primera vez, ya que realmente no tienes que esforzarte mucho, además de que incluso puedes utilizar una imagen y no un archivo tradicional de tipo “.ico”.

Debes seguir los siguientes pasos:

En este caso, te recomiendo que tengas la imagen guardada en un tamaño de 512x512 px, ya que esta página no tiene la opción de ajustar el tamaño para que sea cuadrado, por lo que deberás hacerlo manualmente.

4. FreeFavicon

FreeFavicon es una plataforma cuyo principal fuerte es su galería de "fav iconos", y es que posee una amplia base de datos con un montón donde escoger, además de que los tiene catalogados en diferentes categorías, para que te sea más fácil encontrar lo que estás buscando.

Aun así, te da la posibilidad de crear los tuyos propios por si no consigues lo que deseas, solo que su herramienta es un poco más compleja que las anteriores.

Igualmente puedes subir una imagen y convertirla con los tamaños que desees.

5. Image Online Convert

Image Online Convert es una página que pone a tu disposición una herramienta online para convertir imágenes de un formato a otro, y esto incluye el formato ".ico".

Entre sus ventajas está que puedes importar una imagen desde múltiples fuentes, ya sea Dropbox, una URL o directamente desde tu ordenador.

Puedes realizar ajustes de tamaño para que escojas el tamaño que deseas, si lo dejas en blanco utilizará el mismo tamaño de tu imagen hasta un máximo de 256 px, más de allí, la herramienta hará el ajuste de tamaño de forma automática.

6. Convert Image

Similar a la página anterior, Convert Image es una página en donde básicamente puedes pasar una imagen de un formato a otro.

Solo necesitas subir un archivo y seleccionar la opción “Create my Fav.”, y se creará tu logo de forma automática.

La plataforma te recomienda que utilices fotos cuadradas ya que esto es lo usual en un elemento de estas características.

Ya lo último es descargar el resultado; puedes ingresar a la página con este enlace: .

7. Favic-o-Matic

Favic-o-Matic es otra opción en la que podrás convertir una imagen "normal" en el símbolo de tu web. Lo más destacable es su cómico diseño de página, que te va a sacar unas risas.

Puedes escoger entre dos opciones para el tamaño, el clásico que incluye el estándar 16x16 + 32x32 px y la opción completa que incluye todos los tamaños para navegador, aplicaciones y demás.

La página te hace la recomendación de que uses 32x32 px como tamaño mínimo, para la imagen que vas a subir, de esta forma se verá mejor el resultado final.

8. Real FV Generator

Real Favicon Generator es quizás la opción más completa de la lista. Subes tu imagen, la conviertes en ".ico" y luego visualizas el resultado, editando lo que sea que no te termine de convencer antes de descargarlo.

Puedes crear un favicon básicamente para cualquier cosa, desde aplicaciones hasta sistemas móviles como Android o el clásico para tu sitio web.

9. IONOS Fav Generator

Desde la página de IONOS también podrás diseñar el tuyo propio desde cero de forma muy simple.

También puedes utilizar textos o si ya tienes un diseño elaborado, solo necesitas subir su archivo de imagen. Es bastante profesional y con excelentes resultados.

10. GenFavicon

Terminamos esta lista con otra página en español que, básicamente, es la meca de lo simple.

Genfavicon es demasiado sencilla de utilizar, por lo que solo necesitas 3 pasos para crear el tuyo.

• Subir una imagen.
• Previsualizar el resultado.
• Elegir el tamaño y la parte que deseas convertirlo.

Finalmente, guarda el resultado en tu ordenador. En solo 3 sencillos pasos rápidos podrás tener uno personalizado.

Conclusión

Espero que a través de esta guía hayas comprendido exactamente qué es un favicon y las ventajas de disponer de uno propio para tu sitio web o Blog.

Además, como has podido comprobar, es muy fácil instalarlo desde tu WordPress, sin necesidad de acudir a ningún profesional del diseño.

¿Cuál es tu plataforma favorita para crear un favicon online?

Imagen principal (warrior) By Shutterstock.

Cuéntame todas aquellas dudas que te hayan podido surgir a raíz de esta lectura, ¡te espero en los comentarios! 😉