Los favicons pueden ser pequeños, pero tienen un gran impacto: ayudan a los visitantes a ubicarse y refuerzan el reconocimiento de marca.
Un favicon ocupa un espacio diminuto en la barra de direcciones o en la lista de marcadores. Puede funcionar como icono de acceso directo, de aplicación o de favoritos. Independientemente de dónde aparezca, es un ancla que representa una parte fundamental de la identidad visual de una marca.
El tamaño estándar para escritorio es de 32x32 píxeles, pero existen muchas otras escalas en las que una imagen de favicon debe verse bien. Cubrir todas las variaciones manualmente puede ser abrumador. Afortunadamente, hay una variedad de herramientas en línea y generadores de favicons que puedes usar para obtener automáticamente los tamaños y formatos de archivo necesarios, así como los fragmentos de código HTML correspondientes.
Echemos un vistazo a 9 generadores de favicons diferentes que te facilitarán el trabajo como diseñador web.
1. RealFaviconGenerator
Con sistemas operativos como Android e iOS, además de navegadores como Internet Explorer y Firefox, cada uno con sus propios requisitos, la tarea de crear un favicon funcional puede ser bastante estresante. RealFaviconGenerator te asegura desde el principio que su herramienta funciona para “Todos los navegadores. Todas las plataformas. Tus tecnologías favoritas”.
Solo tienes que subir una imagen de al menos 70x70 píxeles (aunque recomiendan 260x260) y RealFaviconGenerator se encarga del resto.
Una vez que subes tu archivo, verás una pantalla que te muestra cómo se verá en diversas aplicaciones como escritorio, iOS, Chrome para Android y Safari para MacOS. También tendrás la opción de colocar el archivo favicon.ico en un directorio raíz o hacer que el enlace href apunte a un destino diferente.
2. Favvy
Si ya usas Figma en tu proceso de diseño, Favvy es un plugin fantástico. Te permite exportar un archivo zip con tus favicons directamente desde Figma, en lo que tardas en tomarte un café. Favvy es fácil de usar, ofrece una personalización completa y genera los fragmentos de código HTML que necesitarás.
3. Favicon.io
Favicon.io destaca por su sencillez. La pantalla de inicio te ofrece tres opciones para crear un favicon: a partir de un archivo PNG, un archivo de texto o un emoji. Solo tienes que arrastrar tu imagen al conversor y obtendrás un archivo zip con el favicon.ico, varias versiones para Android-Chrome, múltiples PNG y un icono adicional para Apple-touch para iPads y iPhones. Favicon.io también cuenta con secciones de tutoriales muy útiles con respuestas a preguntas frecuentes.
Una pequeña advertencia: este es un generador gratuito que depende de la publicidad para financiarse, lo cual está muy bien. Solo ten cuidado con dónde haces clic, ya que algunos anuncios tienen botones engañosos que te llevarán a otros sitios.
4. Looka
Si estás creando una identidad de marca desde cero, Looka te permite diseñar gráficos geniales, incluidos los favicons. Esta aplicación utiliza inteligencia artificial, lo que le ayuda a ofrecer resultados más prácticos que otros generadores de marca.
También nos gusta Looka por sus opciones de personalización. Hay muchas formas de ajustar y editar tus gráficos, lo que te da la oportunidad de lograr un estilo personalizado que funcionará para casi cualquier tipo de negocio.
5. Favic-o-matic
Nos gusta Favic-o-matic porque es un generador de favicons fácil de usar con un diseño atractivo y mucha personalidad. Ofrecen dos opciones: “solo el buen favicon.ico de siempre” (estándar de 16x16 y 32x32 px) y “¡todos los tamaños posibles!”, que incluye —como habrás adivinado— cada tamaño y formato ico, incluyendo varios iconos para Apple-touch, Microsoft mstiles y archivos PNG.
El botón grande de ‘Subir tu imagen’ es otro detalle genial de su interfaz. Al hacer clic, se abre el explorador de archivos para que puedas buscar el JPEG, PNG u otro gráfico que quieras subir.
Ebook gratuito: Introducción al diseño web
Domina los conceptos fundamentales del diseño web, como la tipografía, la teoría del color, el diseño visual y mucho más.
6. Generador de favicon
Favicon Generator presume de ser el sitio web original para crear favicons. Ofrece todos los tamaños habituales que funcionan en los navegadores y dispositivos modernos. Solo tienes que subir una imagen en formato png, gif, jpg o un logotipo para crear tus favicons y obtener los fragmentos de código HTML necesarios.
7. Faviator
Nos encanta la interfaz sencilla de Faviator, con sus menús desplegables y controles deslizantes que facilitan el ajuste de elementos como el color de fondo, el borde, la tipografía y la posición. Si buscas un generador que te dé un gran control sobre el aspecto final, vale la pena echarle un vistazo a Faviator.
8. Formito
¿Quieres crear un favicon al estilo Stripe? Formito apuesta por la sencillez; aunque es algo menos versátil que otros generadores, eso no es necesariamente malo. Lo que hace, lo hace bien, permitiéndote crear favicons minimalistas y legibles sin apenas esfuerzo.
9. Favicon.cc
Para quienes prefieren diseñar un favicon píxel a píxel, Favicon.cc ofrece una interfaz basada en cuadrícula. Trabajar a este nivel de detalle te da un control total para crear favicons nítidos que no se vean borrosos. Además, como ventaja adicional, puedes animarlos.
Además de un potente editor, ofrecen una galería con los favicons mejor valorados y las últimas novedades para que te inspires al crear el tuyo.
No olvides los favicons en tus diseños web
Seamos sinceros: puede que los favicons no sean tan llamativos como una animación espectacular o una tipografía elegante, pero son fundamentales para que un sitio web sea reconocible en los marcadores y las pestañas del navegador. Los generadores de favicon eliminan las complicaciones de crear estos iconos diminutos, ofreciéndote un camino rápido hacia el resultado final.
¿Quieres saber más? Echa un vistazo a la entrada del blog de Webflow Favicons: Everything you need to know in 2022 para profundizar en el tema.
