如何在phonegap项目中添加应用程序图标？

我使用默认的config.xml创build了一个新的phonegap（v 3.0.0-0.14.0）项目，然后添加了iOS和Android平台。

该configuration包含所有平台图标的所有path。

我已经覆盖iOS和Android的默认图标，以便path和名称仍然匹配那些PNG。

在模拟器中运行时，图标不显示。 我已经在xCode中查看它，它告诉我图标的“Resources”文件夹仍然包含phonegap默认图标。 和Android一样。

我究竟做错了什么？

如何使用phonegap为iOS和Android添加自定义应用图标？

谢谢

我的config.xml

<icon src="icon.png" /> <icon gap:density="ldpi" gap:platform="android" src="res/icon/android/icon-36-ldpi.png" /> <icon gap:density="mdpi" gap:platform="android" src="res/icon/android/icon-48-mdpi.png" /> <icon gap:density="hdpi" gap:platform="android" src="res/icon/android/icon-72-hdpi.png" /> <icon gap:density="xhdpi" gap:platform="android" src="res/icon/android/icon-96-xhdpi.png" /> <icon gap:platform="ios" height="57" src="res/icon/ios/icon-57.png" width="57" /> <icon gap:platform="ios" height="72" src="res/icon/ios/icon-72.png" width="72" /> <icon gap:platform="ios" height="114" src="res/icon/ios/icon-57-2x.png" width="114" /> <icon gap:platform="ios" height="144" src="res/icon/ios/icon-72-2x.png" width="144" /> <icon gap:platform="blackberry" src="res/icon/blackberry/icon-80.png" /> <icon gap:platform="blackberry" gap:state="hover" src="res/icon/blackberry/icon-80.png" /> <icon gap:platform="webos" src="res/icon/webos/icon-64.png" /> <icon gap:platform="winphone" src="res/icon/windows-phone/icon-48.png" /> <icon gap:platform="winphone" gap:role="background" src="res/icon/windows-phone/icon-173.png" /> 

Answer 1

幸运的是，在关于飞溅图像的文档中有一点点，这让我走上了获取图标图像的正确位置的道路。 所以在这里。

放置文件的位置使用命令行界面“cordova build ios”构build项目后，您应该在platforms/ios/文件夹中为iOS应用程序提供完整的文件结构。

里面的文件夹是一个文件夹与您的应用程序的名称。 其中又包含resources/目录，您将在其中findicons/和splashscreen/文件夹。

在图标文件夹中，您可以find四个图标文件（对于57px和72px，每个为常规版本和@ 2x版本）。 这些是迄今为止您所看到的Phonegap占位符图标。

该怎么办

您只需将图标文件保存在该文件夹中即可。 所以那是：

YourPhonegapProject/Platforms/ios/YourAppName/Resources/icons

相同的splashscreen文件。

笔记

1. 在放置文件后，使用cordova build ios重build项目并使用xCode的“Clean product”菜单命令。 没有这个，你仍然会看到Phonegap的占位符。

2. 以iOS / Apple的方式重命名文件（例如[e-mail]等）而不是编辑info.plist或config.xml中的名称是明智之举。 至less这对我有效。

3. 顺便说一句，忽略奇怪的path和为config.xml中的图标提供的怪异的文件名（即<icon gap:platform="ios" height="114" src="res/icon/ios/icon-57-2x.png" width="114" /> ）。 我只是把这些定义放在那里，即使我的114px图标被命名为[e-mail]而不是icon-57-2x.png ， icon-57-2x.png 。

4. 不要使用config.xml来防止苹果对图标的光泽效果。 而是在xCode中勾选框（单击左侧导航栏中的项目标题，在Target标题下select您的应用程序，然后向下滚动到图标部分）。

Answer 2

常见问题：ICON / SPLASH屏幕（Cordova 5.x / 2015）

我将我的答案作为一般常见问题提出，可以帮助您解决处理图标/闪屏时遇到的许多问题。 你可能会发现像我这样的文件不总是很清楚，也不是最新的。 这可能会在可用时转到StackOverflow文档 。

首先：回答这个问题

如何使用phonegap为iOS和Android添加自定义应用图标？

在你的Cordova版本中 ， icon标签是无用的。 甚至没有在Cordova 3.0.0中logging。 你应该使用适合你使用的cli的文档版本，而不是最新的！

根据我在不同版本的文档中可以看到的，在3.5.0之前， 图标标记根本不能用于Android。 在3.4.0中，他们仍然build议手动复制文件

