¿Has escuchado sobre favicon? ¿Quieres personalizar tu sitio web para conseguir más tráfico? ¿Te gustaría crear un ícono que identifique a tu negocio y que sea memorable en el tiempo?

¡Todo eso y más promete favicon! Un paso importante dentro de la optimización de un sitio web es trabajar el branding digital de tu negocio. En esta nota te contaremos qué es favicon, para qué sirve y cómo crear uno para instalarlo en tu página web.

¿Lista y listo para mejorar la el UI y UX de tu empresa? ¡Allá vamos! 🙌

¿Qué es un favicon y para qué se utiliza en la web?

El favicon es un pequeño ícono que aparece junto al nombre de una página web en la pestaña del navegador. No deben confundirse con los logotipos; aunque muchas veces suelen ser los mismos. 

Debido a su pequeño tamaño y resolución, es posible que el favicon forme parte del logotipo original de una empresa.

✅ Tamaño de un favicon: 16x16 píxeles aprox.

Los favicons existen hace mucho tiempo en la web; pero debido a que muchos sitios online están pensados para ser responsive o convertirse en aplicaciones, es común que los diseños de íconos de apps (conocidos como ‘touch icons’) sean personalizados y puedan variar de tamaño y formas cuando se entregan al equipo de desarrollo web para su implementación.

¿Para qué sirve un favicon?

Crear un favicon es un paso importante para la configuración de un sitio web comercial o personal. Estos marcadores visuales ayudan a la identificación rápida de una página y unifica todos los componentes del sitio para una mejor experiencia de usuario y branding.

✅ Un favicon funciona para:

• Dar identidad a un sitio web.
• Agregar legitimidad a la página web. 
• Impulsar una marca en los canales online.
• Generar confianza en los consumidores potenciales.
• Identificar rápidamente la página cuando se tiene varias pestañas abiertas.

Gif: Jimdo

¿Cómo crear un favicon sin fondo?

Crear un favicon sin fondo no es tan complicado, solo necesitas un buen diseño, una buena calidad de imagen (resolución) y seguir todos los parámetros técnicos para su correcta creación e implementación.

✅ Aquí te contamos paso a paso cómo crear un favicon con transparencia.

Formato Favicon

Los formatos más comunes de favicon son ICO, PNG y SVG; pero existen formas adicionales para navegadores o dispositivos específicos.

El formato favicon ICO fue desarrollado por Microsoft y es el formato de archivo original del favicon. Este formato es único porque permite múltiples imágenes pequeñas dentro de un mismo archivo.

• Formato favicon ICO: 16x16, 32x32 y 48x48 píxeles. Se pueden escalar y optimizar de forma independiente. El formato ICO es compatible con todos los navegadores y es el único que admite IE5 a IE10 (internet explorer).
• Favicon PNG: El formato PNG es un formato adaptable que no requiere ninguna herramienta especial para crearlo. La calidad del favicon es mayor a la del formato ICO; pero la única desventaja es que no es compatible con IE5 a IE10.
• Favicon SVG: El formato favicon SVG tiene ventajas sobre los formatos PNG e ICO; pero aún no tiene compatibilidad con la mayoría de navegadores. Los archivos SVG son muy ligeros y escalables. Solo Chrome, Firefox y Opera admiten favicons de formato SVG.

Tamaño Favicon

El tamaño del favicon clásico es de 16x16 píxeles; pero dependiendo del sistema operativo, existe una gran posibilidad de que puedas implementar diferentes tamaños en la creación de tu ícono.

• 16px: para uso general en todos los navegadores. Se muestra en la barra de direcciones, pestañas o marcadores.
• 24px: sitio fijado en Internet Explorer 9.
• 32px: página de nueva pestaña en Internet Explorer, botón de la barra de tareas en Windows 7+ y barra lateral “leer más tarde” de Safari.
• 57px: pantalla de inicio estándar de iOS (iPod Touch, iPhone de primera generación a 3G).
• 72px: ícono de la pantalla de inicio del iPad.
• 96px: Favicon utilizado en la plataforma Google TV.
• 114px: ícono de la pantalla de inicio del iPhone 4+.
• 128px: Chrome Web Store.
• 195px: marcación rápida de Opera.

Entonces, ¿cuál es el tamaño más adecuado para hacer un favicon? Según Google, es recomendable trabajar con la mayor resolución posible, en este caso sería de 192 x 192 píxeles.

Imagen: SERanking

Diseña del ícono para favicon

Puedes diseñar una imagen para favicon con un editor de imágenes como Fireworks, Illustrator, Photoshop o una alternativa gratuita de código abierto como GIMP. 

