Generar Icon y Splash en ionic

Es muy necesario para nuestros proyectos Ionic añadir iconos a nuestras Apps. En el caso de usar Ionic, podemos compilar para subir y ser aceptados en dispositivos móviles mediante Play Store & Otras. Por lo que adicionalmente, necesitamos crear splash screens para ellos. Empecemos por lo más sencillo, cambiar nuestro favicon.

Al generar nuestra aplicación Ionic, por defecto, tenemos un archivo icono en la ruta /assets/icons/ que es el que vemos como favicon en las pestañas del navegador chrome. Sólo tenemos que sustituirlo dejando el mismo nombre para que el index.html lo pueda seguir leyendo. Puede estar en formato PNG, ICO o SVG. Sin embargo, recomendamos mantenerlo PNG y en 512×512.

El siguiente paso sería generar los iconos utilizados en nuestras compilaciones en PWA. Instalamos el módulo ‘@capacitor/assets’ usando el siguiente comando:

npm install @capacitor/assets --save-dev

Luego de que se instalen todas las dependencias tenemos que crear/editar los archivos necesarios en un editor de fotos (Puedes usar nuestra herramienta online). Para el icon debe contar con transparencia, pero para el splash sin transparencia y el dark splash tampoco debe contrar con transparencia. Estas seran las imágenes que se utilizarán como iconos y pantallas de inicio (Primer Screen), respectivamente.

Estas son las reglas específicas que deben cumplir sus archivos para este proceso:

El icono de inicio deben tener un tamaño de 1024px x 1024px.
Su pantalla de inicio debe tener un tamaño de 2732px x 2732px.
Todos sus formatos de imagen pueden ser jpeg o png preferiblemente PNG.
Creamos dos nuevos archivos en cualquier editor de imagenes, para esto puedes usar nuestra herramienta online con las dimensiones dadas y disponemos la imagen que se utilizará en nuestra aplicación.

Usted deberá crear un nuevo directorio en la raíz de su proyecto con el nombre ‘resources’ y dentro, debemos guardar nuestras imágenes listas para ser procesadas. Los archivos deben ser nombrados de una manera particular. A continuación listamos los nombres necesarios. Proporcionar iconos personalizados e imágenes de origen de la pantalla de inicio como se muestra a continuación:

assets/
├── icon-background.png
├── splash-dark.png
├── icon-only.png
├── splash.png
└── icon-foreground.png

Entonces, Al final sus archivos deberán quedar de la siguiente manera:

Ya estamos listos para generar nuestros icon y splash. Entonces, para continuar, necesitamos compilar nuestra aplicación. Para ello, utilizamos:

ionic build

Si estás planeando publicar tu aplicación en la tienda Google Play, entonces necesitarás asegurarte de que la plataforma Android necesaria está añadida a tu proyecto Ionic, de ser así, encontraras una carpeta llamada android en tu carpeta principal, de lo contrario ejecuta el siguiente comando:

npm install @capacitor/android
npx cap add android

Y finalmente, para abrir tu carpeta android con android studio puedes usar el siguiente comando. Si necesitas ayuda para compilar tu proyecto para android a Google Play por Android Studio para celulares con sistemas operativos android te recomendamos que veas nuestro tutorial, como Generar Icon y Splash en ionic:

npx cap open android.