Saltar al contenido

AppIconGen

Proyectos
(01/11) Herramienta Web · Generador de Iconos

Descripción & Contexto

Generador de iconos y favicons 100% en el navegador. Sube una imagen, texto o emoji y descarga un ZIP listo para iOS, Android, Web y PWA (70+ archivos con sus tamaños y manifiestos). Astro + Canvas, sin servidor. Código privado, demo pública.

AppIconGen nace para resolver un dolor clásico: preparar a mano las decenas de tamaños de icono que piden Xcode, Android Studio y la web. La herramienta lo genera todo en el cliente —sin subir nada a ningún servidor— y entrega un ZIP organizado por carpetas, con sus manifiestos y Contents.json listos para arrastrar al proyecto.

Código Privado Ver Demo
AppIconGen

Características Clave

  • Tres fuentes de entrada

    imagen (PNG/JPG/WebP/SVG), texto (1–3 letras) o emoji, con un catálogo completo por categorías.

  • iOS · Android · Web/PWA

    AppIcon.appiconset (18 tamaños), mipmap por densidad (legacy, redondo y adaptativo), favicons, iconos maskable y Microsoft Tiles.

  • Ajustes finos

    color de fondo con paleta, padding, redondeo, aplanado y selección de plataformas.

  • 100% privado y offline

    todo se procesa con Canvas en tu equipo; nada viaja por la red. Además es instalable como PWA.

  • Multilingüe y con SEO fuerte

    6 idiomas, hreflang, sitemap, JSON-LD y Open Graph.

Arquitectura del Sistema

- Astro (SSG estático) + Tailwind CSS 4 para una interfaz rápida y ligera. - Canvas API para renderizar fielmente cada tamaño; JSZip para empaquetar el resultado. - Content Collections en Markdown para las guías, con el i18n nativo de Astro (6 locales). - TypeScript en los scripts de cliente; despliegue continuo en Vercel.

Retos Técnicos & Soluciones

El mayor reto fue generar decenas de PNG a distintas densidades —incluidos los iconos adaptativos y monocromáticos temáticos de Android 13— de forma fiel y sin bloquear la interfaz, además de construir cada manifiesto (Contents.json, adaptive, browserconfig, site.webmanifest) exactamente como lo espera cada plataforma.

Stack Tecnológico

  • Astro
  • Tailwind CSS
  • TypeScript
  • Canvas API
  • JSZip

Ficha Técnica

Rol
Arquitectura, Diseño y Desarrollo
Tipo
Herramienta Web · Generador de Iconos
Impacto & Resultados
Un ZIP de más de 70 archivos, listo para arrastrar a Xcode, Android Studio o la carpeta web, generado en segundos y sin marca de agua. Todo gratis, sin registro y sin servidor.
Aprendizajes
AppIconGen demuestra cuánto se puede lograr solo en el cliente: una herramienta profesional, multiplataforma y multilingüe, sin un backend que mantener. <div
Código
Código Privado
Enlace
app-icon-gen.vercel.app