Generación de iconos de iOS y Android en Cordova / PhoneGap

Escribí un script que auto genera iconos para Córdoba usando ImageMagick:

https://github.com/AlexDisler/cordova-icon

Para usarlo, cree un archivo "icon.png" y colóquelo en la carpeta raíz de su proyecto, luego ejecute:

 cordova-icon 

Y generará todos los iconos necesarios para las plataformas de su proyecto.

También puedes configurarlo como un gancho en tu proyecto cordova para que los iconos se generen cada vez que construyas el proyecto basado en el icono.png que hayas añadido. (Instrucciones en el readme).

Si está utilizando cordova 3.5.0 han actualizado los documentos. En las versiones anteriores siempre he tenido que reemplazar los iconos manualmente en el proyecto, pero la última versión de cordova está funcionando bien.

http://cordova.apache.org/docs/en/3.5.0/config_ref_images.md.html#Icons%20and%20Splash%20Screens

Como se puede ver aquí https://github.com/phonegap/phonegap-cli/issues/58 ha sido un problema común. Así que si usted está usando una versión anterior de cordova recomiendo actualizarlo con el comando npm update -g cordova

Y después de eso debes actualizar tu config.xml a algo como esto:

  <icon src="www/res/drawable-xxxhdpi/icon.png" /> <platform name="android"> <icon src="www/res/drawable-ldpi/icon.png" density="ldpi" /> <icon src="www/res/drawable-mdpi/icon.png" density="mdpi" /> <icon src="www/res/drawable-hdpi/icon.png" density="hdpi" /> <icon src="www/res/drawable-xhdpi/icon.png" density="xhdpi" /> </platform> <platform name="ios"> <!-- iOS 7.0+ --> <!-- iPhone / iPod Touch --> <icon src="www/res/ios/icon-60.png" width="60" height="60" /> <icon src="www/res/ios/[email protected]" width="120" height="120" /> <!-- iPad --> <icon src="www/res/ios/icon-76.png" width="76" height="76" /> <icon src="www/res/ios/[email protected]" width="152" height="152" /> <!-- iOS 6.1 --> <!-- Spotlight Icon --> <icon src="www/res/ios/icon-40.png" width="40" height="40" /> <icon src="www/res/ios/[email protected]" width="80" height="80" /> <!-- iPhone / iPod Touch --> <icon src="www/res/ios/icon.png" width="57" height="57" /> <icon src="www/res/ios/[email protected]" width="114" height="114" /> <!-- iPad --> <icon src="www/res/ios/icon-72.png" width="72" height="72" /> <icon src="www/res/ios/[email protected]" width="144" height="144" /> <!-- iPhone Spotlight and Settings Icon --> <icon src="www/res/ios/icon-small.png" width="29" height="29" /> <icon src="www/res/ios/[email protected]" width="58" height="58" /> <!-- iPad Spotlight and Settings Icon --> <icon src="www/res/ios/icon-50.png" width="50" height="50" /> <icon src="www/res/ios/[email protected]" width="100" height="100" /> </platform> 

Como puede ver los URIs son relativos a la ruta del proyecto cordova, no a la carpeta www.

La configuración config.xml de los iconos sólo funciona con el servicio PhoneGap Build. Después de agregar las dos plataformas que necesita manualmente (o puede crear un gancho, pero no lo he hecho yo mismo) colocar sus iconos en las rutas correctas.

Para iOS:

 PROJECT_PATH/platforms/ios/PROJECT_NAME/Resources/icons 

Para Android:

 PROJECT_PATH/platforms/android/res/drawable 

Android tiene muchas carpetas res/drawable-* , el uso se aplica a su aplicación, pero al mínimo agregar a res/drawable

Corra entonces cordova prepare o build o run

Si está dispuesto a instalar software adicional para la generación de iconos, puede utilizar Ionic que tiene tal función.

Haz lo siguiente:

1. npm install ionic -g
2. Coloque los archivos png, psd o .ai para iconos y / o ${project_location}/resources a ${project_location}/resources
3. ionic resources

Si desea generar iconos sólo hay una tecla útil para eso:

 ionic resources --icon 

Más detalles aquí

¿No es necesario especificar la carpeta que tiene el icono en él? Cordova sustituye el icono por el predeterminado cuando no se encuentra.

¿Ha intentado reemplazar con algo como:

 <icon src="res/icon.png" /> 

Intente seguir https://www.npmjs.org/package/cordova-gen-icon

Ejemplo:

 $ cordova create hello com.example.hello Creating a new cordova project with name "HelloCordova" and id "com.example.hello" at location "hello" $ cd hello $ cordova platform add ios Creating ios project... Preparing ios project $ cordova-gen-icon Generate cordova icons with project: . icon : ./www/img/logo.png target : generate iOS icons Success generate icon set 

Un poco de explicación para la gente que dice <icon src="res/icon.png" /> No funciona!

Debes poner icon.png en ambas carpetas

Project_name / res /

y

Nombre_proyecto / plataformas / nombre_planta / res /

Pasos:

 cordova create hello com.example.hello HelloWorld cd hello 

Copia tu icon.png a project_name/res/ Abre config.xml y pone <icon src="res/icon.png" />

Después de esa carrera

 cordova platform add android 

Ahora copia tu icon.png a … hello/platforms/android/res/

entonces

 cordova build android 

y finalmente

 adb install platforms/android/build/outputs/apk/android-debug.apk 

Después puedes ver en el dispositivo tu aplicación con tu icono