Personalizar ícono, splash screen y nombre de una app IONIC

joseucarvajal IONIC Framework,

En este breve post les mostraré como personalizar el ícono y el nombre de una app.

Uno de los grandes problemas al desarrollar para múltiples plataformas y dispositivos son sus diferencias en tamaños, resoluciones, etc…, este inconveniente radica en el gran esfuerzo necesario para generar iconografía acorde a cada una de las plataformas y dispositivos.

Para resolver este problema, IONIC cuenta con herramientas para automatizar el proceso de generación de íconos y splash screen’s.

Cambiar el título de la aplicación:

Inicialmente, vamos a cambiar el título de la aplicación, para ello, basta con editar el archivo config.xml.

Una vez abierto el archivo, simplemente cambiamos el tag de según nuestra preferencia:

Generación de ícono personalizado:

Para personalizar el ícono, lo primero es disponer de una imagen que debe llamarse (icon.png, icon.psd o icon.ai), esta imagen la debemos ubicar en la carpeta resources de nuestro proyecto:

A parte de que la imagen debe llamarse icon.png, icon.psd o icon.ai, también debe tener un tamaño mayor a 192×192 pixels.

Una vez tenemos la imagen personalizada en la carpeta resources, debemos indicarle a IONIC, mediante el CLI (Command Line Interface) que nos genere los íconos para las diferentes plataformas/resoluciones, etc… para esto, debemos ubicarnos en el proyecto y ejecutar el comando: ionic resources –icon:

Podemos ver como IONIC nos indica que el proceso se ha realizado satisfactoriamente. Podemos verificar esta tarea en la carpeta resources/android/icon:

Con el editor de imágenes online: http://www.online-image-editor.com/ , podemos darle transparencia al fondo de nuestro ícono, dotándolo de una apariencia más profesional.

Generación de Splash Screen:

El Splash Screen es la pantalla de presentación que visualizará por algunos segundos el usuario de nuestra aplicación, esta pantalla no siempre se muestra si nuestra app inicia muy rápido. Para generar el splash screen, es similar a la generación del ícono, solamente debemos ubicar un archivo (splash.png, splash.psd o splash.ai) dentro de la carpeta recursos, es importante recordar que este ícono splash, debe tener al menos 2208×2208 pixels.

Finalmente, ubicados en nuestra carpeta de proyecto, ejecutamos el comando: ionic-resources –splash.

Verificándolo en resources, podemos observar que se han generado los diferentes splash screen para Android:

Con esto, los íconos de nuestra app tendrían la siguiente apariencia en el dispositivo:

12 comentarios en “Personalizar ícono, splash screen y nombre de una app IONIC”

  5. Excelente, muchas gracias ! He podido generar el icono tal como lo indicas, pero la splash no se muestra, solo veo una pantalla negra por algunos segundos. En la carpeta resources tengo splash.png 2475 x 2208. Si verifico en la carpeta …\resources\android\splash, los archivos han sido generados (12 archivos), sin embargo, cuando lanzo la apk instalada en mi celular, no veo la splashcomo te indiqué antes. Te agradeceré si tienes alguna sugerencia. Muchas gracias !

    Me gusta

    Responder

    • Hola Guillermo,

      Intenta recompilando tu App y publicandola en otro dispositivo. A veces también sucede que el App inicia demasiado rápido y no se alcanza a ver el Splash-screen.

      Como te decía anteriormente, lo que puede suceder es que la imagen no es perfectamente compatible con la resolución del dispositivo que estás utilizando para visualizarla (este mecanismo de generación de splash screen no es perfecto), así que puedes visualizarla en otro dispositivo y hacerle los ajustes correspondientes.

      Me gusta

      Responder

  6. Hola!
    No me genera los diferentes tamaños el icon.png, en la consola después de dar «ionic resources –icon» me aparece:

    Ionic icon resources generator
    uploading icon.png…

    y me regresa a la dirección de mi proyecto.

    Me gusta

    Responder

Deja un comentario