Muchas empresas, para mantener la identidad de marca, utilizan su logotipo como favicon. Y si este es tu caso, te recomendamos aplicar las recomendaciones de nuestro profesor, Castor Vera Carbajal, del curso online de diseño de logotipos desde cero, para crear la imagen de tu favicon.

Los logotipos son el eje sobre el que se construye la identidad de las marcas. Y si son construidos correctamente, son la expresión gráfica que contiene el espíritu y los sueños de la marca e incluso pueden convertirse en íconos de la cultura popular. El símbolo es el protagonista de la estructura del logotipo. Suele ser más versátil, tiene más personalidad, es más fácil de reproducir en espacios reducidos, más fácil de animar y tiene bastante personalidad . No podemos diseñar un logotipo sin investigar, experimentar y cuestionar su rol dentro de la vida de la marca. 

Si utilizas Photoshop para diseñar tu favicon, puedes empezar con un cuadro de 64 x  64 píxeles y luego puedes reducirlo a 16 x 16 píxeles. Guarda el archivo en formato PNG , SVG o instala un plugin ICO.

¿Cómo generar un favicon online sin fondo?

Si quieres buscar una opción más sencilla y rápida para generar un favicon sin fondo, entonces, una herramienta online será una excelente solución.

Favicon generator

Estas son las herramientas gratuitas de favicon generator que puedes usar para crear tu ícono y subirlo a tu web.

• Favicon-generator: esta es una de las aplicaciones para favicon más conocidas de internet. Esta plataforma acepta imágenes en formatos gif, png y jpeg y las convierte en archivos .ico para web, Android, Microsoft e iOs.
• Favicon.cc: esta app para favicon te permite importar imágenes en jpeg, gif, jpg, png, bmp, ico y cur. Además, cuenta con un editor gráfico con herramientas básicas de edición para que puedas personalizar tus imágenes.
• Genfavicon: es una herramienta gratuita para hacer favicon. Puedes crear tu ícono en varios tamaños y acepta diferentes formatos. Además, puedes ver en tiempo real cómo va quedando tu imagen.

Imagen: genfavicon

¿Cómo agregar favicon a una página web?

Puedes agregar un favicon a una página web siguiendo estos simples pasos:

• Convierte tu imagen al formato de favicon .ico. Puedes utilizar herramientas online que te ayuden a convertir tu imagen a favicon fácilmente: iconifier.net, prodraw.net o faviconer.com
• Sube la imagen favicon en la raíz del directorio de tu sitio web.
• Agregar código HTML para tu favicon. La mayoría de navegadores modernos encuentran el archivo ICO sin necesidad de editar el código; pero para asegurarte que todo los navegadores lo muestren correctamente, agrega el siguiente código en el header o encabezado dentro de las etiquetas de tu página:

<link rel="icon" type="image/x-icon" href="http://example.com/favicon.ico" />

¿Cómo poner un favicon ICO en HTML?

Poner un archivo favicon ICO en HTML es muy sencillo, te contamos cómo hacerlo.

• Localiza el archivo de tu sitio que contiene el header de tu página web.
• Abre el archivo y localiza la etiqueta o tag HTML <head>.
• Entre la etiqueta de apertura <head> y la de cierre </head> coloca el siguiente código con los datos de tu favicon:

<link rel="REL-FAV" href="RUTA-FAV" type="FORMATO-FAV" sizes="TAMAÑO-FAV">

• REL-FAV: el valor de este campo es “icon”.
• RUTA-FAV: es la ruta o url del favicon que has añadido.
• FORMATO-FAV: depende del formato del favicon que tienes que agregar (PNG, ICO, SVG).
• TAMAÑO-FAV: usualmente es el tamaño del favicon (como lo mencionamos líneas arriba).
• ¡Guarda tu archivo y listo!

¿Cómo añadir favicon a Wordpress?

Desde la versión 4.3 de Wordpress, puedes añadir favicon de una manera muy fácil. ¡Toma nota!

✅ Ingresa al panel de administrador y busca en el menú lateral la opción apariencia > personalizar.

✅ Personaliza el tema que tienes instalado, dale clic en la identidad del sitio.

✅ Edita el título de la página, la descripción de la web y el ícono del sitio (o sea el favicon).

✅ Sube el favicon a la biblioteca de medios de WordPress. Luego dale clic al botón elegir, edita la imagen y, finalmente, clic en guardar para visualizar tu favicon en la pestaña de tu sitio web.

Imagen: raiolanetworks

Ahora que ya sabes cómo crear y cómo instalar un favicon, ¿te animas a diseñar uno? Aprende a utilizar las herramientas de diseño  y si quieres desarrollar tu propio sitio web desde cero, entonces revisa estos cursos sobre desarrollo web y tecnología.

¡Buena suerte!