Si eres desarrollador de iOS, conoces perfectamente el sentimiento. Has terminado tu app, el código es elegante, las animaciones son fluidas y todo funciona a la perfección. Pero entonces llega el momento de enfrentarse al «Asset Catalog» de Xcode. Tienes un logo precioso en alta resolución y, de repente, te das cuenta de que necesitas exportar manualmente versiones de 20px, 29px, 40px, 60px… y sus respectivos multiplicadores @2x y @3x.

Es una tarea mecánica, tediosa y, sinceramente, una pérdida de tiempo para un programador. Por eso, este fin de semana he decidido solucionar este problema para siempre en mi blog. Hoy os presento el nuevo Generador de App Icons de Necsal, una herramienta creada por y para desarrolladores.

El problema de los 1024 píxeles

Tradicionalmente, para gestionar los iconos de una aplicación en el ecosistema Apple, teníamos tres opciones:

1. Exportación manual: Abrir Photoshop o Sketch, crear 15 mesas de trabajo y exportar una a una. Un error de un píxel en el redimensionado y Xcode te lanzará un aviso de validación.

2. Scripts de terceros: Pequeños comandos de terminal que a menudo se rompen con las actualizaciones de macOS.

3. Herramientas web externas: Existen muchas, pero la mayoría están plagadas de publicidad, te obligan a registrarte o, lo que es peor, suben tu diseño original (que puede ser confidencial) a sus servidores.

Buscando la eficiencia, me di cuenta de que faltaba algo: una herramienta que fuera instantánea, gratuita y, sobre todo, privada.

Presentando el Generador de Necsal: ¿Cómo funciona?

La premisa es sencilla: tú subes un archivo (PNG o JPG) de 1024×1024 píxeles y la web te devuelve un archivo .zip listo para arrastrar y soltar en tu proyecto. Pero no es solo un montón de imágenes sueltas; la magia está en el interior.

1. Procesamiento local (Privacidad ante todo)

A diferencia de otros conversores, el generador de Necsal utiliza la API de Canvas de HTML5. Esto significa que tu imagen nunca viaja por internet. El redimensionado ocurre en la memoria de tu propio navegador. Como desarrollador, valoro la seguridad de los activos de marca, y con este sistema, el riesgo de filtración es cero.

2. El secreto del archivo Contents.json

Cualquiera puede hacer un script que cambie el tamaño de una imagen. Lo que diferencia a una herramienta profesional es el archivo Contents.json. Xcode utiliza este archivo para mapear automáticamente cada imagen con su rol correspondiente (iPhone de 2x, iPad de 3x, Marketing de 1024px, etc.).

Mi generador incluye este archivo estructurado bajo los estándares actuales de Apple. Al descargar el paquete, obtendrás una carpeta llamada AppIcon.appiconset. Si la arrastras a tu carpeta Assets.xcassets, Xcode reconocerá todos los tamaños al instante. Sin arrastrar iconos uno a uno a los «cuadraditos».

La arquitectura técnica: Bajo el capó

Para los curiosos del código, quería compartir cómo he montado esto en WordPress sin morir en el intento. He utilizado una combinación de tres tecnologías clave:

• JavaScript (ES6+): Para gestionar la lógica de carga de archivos y el dibujo en el Canvas.

• JSZip: Una librería increíble que permite crear archivos comprimidos directamente en el cliente.

• FileSaver.js: Para disparar la descarga del archivo resultante de forma limpia en todos los navegadores.

El mayor reto no fue el redimensionado en sí, sino asegurar que la calidad de interpolación del Canvas fuera lo suficientemente alta como para que los iconos pequeños de 40px siguieran viéndose nítidos. Al usar el método drawImage del contexto 2D de HTML5, el navegador aplica algoritmos de suavizado que mantienen la fidelidad del diseño original.

Por qué he integrado esto en Necsal.es

Necsal nació con la idea de ser un diario de aprendizaje sobre programación y tecnología. Pero un blog no tiene por qué ser solo texto. Creo firmemente que las webs de desarrolladores deben ofrecer utilidad real.

Este generador es la primera de una serie de «Micro-herramientas» que quiero integrar en el sitio. No solo me ayuda a mí en mi día a día como desarrollador de iOS, sino que espero que ahorre miles de minutos de trabajo acumulado a la comunidad que lee este blog.

Guía paso a paso para usarlo

Si estás listo para probarlo, aquí tienes el flujo de trabajo ideal:

1. Diseña tu icono: Crea una mesa de trabajo de 1024x1024px. Asegúrate de que no tenga transparencias si es para iOS (Apple las sustituye por negro).

2. Entra en el Generador de Iconos.

3. Sube tu archivo: Admite tanto PNG como JPG.

4. Descarga y descomprime: Obtendrás una carpeta lista para usar.

5. Importa en Xcode: Abre tu proyecto, ve a Assets.xcassets, borra el AppIcon vacío actual y arrastra la carpeta que acabas de descargar.

¿Qué sigue?

Este es solo el principio. Tengo en el roadmap añadir soporte para iconos de Apple Watch, Mac y CarPlay, además de una opción para generar automáticamente la «Splash Screen» o pantalla de carga.

El desarrollo de software se trata de automatizar lo aburrido para centrarnos en lo creativo. Espero que esta pequeña herramienta os ayude a centraros en lo que de verdad importa: picar código y crear apps increíbles.

¿La has probado ya? Si tienes alguna sugerencia de tamaño que falte o alguna mejora en la interfaz, ¡te leo en los comentarios o por redes sociales!

---

Puedes probar la herramienta ahora mismo en: 👉 https://necsal.es/generador-iconos

---

Consejos adicionales para el post:

1. Imágenes: Te recomiendo añadir un par de capturas de pantalla: una de la herramienta en tu web y otra de cómo queda el archivo AppIcon.appiconset ya importado en Xcode con todos los huecos llenos automáticamente. Eso da mucha confianza visual.

2. SEO: He incluido términos como «Asset Catalog», «Xcode», «Contents.json» y «AppIcon.appiconset» de forma natural para que Google te posicione bien cuando la gente busque ayuda sobre estos temas.

3. Redes Sociales: Cuando compartas el enlace el martes, destaca lo de la Privacidad (que la imagen no sale del navegador). Es un punto muy fuerte frente a la competencia.

¡Espero que el lanzamiento el martes sea un éxito!