You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@cordova.apache.org by bh...@apache.org on 2014/04/24 15:19:56 UTC
[2/2] docs commit: CB-2606 Documented icon usage
CB-2606 Documented icon usage
1. iOS, Andoroid, FirefoxOS, Windows8, WP8
2. Related PR with support https://github.com/apache/cordova-cli/pull/126
Project: http://git-wip-us.apache.org/repos/asf/cordova-docs/repo
Commit: http://git-wip-us.apache.org/repos/asf/cordova-docs/commit/51a296ae
Tree: http://git-wip-us.apache.org/repos/asf/cordova-docs/tree/51a296ae
Diff: http://git-wip-us.apache.org/repos/asf/cordova-docs/diff/51a296ae
Branch: refs/heads/master
Commit: 51a296ae367b01a480defba5bf818b2cff7cb790
Parents: f5e3125
Author: sgrebnov <v-...@microsoft.com>
Authored: Thu Apr 3 16:34:51 2014 +0400
Committer: Bryan Higgins <bh...@blackberry.com>
Committed: Thu Apr 24 09:19:21 2014 -0400
----------------------------------------------------------------------
docs/en/edge/config_ref/images.md | 85 +++++++++++++++++++++++-----------
1 file changed, 58 insertions(+), 27 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/cordova-docs/blob/51a296ae/docs/en/edge/config_ref/images.md
----------------------------------------------------------------------
diff --git a/docs/en/edge/config_ref/images.md b/docs/en/edge/config_ref/images.md
index 27be27f..9bdf938 100644
--- a/docs/en/edge/config_ref/images.md
+++ b/docs/en/edge/config_ref/images.md
@@ -26,45 +26,76 @@ SDK tools (detailed in the Platform Guides).
## Configuring Icons in the CLI
-When working in the CLI, icon source files are located within various
-platform-specific subdirectories within the project's `www/res/icons`
-directory. Newly created projects come with a default set of Cordova
-icons for you to replace for the platforms you wish to target.
+When working in the CLI you can define app icon(s) via `<icon>` element (`config.xml`).
+If you do not specify an icon then the Apache Cordova logo is used.
-Android specifies icons for low, medium, high, and extra-high resolutions:
+ <icon src="res/ios/icon.png" platform="ios" width="57" height="57" density="mdpi" />
- android/icon-36-ldpi.png
- android/icon-48-mdpi.png
- android/icon-72-hdpi.png
- android/icon-96-xhdpi.png
+src: (required) specifies the location of the image file, relative to your www directory
-The iOS platform specifies 72-pixel-square icons for iPads, and
-57-pixel icons for iPhones and iPods, with high-resolution _2x_
-variants for retina displays:
+platform: (optional) target platform
- ios/icon-57-2x.png
- ios/icon-57.png
- ios/icon-72-2x.png
- ios/icon-72.png
+width: (optional) icon width in pixels
-Windows Phone specifies a default 48-pixel icon, along with various
-devices' background tiling images used when representing applications:
+height: (optional) icon height in pixels
- windows-phone/icon-48.png
- windows-phone/icon-62-tile.png
- windows-phone/icon-173-tile.png
+density: (optional) android specific, specifies icon density
-Blackberry 10 requires an icon element in config.xml:
+The following configuration can be used to define single default icon
+which will be used for all platforms.
- <icon src="blackberry10/icon-86.png" />
+ <icon src="res/icon.png" />
-See BlackBerry's documentation for targeting multiple sizes and locales.
+For each platform you can also define a pixel-perfect icons set to fit
+best different screen resolutions.
-[http://developer.blackberry.com/html5/documentation/icon_element.html]
+iOS
-Tizen requires an 128-pixel icon:
+ <!-- iPhone / iPod Touch -->
+ <icon src="res/ios/icon-60.png" platform="ios" width="60" height="60" />
+ <icon src="res/ios/icon-60@2x.png" platform="ios" width="120" height="120" />
+ <!-- iPad -->
+ <icon src="res/ios/icon-76.png" platform="ios" width="76" height="76" />
+ <icon src="res/ios/icon-76@2x.png" platform="ios" width="152" height="152" />
+ <!-- iOS 6.1 -->
+ <!-- Spotlight Icon -->
+ <icon src="res/ios/icon-40.png" platform="ios" width="40" height="40" />
+ <icon src="res/ios/icon-40@2x.png" platform="ios" width="80" height="80" />
+ <!-- iPhone / iPod Touch -->
+ <icon src="res/ios/icon.png" platform="ios" width="57" height="57" />
+ <icon src="res/ios/icon@2x.png" platform="ios" width="114" height="114" />
+ <!-- iPad -->
+ <icon src="res/ios/icon-72.png" platform="ios" width="72" height="72" />
+ <icon src="res/ios/icon-72@2x.png" platform="ios" width="144" height="144" />
+ <!-- iPhone Spotlight and Settings Icon -->
+ <icon src="res/ios/icon-small.png" platform="ios" width="29" height="29" />
+ <icon src="res/ios/icon-small@2x.png" platform="ios" width="58" height="58" />
+ <!-- iPad Spotlight and Settings Icon -->
+ <icon src="res/ios/icon-50.png" platform="ios" width="50" height="50" />
+ <icon src="res/ios/icon-50@2x.png" platform="ios" width="100" height="100" />
- tizen/icon-128.png
+Android
+
+ <icon src="res/android/ldpi.png" platform="android" density="ldpi" />
+ <icon src="res/android/mdpi.png" platform="android" density="mdpi" />
+ <icon src="res/android/hdpi.png" platform="android" density="hdpi" />
+ <icon src="res/android/xhdpi.png" platform="android" density="xhdpi" />
+
+Windows Phone8
+
+ <icon src="res/wp/ApplicationIcon.png" platform="wp8" width="99" height="99" />
+ <!-- tile image -->
+ <icon src="res/wp/Background.png" platform="wp8" width="159" height="159" />
+
+Windows8
+
+ <icon src="res/windows8/logo.png" platform="windows8" width="150" height="150" />
+ <icon src="res/windows8/smalllogo.png" platform="windows8" width="30" height="30" />
+ <icon src="res/windows8/storelogo.png" platform="windows8" width="50" height="50" />
+
+Firefox OS
+
+ <icon src="res/ff/logo.png" platform="firefoxos" width="60" height="60" />
## Configuring Splash Screens in the CLI