Alejandra Mujica
¿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! 🙌
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.
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:
Gif: Jimdo
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.
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.
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.
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
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.
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.
Estas son las herramientas gratuitas de favicon generator que puedes usar para crear tu ícono y subirlo a tu web.
Imagen: genfavicon
Puedes agregar un favicon a una página web siguiendo estos simples pasos:
<link rel="icon" type="image/x-icon" href="http://example.com/favicon.ico" />
Poner un archivo favicon ICO en HTML es muy sencillo, te contamos cómo hacerlo.
<link rel="REL-FAV" href="RUTA-FAV" type="FORMATO-FAV" sizes="TAMAÑO-FAV">
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!