Cómo crear rápidamente un icono decente para un proyecto personal sin Figma ni diseñador

¿Te suena familiar: acabas de pulir tu MVP, escribiste tests, configuraste el build, y ahora el proyecto necesita un icono. Abrir el pesado Figma solo para una insignia simple con un gradiente y un glifo se siente como demasiado esfuerzo. Dibujar a ciegas en código o buscar convertidores en línea sospechosos llenos de anuncios tampoco es muy atractivo.

Hace poco descubrí el repositorio de AppIcon Forge. Es una herramienta web ligera y de código abierto construida específicamente para momentos como este. Se encarga de todo el trabajo tedioso de diseñar iconos cuadrados y redondeados para aplicaciones móviles y de escritorio.

Lo que puede hacer el generador

La idea central es simple: ofrecer a los desarrolladores una interfaz limpia con deslizadores y vista previa instantánea, sin la complejidad de las herramientas de gráficos vectoriales.

Aquí tienes algunos ejemplos de lo que puedes crear en un par de clics:

Desglosando las características en más detalle, el servicio cubre todas las necesidades básicas:

• Integración con el catálogo de Iconify. La interfaz incluye búsqueda en una enorme base de datos de iconos vectoriales con más de 200.000 símbolos. Escribe una palabra clave, elige un glifo y prévisualízalo al instante sobre un fondo.
• Soporte para texto y tipografía. Puedes crear un logotipo con una o dos letras, ajustar la fuente, el espaciado entre letras y aplicar gradientes al texto.
• Carga tus propios recursos. Si los iconos estándar no encajan, puedes subir un SVG local o una imagen rasterizada.
• Personalización del estilo de fondo. Soporta gradientes lineales y radiales, sombras con desenfoque, ancho y color del borde, y redondeo de esquinas.

Por cierto, el autor del proyecto dejó una advertencia útil en el README sobre las fuentes. Si generas un icono basado en texto, la aplicación puede usar las fuentes del sistema operativo por defecto. Para lanzamientos comerciales, es mejor cambiar a Google Fonts abiertas para evitar problemas de licencias.

Cómo ejecutar el proyecto

La opción más sencilla es abrir la versión lista para usar en GitHub Pages y empezar a crear tu recurso de inmediato. No requiere instalación.

Si prefieres mantener utilidades como esta en local o quieres desplegar una copia dentro de una red cerrada, el proyecto se inicia con solo un par de comandos.

Ejecutar con pnpm

Para desarrollo local con TypeScript y Vite:

# Клонируем репозиторий
git clone https://github.com/zhangyu1818/appicon-forge.git

# Переходим в папку проекта
cd appicon-forge

# Ставим зависимости
pnpm install

# Запускаем локальный dev-сервер
pnpm dev

Después de eso, la interfaz estará disponible en tu navegador en http://localhost:5173/appicon-forge/.

Ejecutar en Docker

Si no quieres lidiar con Node.js y los gestores de paquetes, hay un Dockerfile listo para usar:

git clone https://github.com/zhangyu1818/appicon-forge.git
cd appicon-forge

# Собираем и запускаем контейнер
docker build -t appicon-forge .
docker run -d --name=appicon-forge --restart=always -p 5173:80 appicon-forge

O mediante Docker Compose, si ya tienes infraestructura de servicios en casa configurada:

docker-compose up -d

Para qué tareas es útil

Por supuesto, esta herramienta no reemplazará el trabajo de un diseñador gráfico en branding complejo. Pero para tareas cotidianas de desarrollo, es más que suficiente:

• Prototipos rápidos y proyectos personales que necesitan un marcador de posición limpio en lugar de un cuadrado blanco por defecto.
• Utilidades corporativas internas y paneles de administración donde la velocidad de lanzamiento importa más que un estilo único.
• Crear favicons para sitios web o iconos para manifiestos de PWA.
• Estilizar extensiones de navegador.

El proyecto se distribuye bajo la licencia permisiva MIT. El código es limpio y compacto, así que si quieres, puedes hacer un fork del repositorio y añadir tus propias plantillas de cuadrícula o formatos de exportación específicos para iOS y Android.