Cómo agregar el icono de la aplicación de iPhone con Cordova

Para una aplicación móvil, el icono es una parte integral de una aplicación que lo distingue del resto de la multitud. También es lo primero sobre una aplicación que los usuarios potenciales verán, razón por la cual muchos diseñadores piensan tanto en el diseño de iconos . En esta publicación, después de nuestra discusión sobre cómo crear una aplicación móvil con Cordova , le mostraremos cómo agregar un ícono para su aplicación .

Sin embargo, antes de comenzar, primero debemos preparar los íconos. A continuación, se muestran algunos recursos que pueden resultar útiles:

  • 38 hermosos diseños de íconos de aplicaciones IOS para su inspiración
  • Genere fácilmente iconos de aplicaciones Android o IOS con MakeAppIcon
  • 50 impresionantes diseños de iconos de IOS
  • 20 diseños de iconos móviles planos

Requisito del icono de Apple

Dependiendo de algunos factores, como la versión de iOS, la pantalla en la que estará la aplicación, la cantidad de iconos requeridos, el tamaño y los píxeles pueden diferir mucho. Apple requiere muchos tamaños de íconos diferentes para adaptarse a las pantallas de diálogo de iOS en la página de configuración, la página de búsqueda de Spotlight, la pantalla principal y así sucesivamente.

Deberá tener en cuenta estas especificaciones al crear su icono.

Tamaño / Plataformas
iOS 6.0 / 6.1
iOS 7.0 / 7.1
120 × 120


114 × 114

80 × 80


58 × 58


57 × 57

29 × 29

Crear los iconos

Suponiendo que nuestra aplicación sea compatible con iOS 6.1, necesitaríamos 6 tamaños para el icono. Parece mucho trabajo, ¿eh? Bueno, no se preocupe, ya que puede usar AppIconTemplate . AppIconTemplate es una plantilla de Photoshop y viene con una Acción de Photoshop preestablecida que agilizaría el flujo de trabajo al diseñar y generar múltiples tamaños de íconos.

Descargue y utilice la plantilla en Photoshop y genere el icono con la Acción de Photoshop. A modo de ejemplo, aquí están los iconos que hemos generado con él. El diseño de tu icono probablemente se verá mucho mejor.

Agregar los iconos a la aplicación

Para agregar los íconos, muévalos al /platforms/ios/{AppName}/Resources/icons, que se creó cuando agregamos previamente la plataforma iOS al proyecto con el cordova platformcomando.

Además, es mejor cambiar el nombre de los iconos de acuerdo con la convención de nomenclatura estándar de Apple, como se muestra en la captura de pantalla anterior: icon- [tamaño] – [@ 2x]. @2xEl sufijo se utiliza para abordar la pantalla Retina. Una vez que los íconos estén listos, haga clic en el botón de reproducción para crear la aplicación y mostrarla en el simulador de iPhone. Y debería ver su nuevo ícono, así.

Eliminación del efecto brillante del icono

A veces, el efecto brillante que iOS le da al ícono podría obstruir los detalles del ícono. Si desea eliminar el efecto brillante, abra el {appname}-info.plistarchivo en Xcode. Luego, seleccione para la opción El icono ya incluye efectos de brillo , como se muestra en la siguiente captura de pantalla.

A través de Xcode, reinicie la aplicación. Ahora, como puede ver a continuación, debería encontrar que el icono se muestra sin el efecto brillante.

Conclusión

En esta publicación, hemos agregado el ícono a nuestra aplicación. Suponiendo que haya creado la funcionalidad de la aplicación, ahora estamos un paso más cerca de publicar la aplicación. Lo que debe hacer ahora es hacer que su ícono sea lo más atractivo posible.

Deja un comentario