在更新的版本中 ：你的config.xml对于更新的Cordova版本看起来更好。 不过还是有很多事情你可能想知道。 如果您决定在这里升级是一些有用的东西来修改：

• 你不需要gap:命名空间
• Android需要<preference name="SplashScreen" value="screen" />

---

以下是您可能在尝试处理图标和启animation面时可能会问到的问题的更多详细信息：

我可以使用旧版本的Cordova / Phonegap吗？

不，图标/闪屏function不在以前版本的Cordova中，因此您必须使用最新版本。 在以前的版本中，只有Phonegap Build处理图标/启animation面，因此只能在本地创build和处理图标。 我不知道最低版本使用这个function，但与5.1.1它在Cordova / Phonegap cli中工作正常。 随着cordova3.5它不适合我。

编辑 ：对于Android，您必须至less使用3.5.0

我如何debugging关于图标的构build过程？

cli使用CP命令。 如果你提供了一个无效的图标path，它将显示一个cp错误：

 sebastien@sebastien-xps:cordova (dev *+$%)$ cordova run android --device cp: no such file or directory: /home/sebastien/Desktop/Stample-react/cordova/res/www/stample_splash.png 

编辑 ：你有使用cordova build <platform> --verbose获取cp命令用法的日志，看看你的图标被复制到哪里

图标应根据configuration进入文件夹。 对我来说，它在许多子文件夹中： platforms/android/build/intermediates/res/armv7/debug/drawable-hdpi-v4/icon.png

然后你可以findAPK，并打开它作为一个zip档案来检查图标存在。 他们必须在res/drawable*文件夹中，因为它是Android的特殊文件夹 。

我应该在哪里把图标/闪屏放在我的项目中？

在许多例子中，你会发现图标/闪屏是在res文件夹中声明的。 此res是输出APK中的一个特殊的Android文件夹，但这并不意味着您必须在您的项目中使用res文件夹。

