当用户下载了你的app后他们首先会注意到什么？当他们安装完后第一次启动的时候又会注意到什么呢？

一个应用程序图标和启动画面（启动图像）是每一个app的重要组成部分，但制作起来非常的繁琐。你需要给Android和IOS制作无数的图标，然后还要制作启动页、处理成不同的大小。

为了降低你处理这些事儿时候的压力，我们实现了使用Ionic CLI来生成app的图标和启动页。

针对Android平台：将我们的要替换的启动图标放如android文件夹下。可以分别起名为：mdpi.png(4848),hdpi(7272)、xhdpi(9696)、xxhdpi(144144) 和 xxxhdpiI(192*192)。

针对ios的，待补充。

其中src中的图片路径就为整个项目的相对路径。
我这里偷了个懒，只搞了一个最高像素密度的应用图标（192px*192px）进去，安卓会自动进行压缩。
这里顺便说一下如果要修改应用的名称，只要修改name标签里的内容即可。

这样在命令行中重新运行ionic run android，就能看到应用图标和名字已经被替换了。

启动画面：
将启动画面的图片拷贝到之前的android文件夹下，splash-land-hdpi.png（640480）splash-land-ldpi.png（426 × 320）splash-land-mdpi.png（470 × 320）splash-land-xhdpi.png（960 × 720）splash-port-hdpi.png（480640）splash-port-ldpi.png（320426）splash-port-mdpi.png（320470）splash-port-xhdpi.png（720*960）
（名称可随意，只要和config.xml对应上即可）。

<preference name="SplashScreen" value="screen"/>
<preference name="SplashScreenDelay" value="10000" />

其中10000单位为毫秒，即10秒后隐藏启动画面。如果不写第三句，默认3秒隐藏。

生成这些资源

使用新的CLI，你只需要一个目录和两张图片就可以搞定。图片可以是 .png 的，Photoshop的 .psd，或者Illustrator的 .ai，（例如）命名为icon.png和splash.png。把这些图片放到资源目录 ./resources ，ionic resources 命令就会为项目里的每一个平台生成图标和启动页，把他们交给Ionic的缩放剪切服务器，所以你不需要安装扩展依赖。

$ ionic resources

生成图片之后CLI会更新config.xml来包含图标和启动页，而且这些处理过程都是在Cordova的构建过程中处理的。注意：这个处理过程需要Cordova CLI 的版本是3.6或者更高。

如果你只是更新其中一个资源的话，或者你只希望生成图标而不是两个都生成，ionic resources 命令后面加两个标记允许你为单独生成某一个而不是生成两个。

$ ionic resources --icon
$ ionic resources --splash

图片大小

为了适应每一个平台的各种大小的屏幕，图标和启动页需要满足最小的屏幕的要求。

图标图像的最小尺寸应192×192 PX并且应该没有圆角。注意每一个平台都会影响到图标最后具体的展现，比如，IOS会自动把自身圆角的特性应用到图标上来，所以这些资源文件不应该事先已经被处理成圆角的了。图标模板下载

启动页的尺寸对于不同平台、设备、配置来说都是不同的，这就需要生成各种尺寸大小的图片。源文件的尺寸最小应该是2208×2208 px，并且因为要裁剪成横屏和竖屏，所以图片要居中。启动页设计上需要符合中心。这个模板 为尺寸大小和你设计的图片提供了一些参考。

平台细节

你的app里Android和IOS的图标有啥不同？好的没问难，这个咱也能做到。为了给每个平台生成不同图像，我们把源文件放到各自平台的文件夹下，比如为了给Android生成不同图标，那这个图标的路径应该是 resources/android/icon.png ，IOS图标的路径应该是 resources/ios/icon.png 。这样我们就能生成圆角的IOS图标和Android透明背景的图标。

这只是Ionic为了让开发者的活的更容易点儿，而不是为了找乐子。现在就更新CLI尝试生成资源吧。

$ npm install -g ionic

下一步

在Beta 14版本发布的博客中提到，我们正在努力为Android把Crosswalk整合进CLI，Josh费了可大劲儿了弄出来了，所以后面CLI会添加这个测试版的模块，请继续关注CLI！

• Ionic-CLI Resource Generator Docs
• Cordova Icons and Splash Screens Docs
• Splash screen photoshop template

注意：执行以上命令时需在线！