Skip to content

Commit

Permalink
v0.2.8 - Support for xxhdpi & xxxhdpi on Android
Browse files Browse the repository at this point in the history
  • Loading branch information
eberlitz committed Jul 14, 2016
1 parent 4e3e828 commit 8e2d701
Show file tree
Hide file tree
Showing 4 changed files with 190 additions and 106 deletions.
206 changes: 145 additions & 61 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

# splashicon-generator

Automatic icon and splash screen resizing for PhoneGap. Create an icon in the root folder of your PhoneGap project and use ```icon.png``` and a ```splash.png``` to automatically resize and copy it for all the platforms your project supports (currently works with **iOS**, **Android** and **Windows Phone 8**).
Automatic icon and splash screen resizing for any **Cordova** based applications including **PhoneGap**. It uses an ```icon.png``` and a ```splash.png``` to automatically resize and copy it for all the platforms your project supports (currently works with **iOS**, **Android** and **Windows Phone 8**).

Consider using the base icon and splash images in the `model` folder, so that images are not cropped and resized incorrectly.

Expand Down Expand Up @@ -44,78 +44,162 @@ On windows see http://www.imagemagick.org/script/binary-releases.php#windows

---

### Configuring icons
### Configuring icons for Cordova project

Include in your ```config.xml``` file:

```xml
<icon src="icon.png" />

<icon gap:platform="ios" height="180" src="res/icons/ios/icon-60-3x.png" width="180" />
<icon gap:platform="ios" height="60" src="res/icons/ios/icon-60.png" width="60" />
<icon gap:platform="ios" height="120" src="res/icons/ios/icon-60-2x.png" width="120" />
<icon gap:platform="ios" height="76" src="res/icons/ios/icon-76.png" width="76" />
<icon gap:platform="ios" height="152" src="res/icons/ios/icon-76-2x.png" width="152" />
<icon gap:platform="ios" height="40" src="res/icons/ios/icon-40.png" width="40" />
<icon gap:platform="ios" height="80" src="res/icons/ios/icon-40-2x.png" width="80" />
<icon gap:platform="ios" height="57" src="res/icons/ios/icon-57.png" width="57" />
<icon gap:platform="ios" height="114" src="res/icons/ios/icon-57-2x.png" width="114" />
<icon gap:platform="ios" height="72" src="res/icons/ios/icon-72.png" width="72" />
<icon gap:platform="ios" height="144" src="res/icons/ios/icon-72-2x.png" width="144" />
<icon gap:platform="ios" height="29" src="res/icons/ios/icon-small.png" width="29" />
<icon gap:platform="ios" height="58" src="res/icons/ios/icon-small-2x.png" width="58" />
<icon gap:platform="ios" height="50" src="res/icons/ios/icon-50.png" width="50" />
<icon gap:platform="ios" height="100" src="res/icons/ios/icon-50-2x.png" width="100" />

<icon gap:platform="android" gap:qualifier="ldpi" src="res/icons/android/icon-36-ldpi.png" />
<icon gap:platform="android" gap:qualifier="mdpi" src="res/icons/android/icon-48-mdpi.png" />
<icon gap:platform="android" gap:qualifier="hdpi" src="res/icons/android/icon-72-hdpi.png" />
<icon gap:platform="android" gap:qualifier="xhdpi" src="res/icons/android/icon-96-xhdpi.png" />
<icon gap:platform="android" gap:qualifier="xxhdpi" src="res/icons/android/icon-144-xxhdpi.png" />
<icon gap:platform="android" gap:qualifier="xxxhdpi" src="res/icons/android/icon-192-xxxhdpi.png" />

<icon gap:platform="winphone" src="res/icons/wp8/ApplicationIcon.png" />
<icon gap:platform="winphone" src="res/icons/wp8/Background.png" gap:role="background" />

<platform name="android">
<icon density="ldpi" src="res/icons/android/icon-36-ldpi.png" />
<icon density="mdpi" src="res/icons/android/icon-48-mdpi.png" />
<icon density="hdpi" src="res/icons/android/icon-72-hdpi.png" />
<icon density="xhdpi" src="res/icons/android/icon-96-xhdpi.png" />
<icon density="xxhdpi" src="res/icons/android/icon-144-xxhdpi.png" />
<icon density="xxxhdpi" src="res/icons/android/icon-192-xxxhdpi.png" />
</platform>
<platform name="ios">
<icon height="180" src="res/icons/ios/icon-60-3x.png" width="180" />
<icon height="60" src="res/icons/ios/icon-60.png" width="60" />
<icon height="120" src="res/icons/ios/icon-60-2x.png" width="120" />
<icon height="76" src="res/icons/ios/icon-76.png" width="76" />
<icon height="152" src="res/icons/ios/icon-76-2x.png" width="152" />
<icon height="40" src="res/icons/ios/icon-40.png" width="40" />
<icon height="80" src="res/icons/ios/icon-40-2x.png" width="80" />
<icon height="57" src="res/icons/ios/icon-57.png" width="57" />
<icon height="114" src="res/icons/ios/icon-57-2x.png" width="114" />
<icon height="72" src="res/icons/ios/icon-72.png" width="72" />
<icon height="144" src="res/icons/ios/icon-72-2x.png" width="144" />
<icon height="29" src="res/icons/ios/icon-small.png" width="29" />
<icon height="58" src="res/icons/ios/icon-small-2x.png" width="58" />
<icon height="50" src="res/icons/ios/icon-50.png" width="50" />
<icon height="100" src="res/icons/ios/icon-50-2x.png" width="100" />
</platform>
<platform name="windows">
<icon height="150" src="res/icons/windows/Square150x150Logo.scale-100.png" width="150" />
<icon height="360" src="res/icons/windows/Square150x150Logo.scale-240.png" width="360" />
<icon height="30" src="res/icons/windows/Square30x30Logo.scale-100.png" width="30" />
<icon height="" src="res/icons/windows/Square310x310Logo.scale-100.png" width="" />
<icon height="106" src="res/icons/windows/Square44x44Logo.scale-240.png" width="106" />
<icon height="70" src="res/icons/windows/Square70x70Logo.scale-100.png" width="70" />
<icon height="170" src="res/icons/windows/Square71x71Logo.scale-240.png" width="170" />
<icon height="50" src="res/icons/windows/StoreLogo.scale-100.png" width="50" />
<icon height="120" src="res/icons/windows/StoreLogo.scale-240.png" width="120" />
<icon height="150" src="res/icons/windows/Wide310x150Logo.scale-100.png" width="310" />
<icon height="360" src="res/icons/windows/Wide310x150Logo.scale-240.png" width="744" />
</platform>
<platform name="wp8">
<icon height="99" src="res/icons/wp8/ApplicationIcon.png" width="99" />
<icon height="159" src="res/icons/wp8/Background.png" width="159" />
</platform>
```