你可以把你的图标放在任何地方，但是你使用的path必须是相对于项目的根 ，而不是www所以要小心！ 这是logging，但不是很清楚，因为所有的例子都使用res ，你不知道这个文件夹是:(

我的意思是，如果你把图标放在www/icon.png你绝对必须在你的path中包含www 。

编辑火星2016 ：升级我的版本后，现在看来，图标是相对于www文件夹，但文档没有改变（ 问题 ）

<icon src="icon.png"/>有效？

不，不是的！ 。

在Android上，似乎它曾经工作过（当时密度属性还不被支持？），但现在已经不行了。 看到这个cordova的问题

在iOS上，似乎使用这个全局声明可能会覆盖更具体的声明，所以要小心并用--verbose构build，以确保一切按预期工作。

我可以使用相同的图标/闪屏文件的所有密度。

是的你可以。 你甚至可以使用相同的文件的图标和闪屏（只是为了testing！）。 我使用了一个65kb的“大”图标文件，没有任何问题。

使用平台标签与平台属性有什么区别

 <icon src="icon.png" platform="android" density="ldpi" /> 

是相同的

 <platform name="android"> <icon src="www/stample_icon.png" density="ldpi" /> </platform> 

如果使用Phonegap，我应该使用gap：namespace吗？

根据我的经验，Phonegap或Cordova的新版本都能够理解图标声明，而不会使用任何gap: xml命名空间。

不过，我仍然在这里等待一个有效的答案： cordova / phonegap插件添加VS config.xml

据我所知，一些functiongap:命名空间可能在PhonegapBuild的早些时候，然后在Phonegap中，然后被移植到cordova（？）

是<preference name="SplashScreen" value="screen" />要求？

至less对于Android是的。 我用另外的解释开了一个问题 。

图标声明顺序是否重要？

是的，它确实！ 它可能对Android没有任何影响，但根据我的testing它已经在iOS上。 这是意外和无证的行为，所以我打开了另一个问题 。

我需要cordova-plugin-splashscreen吗？

是的，如果你想启动屏幕工作，这是绝对必要的。 文档不清楚（ 问题 ），让我们认为插件只需要提供一个启animation面的JavaScript API。

我怎样才能快速调整图像的所有宽度/高度/密度

有工具可以帮助你做到这一点。 对我来说最好的是http://makeappicon.com/，但它需要提供一个电子邮件地址。;

其他可能的解决scheme是

• AndroidAssetStudio
• https://gist.github.com/LinusU/7515016
• cordova图标

你能给我一个configuration示例吗？

是。 这是我真正的config.xml

 <?xml version='1.0' encoding='utf-8'?> <widget id="co.x" version="0.2.6" xmlns="http://www.w3.org/ns/widgets" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:gap="http://phonegap.com/ns/1.0"> <name>x</name> <description> x </description> <author email="[e-mail]" href="https://x.co"> x </author> <content src="index.html" /> <preference name="permissions" value="none" /> <preference name="webviewbounce" value="false" /> <preference name="StatusBarOverlaysWebView" value="false" /> <preference name="StatusBarBackgroundColor" value="#0177C6" /> <preference name="detect-data-types" value="true" /> <preference name="stay-in-webview" value="false" /> <preference name="android-minSdkVersion" value="14" /> <preference name="android-targetSdkVersion" value="22" /> <preference name="phonegap-version" value="cli-5.1.1" /> <preference name="SplashScreenDelay" value="10000" /> <preference name="SplashScreen" value="screen" /> <plugin name="cordova-plugin-device" spec="1.0.1" /> <plugin name="cordova-plugin-console" spec="1.0.1" /> <plugin name="cordova-plugin-whitelist" spec="1.1.0" /> <plugin name="cordova-plugin-crosswalk-webview" spec="1.2.0" /> <plugin name="cordova-plugin-statusbar" spec="1.0.1" /> <plugin name="cordova-plugin-screen-orientation" spec="1.3.6" /> <plugin name="cordova-plugin-splashscreen" spec="2.1.0" /> <access origin="http://*" /> <access origin="https://*" /> <access launch-external="yes" origin="tel:*" /> <access launch-external="yes" origin="geo:*" /> <access launch-external="yes" origin="mailto:*" /> <access launch-external="yes" origin="sms:*" /> <access launch-external="yes" origin="market:*" /> <platform name="android"> <icon src="www/stample_icon.png" density="ldpi" /> <icon src="www/stample_icon.png" density="mdpi" /> <icon src="www/stample_icon.png" density="hdpi" /> <icon src="www/stample_icon.png" density="xhdpi" /> <icon src="www/stample_icon.png" density="xxhdpi" /> <icon src="www/stample_icon.png" density="xxxhdpi" /> <splash src="www/stample_splash.png" density="land-hdpi"/> <splash src="www/stample_splash.png" density="land-ldpi"/> <splash src="www/stample_splash.png" density="land-mdpi"/> <splash src="www/stample_splash.png" density="land-xhdpi"/> <splash src="www/stample_splash.png" density="land-xhdpi"/> <splash src="www/stample_splash.png" density="land-xhdpi"/> <splash src="www/stample_splash.png" density="port-hdpi"/> <splash src="www/stample_splash.png" density="port-ldpi"/> <splash src="www/stample_splash.png" density="port-mdpi"/> <splash src="www/stample_splash.png" density="port-xhdpi"/> <splash src="www/stample_splash.png" density="port-xxhdpi"/> <splash src="www/stample_splash.png" density="port-xxxhdpi"/> </platform> <platform name="ios"> <icon src="www/stample_icon.png" width="180" height="180" /> <icon src="www/stample_icon.png" width="60" height="60" /> <icon src="www/stample_icon.png" width="120" height="120" /> <icon src="www/stample_icon.png" width="76" height="76" /> <icon src="www/stample_icon.png" width="152" height="152" /> <icon src="www/stample_icon.png" width="40" height="40" /> <icon src="www/stample_icon.png" width="80" height="80" /> <icon src="www/stample_icon.png" width="57" height="57" /> <icon src="www/stample_icon.png" width="114" height="114" /> <icon src="www/stample_icon.png" width="72" height="72" /> <icon src="www/stample_icon.png" width="144" height="144" /> <icon src="www/stample_icon.png" width="29" height="29" /> <icon src="www/stample_icon.png" width="58" height="58" /> <icon src="www/stample_icon.png" width="50" height="50" /> <icon src="www/stample_icon.png" width="100" height="100" /> <splash src="www/stample_splash.png" width="320" height="480"/> <splash src="www/stample_splash.png" width="640" height="960"/> <splash src="www/stample_splash.png" width="768" height="1024"/> <splash src="www/stample_splash.png" width="1536" height="2048"/> <splash src="www/stample_splash.png" width="1024" height="768"/> <splash src="www/stample_splash.png" width="2048" height="1536"/> <splash src="www/stample_splash.png" width="640" height="1136"/> <splash src="www/stample_splash.png" width="750" height="1334"/> <splash src="www/stample_splash.png" width="1242" height="2208"/> <splash src="www/stample_splash.png" width="2208" height="1242"/> </platform> <allow-intent href="*" /> <engine name="browser" spec="^3.6.0" /> <engine name="android" spec="^4.0.2" /> </widget> 

例子的一个很好的来源是入门套件。 像phonegap启动或Ionic启动器

Answer 3

从Cordova 3.5.0-0.2.6开始，config.xml中的<icon />元素与以下注意事项一起工作：

1. src属性是相对于您的项目根文件夹的path。 关于这个问题跟踪器的问题之所以发生变化。

2. 没有分辨率/ dpi的<icon src="..." />元素logging为所有平台使用的图标作为默认图标。 但是，在Android构build，默认图标只复制到Android可绘制文件夹，没有设置具体的分辨率。 这使得自定义图标出现在/res/drawable文件夹中，并且具有特定分辨率的cordova默认图标存在于最终apk内的其他文件夹中（即/res/drawable-ldpi ）。 您必须在android平台上为每个分辨率在config.xml添加一个图标元素。

例如，如果您的图标图像位于相对于您的根项目的pathwww/res/img/icon.png ，则此行在config.xml会使您的应用程序图标显示在android工程中：

 <!-- Default application icon --> <icon src="www/res/img/icon.png" /> <!-- Default icon should work, but cordova don't overwrite the default on all densities --> <icon src="www/res/img/icon.png" platform="android" density="ldpi" /> <icon src="www/res/img/icon.png" platform="android" density="mdpi" /> <icon src="www/res/img/icon.png" platform="android" density="hdpi" /> <icon src="www/res/img/icon.png" platform="android" density="xhdpi" /> 

使用该configuration后，您可以为覆盖默认的cordova图标的所有分辨率提供单个图像图标，而无需自定义的挂钩。 简单的build立与cordova build android应该做的伎俩。

Answer 4

如果您想在本地构build时自动添加图标（ cordova emulate ios ， cordova run android等），请使用易于使用的方法查看此要点：

https://gist.github.com/LinusU/7515016

希望以后能够开始使用，下面是关于Cordova项目的相关bug报告：

https://issues.apache.org/jira/browse/CB-2606

Answer 5

您必须创build一个config.xml文件，在其中放置图标文件

 <?xml version="1.0" encoding="ISO-8859-1" ?> <widget xmlns = "http://www.w3.org/ns/widgets" xmlns:gap = "http://phonegap.com/ns/1.0" id = "example" version = "1.0.0"> <icon src="icon.png" /> </widget> 

选中此项： https ： //build.phonegap.com/docs/config-xml

有iOS的特定图标

Answer 6

由于这里的大部分答案是针对iOS的，所以这里有一个在Android中更改图标的解决scheme。

对于android：

在<project location> \ platforms \ android \ ant-build \ res而不是<project location> \ platforms \ android \ res中进行更改

对于有些人在后面的位置进行更改可能已经工作，但注意到从\ android \ res到\ android \ ant-build \ res的Phonegap复制，我决定在那里检查并find一组包含默认的可绘制文件夹电话图标。

改变那些终于工作。

由于我在本地构build和运行，而不是使用Adobe PhoneGap Build，因此在<项目位置> \ www \ res \ icon \ android中更改图标也不起作用。

Answer 7

我正在运行phonegap 3.1.0-0.15.0，因为iOS7将分辨率更改为120x120px我刚刚添加了一个文件，这些尺寸的项目，然后更改info.plist文件。

1. 通过右键单击Xco​​de中的项目文件并select“将文件添加到”[您的项目名称]“ ，将120×120文件添加到项目中…
2. 转到Xcode中的info.plist文件“Resources / [Your Project Name] -info.plist”
3. 在“图标文件（iOS 5）/主要图标/图标文件”下，将“ 文件 2 ”更改为文件名（我称之为“icon-120.png”，我将其放置在Project文件夹旁边的所有其他图标，虽然这应该不重要）

更多信息可以在这里find： http : //www.digifloor.com/missing-recommended-icon-file-error-ios-app-13

为了修复iOS中的启animation面，我只是粘贴了相同尺寸和文件名的新文件，覆盖旧文件。 只要记得去在Xcode的菜单栏中的产品>清洁 （快捷键Shift + Command + K），它应该工作的很好！ 🙂

Answer 8

在cordova3.3.1-0.1.2期望的行为是不正确的。

在

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

它明确指出，你应该把它们放到一个名为res和文件夹的主www文件夹中，它遵循一个特定的命名约定，而不是原来的可定制的config.xml指定的方式（在这个文件中你指向你select的一个文件，这是/好得多）。 它应该从那里为每个平台，并把它们放入平台/？android？/ res / drawable-？dpi / icon.png，但在这个时候没有这种正确的行为…错误。

所以我想我们必须手动把它们放在每个平台上。 它当然需要将其从复制到www文件夹再次删除。 对我来说，我不得不完全replace主www文件夹中的内容，因为它甚至没有黑客一个redirectindex.htmlfind一些奇怪的随机文件夹那里甚至你好世界没有工作。 将www文件夹放在www旁边是最有意义的，但对于我来说似乎是由这一系列级联和混乱的deviseselect/缺陷造成的。

Answer 9

在某些情况下，cordova的内部sk don不要把图标放在正确的文件夹中，因此，您可以看到f ***科多瓦机器人，而不是您自己的图标。

利用钩子脚本;）

三挂钩，您-cordovaphonegap-项目需求

在挂钩文件夹中创build一个文件夹“after_platform_add”，并把/ devgirl中的最后一个skript。

不要忘记设置脚本的执行权限，在Linux "chmod 777 <script>"

祝你好运！

Answer 10

我所做的只是在config.xml中添加了以下<icon src="www/img/appIcon.png" />行<icon src="www/img/appIcon.png" />

它工作得很好

Answer 11

只需将此代码添加到您的config.xml文件

 <icon src="path to your icon image"> 

例如：

 <icon src="icon.png"> 

Al方式记住您需要使用.png扩展名

Answer 12

我也正在试图了解这一切如何连接。

这是我在XCode中发现的，但是如果我的假设是正确的，我希望得到纠正或肯定。 我还没有find一个开箱即用的从cordova正确应用图标的xcode。 像你一样，我已经更新了config.xml中列出的所有图标，但没有骰子。

所以…

首先，我通常使用我的“www”文件夹中的项目来更新项目根目录下的config.xml文件（这样做的确不是www / config.xml有任何优先级，或者甚至是应用了这个不确定性）

其次，我更新了项目的“build设阶段”。 展开“复制包资源”，您已经注意到“资源/图标”，“资源/飞溅”中的所有图像。 你可以：

• 删除所有这些以避免覆盖您的图像或
• 用您自己的方式更新所有这些图像（重命名为列出的图像名称）

当我正在处理这个问题时，您可能只需要简单地从“摘要”选项卡更新图像。

将您的图像从res文件夹拖放到“摘要”选项卡中的相应图像上。 （res / icon / ios – >应用程序图标和res / screen / ios – >启动图像）。 我只为iPhone做，因为我的应用程序只有iPhone。 如果你不想光泽出现，勾选“prerendered”。

然后更新项目的plist文件中引用的“icon.png”：PROJECT_NAME-Info.plist或在查看项目目标时在“信息”选项卡中。 将其重命名为“icon-57.png”（现在位于您的项目根目录中，当您执行拖放操作时，它会自动添加到根目录中）。

构build，你应该更新的应用程序图标。

Answer 13

只是注意到我刚刚改变我的config.xml看起来像塞巴斯蒂安的例子。

有些东西在debugging所有这些，特别是如果你不做本地构build也是有帮助的…是从PhoneGap云构build的XAP / IPA / APK文件下载，并为每个文件创build文件夹。 用.ZIP扩展名重命名每个文件，并将每个文件的内容提取到它们各自的文件夹。 所以基本上，你现在可以看到将被发送到手机的包里有什么。

这样做，我可以看到，对于Microsoft Phone平台，它很大程度上忽略了我所有的replace图标或启animation面的尝试。 如果您然后replaceApplicationIcon.png和SplashScreenImage.jpg，然后重新压缩文件夹并将其重命名为.XAP文件，然后将其部署到您的手机，它将完美工作。 不知何故，有一种方法就是让PhoneGap的构build将你的icon.png和icon.jpg变成这两个文件。 也许马苏德的build议是一个可能性，并利用钩脚本。

对.IPA文件（iOS）执行相同的操作会导致在www上方父级别的多个文件（如icon-something.png）。 他们都显得空白。

对.APK文件（Android）执行相同的操作会产生一个res / drawable-something文件夹集合，并且每个文件夹中都有一个我的icon.png文件。 这是我现在可以宣称的最成功的。