Cómo generar los resources en proyectos Capacitor (iconos y splash screens)

Cuando desarrollas una app con Capacitor, uno de los últimos pasos antes de publicarla es preparar los iconos y las pantallas de carga (splash screens). Aunque pueda parecer algo menor, estos elementos son esenciales para ofrecer una buena primera impresión y una experiencia visual profesional.

Afortunadamente, Capacitor simplifica este proceso gracias a la herramienta oficial @capacitor/assets, que genera automáticamente todos los tamaños y versiones necesarias para iOS, Android o incluso para tu aplicación PWA.

Ventajas principales:

• ✅ Ahorra tiempo y evita errores manuales.

• ✅ Garantiza compatibilidad con todas las resoluciones de Android e iOS.

• ✅ Permite incluir recursos para PWA y su manifest.json.

• ✅ Se integra perfectamente con proyectos Capacitor existentes.

1. Instalar la herramienta

Lo primero es instalar el paquete de generación de recursos como dependencia de desarrollo:

npm install @capacitor/assets --save-dev

Esto añadirá la utilidad al proyecto para que puedas ejecutarla fácilmente con npx.

2. Estructura de archivos recomendada

Antes de generar nada, necesitas preparar tus imágenes base. Capacitor espera que las coloques en la siguiente estructura en la raíz del proyecto dentro de tu carpeta assets/:

Recomendaciones de tamaño y formato:

• Los iconos deben tener al menos 1024×1024 píxeles.

• Las pantallas de carga deben tener al menos 2732×2732 píxeles.

• Se admiten formatos .png y .jpg, aunque se recomienda PNG por su soporte de transparencia.

3. Generar los resources

Una vez tengas tus imágenes preparadas, ejecuta el siguiente comando:

npx capacitor-assets generate

Este comando analiza tus archivos y genera todos los tamaños requeridos para Android e iOS, aplicándolos directamente sobre tus proyectos nativos.

Además, si tu proyecto incluye soporte PWA, la herramienta también actualizará el archivo manifest.json con los iconos correspondientes, asegurando una integración completa entre todas las plataformas.

Por ejemplo, para Android, se crearán automáticamente los directorios con diferentes densidades (mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi) con las versiones correctas del icono y del splash screen.

Aquí vemos como se genera para Android todos los directorios y tamaños necesarios:

No olvides sincronizar los cambios con Capacitor:

npx cap sync

npx cap open android