---

### Configuring splash
### Configuring splash for Cordova project

Include in your ```config.xml``` file:

```xml
<splash src="splash.png" />

<splash gap:platform="ios" height="480" src="res/screens/ios/screen-iphone-portrait.png" width="320" />
<splash gap:platform="ios" height="960" src="res/screens/ios/screen-iphone-portrait-2x.png" width="640" />
<splash gap:platform="ios" height="1024" src="res/screens/ios/screen-ipad-portrait.png" width="768" />
<splash gap:platform="ios" height="2048" src="res/screens/ios/screen-ipad-portrait-2x.png" width="1536" />
<splash gap:platform="ios" height="768" src="res/screens/ios/screen-ipad-landscape.png" width="1024" />
<splash gap:platform="ios" height="1536" src="res/screens/ios/screen-ipad-landscape-2x.png" width="2048" />
<splash gap:platform="ios" height="1136" src="res/screens/ios/screen-iphone-568h-2x.png" width="640" />
<splash gap:platform="ios" height="1334" src="res/screens/ios/screen-iphone-portrait-667h.png" width="750" />
<splash gap:platform="ios" height="2208" src="res/screens/ios/screen-iphone-portrait-736h.png" width="1242" />
<splash gap:platform="ios" height="1242" src="res/screens/ios/screen-iphone-landscape-736h.png" width="2208" />

<splash gap:platform="android" gap:qualifier="land-hdpi" src="res/screens/android/screen-hdpi-landscape.png" />
<splash gap:platform="android" gap:qualifier="land-ldpi" src="res/screens/android/screen-ldpi-landscape.png" />
<splash gap:platform="android" gap:qualifier="land-mdpi" src="res/screens/android/screen-mdpi-landscape.png" />
<splash gap:platform="android" gap:qualifier="land-xhdpi" src="res/screens/android/screen-xhdpi-landscape.png" />
<splash gap:platform="android" gap:qualifier="land-xxhdpi" src="res/screens/android/screen-xxhdpi-landscape.png" />
<splash gap:platform="android" gap:qualifier="land-xxxhdpi" src="res/screens/android/screen-xxxhdpi-landscape.png" />
<splash gap:platform="android" gap:qualifier="port-hdpi" src="res/screens/android/screen-hdpi-portrait.png" />
<splash gap:platform="android" gap:qualifier="port-ldpi" src="res/screens/android/screen-ldpi-portrait.png" />
<splash gap:platform="android" gap:qualifier="port-mdpi" src="res/screens/android/screen-mdpi-portrait.png" />
<splash gap:platform="android" gap:qualifier="port-xhdpi" src="res/screens/android/screen-xhdpi-portrait.png" />
<splash gap:platform="android" gap:qualifier="port-xxhdpi" src="res/screens/android/screen-xxhdpi-portrait.png" />
<splash gap:platform="android" gap:qualifier="port-xxxhdpi" src="res/screens/android/screen-xxxhdpi-portrait.png" />

<splash gap:platform="winphone" src="res/screens/wp8/SplashScreenImage.jpg" />
<splash gap:platform="winphone" src="res/screens/wp8/SplashScreenImage.screen-720p.jpg" />
<splash gap:platform="winphone" src="res/screens/wp8/SplashScreenImage.screen-WVGA.jpg" />
<splash gap:platform="winphone" src="res/screens/wp8/SplashScreenImage.screen-WXGA.jpg" />
<platform name="android">
<splash density="land-hdpi" src="res/screens/android/screen-hdpi-landscape.png" />
<splash density="land-ldpi" src="res/screens/android/screen-ldpi-landscape.png" />
<splash density="land-mdpi" src="res/screens/android/screen-mdpi-landscape.png" />
<splash density="land-xhdpi" src="res/screens/android/screen-xhdpi-landscape.png" />
<splash density="land-xxhdpi" src="res/screens/android/screen-xxhdpi-landscape.png" />
<splash density="land-xxxhdpi" src="res/screens/android/screen-xxxhdpi-landscape.png" />
<splash density="port-hdpi" src="res/screens/android/screen-hdpi-portrait.png" />
<splash density="port-ldpi" src="res/screens/android/screen-ldpi-portrait.png" />
<splash density="port-mdpi" src="res/screens/android/screen-mdpi-portrait.png" />
<splash density="port-xhdpi" src="res/screens/android/screen-xhdpi-portrait.png" />
<splash density="port-xxhdpi" src="res/screens/android/screen-xxhdpi-portrait.png" />
<splash density="port-xxxhdpi" src="res/screens/android/screen-xxxhdpi-portrait.png" />
</platform>
<platform name="ios">
<splash height="480" src="res/screens/ios/screen-iphone-portrait.png" width="320" />
<splash height="960" src="res/screens/ios/screen-iphone-portrait-2x.png" width="640" />
<splash height="1024" src="res/screens/ios/screen-ipad-portrait.png" width="768" />
<splash height="2048" src="res/screens/ios/screen-ipad-portrait-2x.png" width="1536" />
<splash height="768" src="res/screens/ios/screen-ipad-landscape.png" width="1024" />
<splash height="1536" src="res/screens/ios/screen-ipad-landscape-2x.png" width="2048" />
<splash height="1136" src="res/screens/ios/screen-iphone-568h-2x.png" width="640" />
<splash height="1334" src="res/screens/ios/screen-iphone-portrait-667h.png" width="750" />
<splash height="2208" src="res/screens/ios/screen-iphone-portrait-736h.png" width="1242" />
<splash height="1242" src="res/screens/ios/screen-iphone-landscape-736h.png" width="2208" />
</platform>
<platform name="windows">
<splash height="300" src="res/screens/windows/SplashScreen.scale-100.png" width="620" />
<splash height="1920" src="res/screens/windows/SplashScreen.scale-240.png" width="1152" />
<splash height="1920" src="res/screens/windows/SplashScreenPhone.scale-240.png" width="1152" />
</platform>
<platform name="wp8">
<splash height="1280" src="res/screens/wp8/SplashScreenImage.jpg" width="768" />
<splash height="1280" src="res/screens/wp8/SplashScreenImage.screen-720p.jpg" width="720" />
<splash height="800" src="res/screens/wp8/SplashScreenImage.screen-WVGA.jpg" width="480" />
<splash height="1280" src="res/screens/wp8/SplashScreenImage.screen-WXGA.jpg" width="768" />
</platform>
```

