Question

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

当我运行cordova run ios或cordova run android时，项目仍然具有默认的Cordova图标。我从文档中了解到，Corodva应该基于icon.png中提供的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="dev@cordova.apache.org" href="http://cordova.io">
      Apache Cordova Team
  </author>
  <content src="index.html" />
  <access origin="*" />

  <icon src="icon.png" />

</widget>

Answer 1

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

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

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

cordova-icon

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

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

Answer 2

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

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

正如您在https://github.com/phonegap/phonegap-cli/issues/58所见，这是一个常见问题。因此，如果您使用的是旧版本的cordova，我建议您使用命令npm update -g cordova

进行更新

之后你应该将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/icon-60@2x.png" width="120" height="120" />
              <!-- iPad -->
              <icon src="www/res/ios/icon-76.png" width="76" height="76" />
              <icon src="www/res/ios/icon-76@2x.png" 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/icon-40@2x.png" width="80" height="80" />
              <!-- iPhone / iPod Touch -->
              <icon src="www/res/ios/icon.png" width="57" height="57" />
              <icon src="www/res/ios/icon@2x.png" width="114" height="114" />
              <!-- iPad -->
              <icon src="www/res/ios/icon-72.png" width="72" height="72" />
              <icon src="www/res/ios/icon-72@2x.png" 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/icon-small@2x.png" 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/icon-50@2x.png" width="100" height="100" />
     </platform>

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

Answer 3

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

对于iOS：

PROJECT_PATH/platforms/ios/PROJECT_NAME/Resources/icons

对于Android：

PROJECT_PATH/platforms/android/res/drawable

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

然后运行cordova prepare或build或run

Answer 4

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

执行以下操作：

npm install ionic -g
将图标和/或启动画面的png，psd或.ai文件放到${project_location}/resources
ionic resources

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

ionic resources --icon

更多详情here

Answer 5

您是否需要指定包含图标的文件夹？如果找不到图标，Cordova会将图标替换为默认图标。

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

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

Answer 6

尝试关注https://www.npmjs.org/package/cordova-gen-icon

示例：

$ 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

Answer 7

对于说<icon src="res/icon.png" />不工作的人的一点解释。

您必须将icon.png放入此文件夹

PROJECT_NAME / RES /

和

PROJECT_NAME /平台/ PLATFORM_NAME / RES /

步骤：

cordova create hello com.example.hello HelloWorld
cd hello

将your icon.png复制到project_name/res/ 打开config.xml并放置<icon src="res/icon.png" />

在那之后

cordova platform add android

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

然后

cordova build android

最后

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

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

Answer 8

npm install -g cordova-res

然后cordova-res

还支持适用于Android的自适应图标

Answer 9

请在此处上传您的图标：https://pgicons.abiro.com/

您可以轻松地从一个工作站获取所有内容，例如，图标（所有平台），启动画面（所有平台），config.xml（带有生成的图标名称和路径）。

您只需要替换res文件夹并更新config.xml，就没有其他事情了。

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

9 个答案: