Cambiar Icono de aplicación y pantalla de carga con Ionic

• 17/04/2023
• 0 Comentarios

Cómo cambiar el icono y la pantalla de nuestra aplicación desarrollada con Ionic

En este post vamos a aprender como podemos cambiar el icono y la pantalla de carga(Splash Screen) de nuestra aplicación móvil desarrollada con el framework Ionic en su version 6.0 mediante el uso de Capacitor.

Crear Icono y Pantalla de Carga

Antes de nada necesitarás algún programa de diseño para crear el icono de la aplicación, como puede ser Figma(es el que utilizo yo), Illustrator o alguna aplicación web como puede ser Canvas.

Una vez tenemos nuestro icono en svg necesitaremos exportarlo en los siguientes tamaños y en formato PNG:
- Icono de la aplicación: 1024 x 1024 px
- Pantalla de Carga pequeña 2732 x 2732 px
- Pantalla de Carga grande 4096 x 4096 px

Por ejemplo, estos son los iconos que utilicé para una de mis aplicaciones:

---

Descargar todos los iconos y pantallas de carga

Ahora que tenemos ya los iconos mencionados anteriormente vamos generar todo lo necesario.

Vamos a la siguiente web y subimos el icono (1024 x 1024 px) y la pantalla de carga (4096 x 4096 px) que hemos creado en el paso anterior.

Esta es la web:

Una vez hemos seleccionado el icono y la pantalla de carga deberemos marcar Android(Ionic) y iOS(Ionic). Como puedes ver en la siguiente imagen:

Por último descargamos el zip

Una vez tenemos el ZIP lo descomprimimos y tendremos una carpeta que se llama bundle dentro habrá otra carpeta llamada ionic y dentro de esta una llamada resources. Copiamos esta carpeta resources en la carpeta raiz del proyecto es decir al nivel de public, src, test etc.

Despues en esta carpeta resources deberemos añadir nuestro icono de 1024 x 1024px(Lo he llamado icon.png) y la pantalla de carga de 2732 x 2732 px(Lo he llamado splash.png), con lo que la carpeta quedaría así:

---

Añadir los iconos a la Aplicacion

Ya tenemos los iconos y las pantallas de carga en los tamaños necesarios, para añadirlos a nuestra aplicación tendremos que ejecutar los siguientes comandos de terminal:

1. Instalar cordova-res si no lo tenemos, para ello usamos el siguiente comando:

npm install -g cordova-res

Si solo lo queremos para este proyecto añadimos el —save

npm install -g cordova-res --save

2. Convertir las imágenes

cordova-res ios --skip-config --copy

cordova-res android --skip-config --copy

Una vez hagamos todo esto ya tendremos nuestra aplicación con el icono y la página de carga que hayamos creado.