---

### Configuring splash and icon for PhoneGap project

You can use the same configuration of an cordova project just adjusting the xml elements as their documentation says:

[http://docs.phonegap.com/phonegap-build/configuring/icons-and-splash/](http://docs.phonegap.com/phonegap-build/configuring/icons-and-splash/)

---

### Generate custom assets

You can use this package under node to specify custom assets. I personally use this for adding a custom Icon for Push on android. That needs to be an icon with transparency.
I use it with gulp like this:

```js
var splashiconGenerator = require("splashicon-generator");

gulp.task('generate-splashicon', function(done) {
// Generate all the default assets
splashiconGenerator.generate()
.then(function() {

// Configure the custom assets with their sizes
var options = {
ICON_FILE: path.join('model', 'pushicon.png'),
SPLASH_FILE: '', // ignore plash generation
ICON_PLATFORMS: [{
name: 'android-push-icon',
iconsPath: 'res/icons/android/',
isAdded: true,
icons: [
{ name: 'push-icon-36-ldpi.png', size: 36, density: 'ldpi' },
{ name: 'push-icon-48-mdpi.png', size: 48, density: 'mdpi' },
{ name: 'push-icon-72-hdpi.png', size: 72, density: 'hdpi' },
{ name: 'push-icon-96-xhdpi.png', size: 96, density: 'xhdpi' },
{ name: 'push-icon-144-xxhdpi.png', size: 144, density: 'xxhdpi' },
{ name: 'push-icon-192-xxxhdpi.png', size: 192, density: 'xxxhdpi' }
]
}]
};
// Generate only the custom assets specified in the `options` parameter
splashiconGenerator.generate(options).then(function() {
done();
});
});
});
```

Then just add it to the `config.xml`:

```xml
<!-- pushicon -->
<platform name="android">
<icon density="ldpi" src="res/icons/android/push-icon-36-ldpi.png" />
<icon density="mdpi" src="res/icons/android/push-icon-48-mdpi.png" />
<icon density="hdpi" src="res/icons/android/push-icon-72-hdpi.png" />
<icon density="xhdpi" src="res/icons/android/push-icon-96-xhdpi.png" />
<icon density="xxhdpi" src="res/icons/android/push-icon-144-xxhdpi.png" />
<icon density="xxxhdpi" src="res/icons/android/push-icon-192-xxxhdpi.png" />
</platform>
```

---
Expand Down
Binary file added icon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 0 additions & 1 deletion index.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
var fs = require('fs');
var path = require('path');
var xml2js = require('xml2js');
var ig = require('imagemagick');
var colors = require('colors');
var _ = require('underscore');
Expand Down
89 changes: 45 additions & 44 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,46 +1,47 @@
{
"name": "splashicon-generator",
"version": "0.2.7",
"description": "Automatic icon & splash resizing for PhoneGap",
"main": "index.js",
"preferGlobal": "false",
"bin": {
"splashicon-generator": "./bin/splashicon-generator"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git://github.com/eberlitz/splashicon-generator.git"
},
"keywords": [
"cordova",
"phonegap",
"icon",
"splash",
"resize"
],
"author": {
"name": "Eduardo Eidelwein Berlitz",
"email": "[email protected]"
},
"license": "MIT",
"bugs": {
"url": "https://github.com/eberlitz/splashicon-generator/issues"
},
"homepage": "https://github.com/eberlitz/splashicon-generator",
"dependencies": {
"colors": "^0.6.2",
"imagemagick": "^0.1.3",
"node-fs": "^0.1.7",
"q": "^1.0.1",
"underscore": "^1.6.0",
"xml2js": "^0.4.3",
"yargs": "^3.8.0"
},
"contributors": [{
"name": "Luiz Pereira de Souza Filho",
"email": "[email protected]"
}]
"name": "splashicon-generator",
"version": "0.2.8",
"description": "Automatic icon & splash resizing for PhoneGap",
"main": "index.js",
"preferGlobal": false,
"bin": {
"splashicon-generator": "./bin/splashicon-generator"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git://github.com/eberlitz/splashicon-generator.git"
},
"keywords": [
"cordova",
"phonegap",
"icon",
"splash",
"resize"
],
"author": {
"name": "Eduardo Eidelwein Berlitz",
"email": "[email protected]"
},
"license": "MIT",
"bugs": {
"url": "https://github.com/eberlitz/splashicon-generator/issues"
},
"homepage": "https://github.com/eberlitz/splashicon-generator",
"dependencies": {
"colors": "^0.6.2",
"imagemagick": "^0.1.3",
"node-fs": "^0.1.7",
"q": "^1.0.1",
"underscore": "^1.6.0",
"yargs": "^3.8.0"
},
"contributors": [
{
"name": "Luiz Pereira de Souza Filho",
"email": "[email protected]"
}
]
}

0 comments on commit 8e2d701

Please sign in to comment.