在 Cordova / PhoneGap 中生成 iOS 和 Android 图标

Generating iOS and Android icons in Cordova / PhoneGap

提问by aporat

I have a freshly created Cordova project with the following config.xmlsetup (used the instructions from http://docs.phonegap.com/en/edge/config_ref_images.md.html). I also added 2 platforms (iOS and Android).

我有一个新创建的 Cordova 项目，具有以下config.xml设置（使用来自http://docs.phonegap.com/en/edge/config_ref_images.md.html的说明）。我还添加了 2 个平台（iOS 和 Android）。

When I run either cordova run iosor cordova run android, the project still has the default Cordova icons. My understanding from the documentation is that Corodva is supposed to create the icons automatically based in the icon.pngI supplied in the config.xml.

当我运行cordova run ios或 时cordova run android，项目仍然具有默认的 Cordova 图标。我从文档中的理解是，Corodva 应该根据icon.png我在config.xml.

config.xml:

config.xml：

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.testapp" version="1.1.2" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>SingleApp</name>
  <preference name="DisallowOverscroll" value="true" />
  <preference name="AutoHideSplashScreen" value="false" />
  <preference name="Orientation" value="portrait" />
  <preference name="Fullscreen" value="false" />
  <preference name="target-device" value="handset" />

  <description>
      A sample Apache Cordova application that responds to the deviceready event.
  </description>
  <author email="[email protected]" href="http://cordova.io">
      Apache Cordova Team
  </author>
  <content src="index.html" />
  <access origin="*" />

  <icon src="icon.png" />

</widget>

回答by Alex

I wrote a script that auto generates icons for cordova using ImageMagick:

我写了一个脚本，使用 ImageMagick 自动为cordova生成图标：

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

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

To use it, create an "icon.png" file and place it in the root folder of your project, then run:

要使用它，请创建一个“icon.png”文件并将其放在项目的根文件夹中，然后运行：

cordova-icon

and it will generate all the required icons for the platforms your project has.

它将为您的项目拥有的平台生成所有必需的图标。

You can also configure it as a hook in your cordova project so the icons will be generated every time you build the project based on the icon.png you've added. (instructions in the readme).

您还可以将它配置为您的cordova 项目中的一个钩子，这样每次您根据您添加的icon.png 构建项目时都会生成图标。（自述文件中的说明）。

回答by Javier Abrego

If you are using cordova 3.5.0 they have updated the docs. In older versions i've always had to replace the icons manually in the project but the latest version of cordova is working fine.

如果您使用的是cordova 3.5.0，他们已经更新了文档。在旧版本中，我总是不得不手动替换项目中的图标，但最新版本的cordova 运行良好。

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

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

As you can see here https://github.com/phonegap/phonegap-cli/issues/58it's been a common problem. So if you are using an older version of cordova i recommend to update it with the command npm update -g cordova

正如您在这里看到的https://github.com/phonegap/phonegap-cli/issues/58，这是一个常见问题。因此，如果您使用的是旧版本的cordova，我建议您使用以下命令对其进行更新npm update -g cordova

And after that you should update your config.xml to something like this:

之后你应该将你的 config.xml 更新为这样的：

    <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>

As you can see the URIs are relative to the cordova project's path, not to the www folder.

如您所见，URI 相对于cordova 项目的路径，而不是相对于www 文件夹。

回答by Dawson Loudon

The config.xmlsettings for icons only works with the PhoneGap Build service. After adding both of your platforms you need to manually (or you can create a hook, but I haven't done that myself) place your icons in the correct paths.

该config.xml图标的设置只能与PhoneGap的构建服务。添加两个平台后，您需要手动（或者您可以创建一个钩子，但我自己没有这样做）将您的图标放置在正确的路径中。

For iOS:

对于 iOS：

PROJECT_PATH/platforms/ios/PROJECT_NAME/Resources/icons

For Android:

对于安卓：

PROJECT_PATH/platforms/android/res/drawable

Android has many res/drawable-*folders, use as applies to your app but at minimum add to res/drawable

Android 有许多res/drawable-*文件夹，可用于您的应用程序，但至少添加到res/drawable

Then run cordova prepareor buildor run

然后运行cordova prepare或build或run

回答by Aleksandr Kravets

If you are willing to install extra software for icon generation you can use Ionic which has such function.

如果您愿意安装额外的图标生成软件，您可以使用具有此类功能的 Ionic。

Do the following:

请执行下列操作：

1. npm install ionic -g
2. Put png, psd or .ai files for icons and/or splashscreens to ${project_location}/resources
3. ionic resources

1. npm install ionic -g
2. 将图标和/或闪屏的 png、psd 或 .ai 文件放入 ${project_location}/resources
3. ionic resources

If you want to generate icons only there is a handy key for that:

如果您只想生成图标，则有一个方便的键：

ionic resources --icon

More details here

更多细节在这里

回答by Davi S.

Don't you need to specify the folder that has the icon on it? Cordova replaces the icon with the default one when it is not found.

不需要指定带有图标的文件夹吗？找不到时，Cordova 会用默认图标替换该图标。

Have you tried to replace with something like:

您是否尝试用以下内容替换：

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

回答by Reza

npm install -g cordova-res

npm install -g cordova-res

then cordova-res

然后 cordova-res

also supports adaptive icons for android

还支持安卓的自适应图标

回答by MTK

A little explication for people who say <icon src="res/icon.png" />Not work !

对说<icon src="res/icon.png" />Not work 的人做一点解释！

You must put icon.png in both this folders

您必须将 icon.png 放在这两个文件夹中

project_name/res/

项目名称/资源/

and

和

project_name/platforms/platform_name/res/

项目名称/平台/平台名称/资源/

Steps:

脚步：

cordova create hello com.example.hello HelloWorld
cd hello

Copy your icon.png to project_name/res/Open config.xmland put <icon src="res/icon.png" />

将您的 icon.png 复制到project_name/res/Openconfig.xml并放置<icon src="res/icon.png" />

After that run

在那之后运行

cordova platform add android

Now copy your icon.png to ... hello/platforms/android/res/

现在将您的 icon.png 复制到... hello/platforms/android/res/

then

然后

cordova build android

and finally

最后

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

After that you can see on device your app with your icon

之后，您可以在设备上看到带有图标的应用

回答by mrded

Try following https://www.npmjs.org/package/cordova-gen-icon

尝试遵循https://www.npmjs.org/package/cordova-gen-icon

Example:

例子：

$ 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