Qué es un favicon y cómo puedo crear uno【Plataformas】
Si cuando visitas cualquier página web te has fijado que en la pestaña de tu navegador, aparece una pequeña imagen que normalmente se relaciona con la imagen de marca de la empresa cuya web estás visitando, ya habrás oído hablar del favicon. Así de hecho es como se llama esa pequeña imagen y en este post te enseñamos qué es exactamente un favicon, por qué es importante tenerla, cómo puedes crear una para tu web de forma cómo y después subirlo a tu web.

---

¿Qué es un favicon y cómo se crea en una web?

TABLA DE CONTENIDOS

• Qué es un favicon
• Cómo crear un favicon para una web
• Cómo añadir el favicon a mi web

---

Qué es un favicon

Un favicon es una pequeña imagen que asocias a una web y que cumple una función identificativa apareciendo en las pestañas de los navegadores cuando abres esa URL, en la barra de direcciones y en los marcadores y favoritos que tengas guardados en tu navegador. Sirve fundamentalmente para ayudar al usuario a identificar la web que está visitando y es bastante útil, sobre todo, cuando tienes varias pestañas en tu navegador abiertas. También se conoce al favicon como icono de página o favoritos.

Lo más habitual es que tenga un tamaño reducido como 32x32 px o 16x16px. El tamaño normalmente te lo marcará la plataforma con la que estás creando tu web. Y en cuanto a la extensión o tipo de imagen, normalmente están aceptados diferentes formatos y ya no tiene por qué ser .ico, sino que ya puedes subir tu favicon en formato .jpg, svg o png en la mayoría de los casos.

¿Es importante tener un favicon en una web? La respuesta es Sí rotundamente. Normalmente los usuarios siempre se van a fijar antes en una imagen que en texto y si puedes asociar un icono a tu web, ayudarás a los usuarios que te visiten a identificar tu sitio de forma más sencilla.

Cómo crear un favicon para una web

Ahora que ya sabes de la importancia que tiene tener un favicon en tu web, te estarás preguntando cómo creo uno. Hacerlo no te llevará mucho tiempo y tienes diferentes posibilidades. Pero antes debes saber que un buen favicon debe ser:

• Sencillo: ten en cuenta que el tamaño de un favicon va a ser bastante reducido por lo que tampoco te interesa que la imagen que vayas a incorporar tenga muchos elementos. Apuesta mejor por un elemento claro y que destaque.
• Que identifique a tu marca: muchas empresas apuestan por coger un elemento del logotipo o hacer una versión reducida de él. Utiliza los colores corporativos de tu marca y haz que sea fácil identificarla.

En cuanto al tamaño de imagen que debe tener tu favicon, este va a ir marcado por la plataforma que uses pero lo más habitual es que el tamaño sea de 32x32 px o 16x16px, aunque puede que haya plantillas que te recomienden otros tamaños. Ten en cuenta que a mayor tamaño de imagen, más pesará. Sobre la resolución, deberá estar adaptada para verse en webs por lo que lo ideal es usar una resolución de 72 px por pulgada.

Para crear tu favicon tienes la posibilidad de usar diferentes plataformas. Desde un programa de edición de imágenes como Photoshop o GIMP a herramientas de diseño como canva.com.

Deberás crear una imagen del tamaño que quieras para tu favicon, en modo RGB y con una resolución de 72ppp. Escoge parte de tu logotipo y ajusta la imagen al recuadro. Te recomendamos desde Axarnet que tu favicon no tenga fondo blanco, y tenga un formato .png. Así podrá adaptarse mejor al estilo de las pestañas del navegador y destacar. No obstante es una cuestión de seguir la línea visual que tengáis marcada en vuestra empresa.

Cuando consigas un diseño que te convezca, guarda la imagen o expórtala para web y ya tendrás tu favicon listo.

También vas a encontrar diferentes herramientas online para generar tu propio favicon. Es el caso de Favicon Generator donde puedes importar una imagen y convertirla a un archivo .ico. Otra opción de herramienta online es Website Planet donde puedes soltar una imagen y te genera el favicon. También puedes escoger un icono de su galería, aunque debes tener suerte para que un icono cualquiera se identifique con tu marca. Y Favicon.cc que al igual que la anterior incorpora una galería de iconos que puedes utilizar y además te da la opción de dibujar tu propio favicon.

Cómo añadir el favicon a mi web

Si ya tienes diseñado el favicon, el último paso será subirlo a tu web. La manera de subirlo dependerá del tipo de web que tengas. Puede ser que no estés utilizando ningún tipo de CMS, por lo que deberás incluir tu favicon mediante código o puede, y esto será lo más habitual, que utilices un gestor como WordPress o Prestashop y en este sentido, subir tu favicon será mucho más sencillo.

Añadir favicon mediante código

Para ello, deberás buscar en tu web el archivo que contiene la cabecera o header. Localiza la etiqueta y la etiqueta de cierre e incorpora la siguiente línea de código.

Dependiendo del formato en el que hayas creado tu favicon deberás cambiar lo indicado en el campo type. Si el favicon está diseño en .png, deberás poner image/png, si está en jpg, image/jpg y si está en .ico el que te hemos puesto en el ejemplo.

Añadir favicon en WordPress

Incorporar el favicon en tu página web WordPress será algo sencillo. Para ello deberás iniciar sesión en el panel de administración de tu página WordPress y seleccionar Apariencia>Personalizar. Tras esto, haz clic en Identidad del sitio y busca el apartado Favicon o Icono del sitio. Solamente tendrás que seleccionar la imagen y subirla.

También se puede dar el caso que lo puedas hacer desde la propia plantilla que estés usando en WordPress. No obstante siempre tendrá preferencia el que cargues en la sección de Apariencia de tu WordPress.

Añadir favicon en Prestashop

Al igual que en WordPress, incorporar el favicon a tu tienda hecha en Prestashop es algo también fácil. Deberás entrar en el panel de control de tu tienda y en la sección del menú de Diseño, hacer clic en Temas y logotipo. Ahí podrás incorporar el favicon a tu ecommerce.

Conclusión

Si tu web aún no tiene un favicon, piensa ya en ponerlo porque estás perdiendo la oportunidad de que los usuarios puedan identificar a tu sitio en las pestañas de los navegadores y en los móviles. En el caso de que no sepas cómo crearlo, siempre puedes sino acudir a una galería de descarga de favicons gratis como Free Favicon o alguna de las herramientas que hemos nombrado en este artículo.