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.
Índice
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-resSi solo lo queremos para este proyecto añadimos el —save
npm install -g cordova-res --save2. Convertir las imágenes
cordova-res ios --skip-config --copycordova-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.