Free Icon Generator — lanzamiento en Product Hunt
Hoy lanzo el Free Icon Generator en Product Hunt. Es una herramienta cliente-side que genera bundles de iconos completos para todas las plataformas relevantes a partir de una sola imagen — web, iOS, Android, macOS, Windows, PWA y redes sociales. Sin backend, sin cuenta, corre completamente en el navegador.
El problema
Cada vez que necesitaba iconos para un nuevo proyecto, era el mismo flujo molesto: abrir el logo en Photoshop o Figma, exportar manualmente a 16×16, 32×32, 192×192, 512×512, después de nuevo para iOS en 20 tamaños distintos con @1x/@2x/@3x, después las densidades de Android (mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi), después escribir un manifest.json a mano, después generar un ICO porque eso es lo que el navegador quiere, después construir una imagen Open Graph de 1200×630, después un Apple Touch Icon de 180×180…
Todo eso para un solo logo. Por proyecto.
Existen herramientas online que hacen parte de esto, pero o cuestan dinero, o quieren cuenta, o mandan tu imagen al servidor de alguien más. Para un logo que ni siquiera has lanzado públicamente todavía, esa es una elección rara.
Así que empecé a construirme uno.
Qué hace
El generador tiene dos modos: Quick Convert para el 90% de los casos, y un Visual Editor para diseñadores que quieren diseñar iconos directamente en la herramienta.
Quick Convert — el flujo principal
En la landing: arrastra la imagen, elige un formato, descarga el ZIP. Listo.
ICO, PNG (16, 32, 48, 64, 96, 128, 192, 256, 384, 512), site.webmanifest — el stack web clásico completo.
Todos los tamaños de 20pt a 1024pt (App Store), con variantes @1x/@2x/@3x y un Contents.json que coincide.
mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi más el icono de Play Store en 512×512.
Todos los tamaños del manifest (72, 96, 128, 144, 152, 192, 384, 512) más manifest.json generado con las rutas correctas.
Open Graph (1200×630), Twitter Card (1200×600), Instagram (1080×1080), banner LinkedIn (1584×396).
Small (70×70), Medium (150×150), Wide (310×150), Large (310×310) para manifests PWA en Windows.
Cualquier tamaño de 16 a 1024 píxeles — cuando solo necesitas un icono específico.
El ZIP descargado contiene todos los archivos con nombres limpios y en la estructura de carpetas que cada framework espera. Para iOS recibes un Contents.json que puedes arrastrar directo a Xcode. Para PWA un manifest.json listo para usar. Para favicons los snippets HTML que van en el <head>.
Visual Editor (alpha, solo desktop)
Si no quieres generar iconos a partir de un logo terminado sino diseñarlos directamente en la herramienta, tienes un editor completo basado en capas — construido sobre Konva.js.
Shapes (rectángulo, círculo, polígono), iconos Lucide (más de 1400 disponibles), texto con integración de Google Fonts, imágenes, gradientes.
Grid, zoom, pan (space + drag), snap-to-grid y snap-to-center, guías, reglas.
Transform, fill y stroke, opacity, blend modes, sombras — todo lo que conoces de Figma, enfocado en tamaños de icono.
Picker HSL/HEX, editor de gradientes, 5 paletas preconfiguradas más las propias guardables.
Vista previa en vivo en iPhone, Android, pestaña de navegador, dock de macOS y barra de tareas de Windows — renderizado con Three.js.
Undo/redo, copy/paste, duplicate, delete, nudge con flechas, select all. Como un editor nativo.
Los usuarios móviles son redirigidos a la landing de Quick Convert — el editor necesita espacio de pantalla que los dispositivos táctiles no tienen.
Autosave y archivos de proyecto
El editor guarda automáticamente en IndexedDB. Al volver a abrir, pregunta si restaurar la última sesión. Si quieres compartir o versionar proyectos, exportarlos como .icon-project.json e importarlos después.
Stack
Algunos detalles técnicos para los curiosos:
Stack React moderno con Vite como build tool. Sin router de componentes — la app entera es una SPA con navegación basada en useState.
Configuración CSS-first vía bloques @theme. Sin tailwind.config.js. Los colores y tokens custom viven en global.css.
Canvas 2D performante con un modelo de capas que se ajusta naturalmente al diseño de iconos. No confundir con Fabric.js.
@react-three/fiber + @react-three/drei para las previews de dispositivos. Renderizado en tiempo real, reacciona a cambios del editor.
El redimensionado de imágenes y la creación del ZIP corren en un worker para que el main thread no se bloquee al generar 30 tamaños a la vez.
Multilenguaje para DE y EN. La herramienta está disponible en alemán e inglés — el idioma se detecta del locale del navegador.
Todo es cliente-side. Las imágenes nunca salen de tu navegador. No hay endpoint API, no hay base de datos, no hay hosting para datos de usuario. Lo que subes se queda contigo.
Qué viene después
Actualmente alpha. Pasa a beta cuando multi-select, agrupación y reordenamiento de capas por drag-and-drop estén estables.
Actualmente el batch converter verifica resolución, contraste y safe zone. Planeado: remoción automática de fondo para logos sobre fondos de color.
Apple Watch (38mm, 42mm, 44mm, 49mm), CarPlay, Apple TV. En el roadmap, pero solo si usuarios reales lo piden.
Un CLI Node para pipelines CI/CD que hace lo mismo que el generador del navegador. Justo lo que las build tools necesitan.
Apoya en Product Hunt
Si la herramienta te resulta útil, un upvote en Product Hunt me ayudaría mucho — el primer día es decisivo para la visibilidad, y mientras más gente la vea hoy, más probable es que ayude a alguien que necesita justo este flujo ahora mismo.
Enlaces:
- free-icon-generator.com — herramienta en vivo
- Product Hunt — página de lanzamiento