Aplicaciones Web

Personalizar Icono y Splash en Ionic

Personalizar Icono y Splash en Ionic

Retomando el proyecto anterior Ionic Framework y Google Maps, ahora lo que vamos hacer es cambiar el ícono de la aplicación y la primera pantalla antes de entrar a nuestro programa ya sea desde ios o android, recordemos que esas son unas de las principales ventajas al realizar una aplicación híbrida, se escribe una vez el código y se compila para cualquier plataforma.

Creación de Icono

Ahora bien vamos abrir cualquier editor de imágenes, en mi caso, estaré abriendo photoshop. Una vez que tengamos abierto la aplicación debemos de crear una plantilla con las medidas 192X192 px y el fondo debe de ser transparente.

tamaño icono ionic

 

Ya teniendo las medidas en nuestro editor de fotografía ahora es turno de insertar tu logo y ajustarlo para que al momento de compilarlo se generen los demás tamaños que maneja ionic.

logo mokware

 

Después de insertarlo debemos de guardar la imagen en la carpeta de resources con el nombre de icon.png, abrimos la terminal y agregamos la línea de comando para que ionic nos actualice las demás imágenes con los diferentes tamaños.
Dentro de la consola escribimos la siguiente línea ionic resources –icon

ionic resources

Ya con eso generó los iconos para los diferentes tamaños de acuerdo el dispositivo con el que se esté abriendo.

iconos mokware

 

SPLASH

Prácticamente lo que se realizó para modificar el ícono se debe de hacer per para el splash, primero debemos de crear la nueva plantilla en photoshop con las medidas 2268px × 2300px, después se  agregamos la imagen junto con nuestro logotipo y lo guardaremos en la misma ruta de resources con el nombre de splash.png.

splash mokware

Y así quedaría con nuestra imagen.

final splash mokware

 

Abrimos la terminal y escribimos el comando;

ionic resources –splash

ionic splash

Por último para personalizar más nuestra aplicación abrimos el archivo config.xml y modificamos los tags:

  1. Name: Es el nombre de la aplicación
  2. Description
  3. Author

mokware config

Y finalmente compilaremos nuestra aplicación ya sea para ios o android desde la terminal;

Para ios;  ionic build ios

Para android; ionic build android

 


icono iphone

splash

 

Recuerde compartir estos tutoriales y ya estaremos subiendo más sobre ésta gran herramienta de Ionic Framework

creating-cross-platform-apps-using-ionic-framework

 

 

Please follow and like us:
0

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *