App Icons

本文详细介绍了iOS应用中图标文件的使用方法,包括iPhone、iPad及通用应用的不同需求,并提供了图标尺寸、命名规范以及如何在Xcode中配置这些图标的指导。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


https://developer.apple.com/library/ios/qa/qa1686/_index.html


Technical Q&A QA1686

App Icons on iPad and iPhone

Q: How are the icon files in my application bundle used on iPad and iPhone?

A: Below are guidelines for handling icon files for iPhone-only apps, iPad-only apps, and universal apps.

If you don't provide one of the listed optional icons, the system will automatically scale one of your existing icons to an appropriate size. It is strongly recommended that your application include all the icons listed, with the specific sizes needed.

Prior to iOS 3.2, icon images were required to follow a strict naming convention. These legacy names are still listed in the tables below along with example names for the more recent icons. Except for iTunesArtwork, icon images included in your app can have arbitrary names.

Note: iOS ignores the PPI (Pixels Per Inch) of icon images. You may author your icon images at any PPI but their width and height, as measured in pixels, must match the values in the tables below.

Important: iTunesArtwork icon files should be in png format, but name it without the .png extension.

Icons for iPhone-only Apps

iPhone-only applications use the following icons. Items marked with "Required" must be included.

Table 1  iPhone-only app icon requirements.

Image Size (px)

File Name

Used For

App Store

Ad Hoc

512x512

iTunesArtwork

App list in iTunes

Do not include

Optional but recommended

1024x1024

iTunesArtwork@2x

App list in iTunes on devices with retina display

Do not include

Optional but recommended

120x120

Icon-60@2x.png

Home screen on iPhone/iPod Touch with retina display

Required

Required

76x76

Icon-76.png

Home screen on iPad

Optional but recommended

Optional but recommended

152x152

Icon-76@2x.png

Home screen on iPad with retina display

Optional but recommended

Optional but recommended

40x40

Icon-Small-40.png

Spotlight

Optional but recommended

Optional but recommended

80x80

Icon-Small-40@2x.png

Spotlight on devices with retina display

Optional but recommended

Optional but recommended

29x29

Icon-Small.png

Settings

Recommended if you have a Settings bundle, optional otherwise

Recommended if you have a Settings bundle, optional otherwise

58x58

Icon-Small@2x.png

Settings on devices with retina display

Recommended if you have a Settings bundle, optional otherwise

Recommended if you have a Settings bundle, optional otherwise

In addition to the above icons, iPhone-only applications with a deployment target of iOS 6.1 or earlier use the following icons. Items marked with "Required" must be included if the application's deployment target is iOS 6.1 or earlier.

Table 2  iPhone-only app icon requirements (iOS 6.1 and earlier).

Image Size (px)

File Name

Used For

App Store

Ad Hoc

57x57

Icon.png

Home screen on iPhone/iPod touch (iOS 6.1 and earlier)

Required

Required

114x114

Icon@2x.png

Home screen on iPhone/iPod Touch with retina display (iOS 6.1 and earlier)

Optional but recommended

Optional but recommended

72x72

Icon-72.png

Home screen on iPad (iOS 6.1 and earlier)

Optional but recommended

Optional but recommended

144x144

Icon-72@2x.png

Home screen on iPad with retina display (iOS 6.1 and earlier)

Optional but recommended

Optional but recommended

29x29

Icon-Small.png

Spotlight on iPhone/iPod Touch (iOS 6.1 and earlier) and Settings

Recommended if you have a Settings bundle, otherwise optional but recommended

Recommended if you have a Settings bundle, otherwise optional but recommended

58x58

Icon-Small@2x.png

Spotlight on iPhone/iPod Touch with retina display (iOS 6.1 and earlier) and Settings on devices with retina display

Recommended if you have a Settings bundle, otherwise optional but recommended

Recommended if you have a Settings bundle, otherwise optional but recommended

50x50

Icon-Small-50.png

Spotlight on iPad (iOS 6.1 and earlier)

Optional but recommended

Optional but recommended

100x100

Icon-Small-50@2x.png

Spotlight on iPad with retina display (iOS 6.1 and earlier)

Optional but recommended

Optional but recommended

You can use separate images for the iPhone and iPad icons in categories where the required sizes are equivalent, for example, Settings.

Icons for iPad-only Apps

iPad-only applications use the following icons. Items marked with "Required" must be included.

Table 3  iPad-only app icon requirements.

Image Size (px)

File Name

Used For

App Store

Ad Hoc

512x512

iTunesArtwork

Ad Hoc iTunes

Do not include

Optional but recommended

1024x1024

iTunesArtwork@2x

Ad Hoc iTunes on devices with retina display

Do not include

Optional but recommended

76x76

Icon-76.png

Home screen on iPad

Required

Required

152x152

Icon-76@2x.png

Home screen on iPad with retina display

Optional but recommended

Optional but recommended

40x40

Icon-Small-40.png

Spotlight on iPad

Optional but recommended

Optional but recommended

80x80

Icon-Small-40@2x.png

Spotlight on iPad with retina display

Optional but recommended

Optional but recommended

29x29

Icon-Small.png

Settings on iPad

Recommended if you have a Settings bundle, otherwise optional but recommended

Recommended if you have a Settings bundle, otherwise optional but recommended

58x58

Icon-Small@2x.png

Settings on iPad with retina display

Recommended if you have a Settings bundle, otherwise optional but recommended

Recommended if you have a Settings bundle, otherwise optional but recommended

In addition to the above icons, iPad-only applications with a deployment target of iOS 6.1 or earlier use the following icons. Items marked with "Required" must be included if the application's deployment target is iOS 6.1 or earlier.

Table 4  iPad-only app icon requirements (iOS 6.1 and earlier).

Image Size (px)

File Name

Used For

App Store

Ad Hoc

72x72

Icon-72.png

Home screen on iPad (iOS 6.1 and earlier)

Required

Required

144x144

Icon-72@2x.png

Home screen on iPad with retina display (iOS 6.1 and earlier)

Optional but recommended

Optional but recommended

50x50

Icon-Small-50.png

Spotlight on iPad (iOS 6.1 and earlier)

Optional but recommended

Optional but recommended

100x100

Icon-Small-50@2x.png

Spotlight on iPad with retina display (iOS 6.1 and earlier)

Optional but recommended

Optional but recommended

Icons for Universal Apps

Universal applications use the following icons. Items marked with "Required" must be included.

Table 5  Universal app icon requirements.

Image Size (px)

File Name

Used For

App Store

Ad Hoc

512x512

iTunesArtwork

App list in iTunes

Do not include

Optional but recommended

1024x1024

iTunesArtwork@2x

App list in iTunes for devices with retina display

Do not include

Optional but recommended

120x120

Icon-60@2x.png

Home screen on iPhone/iPod Touch with retina display

Required

Required

76x76

Icon-76.png

Home screen on iPad

Required

Required

152x152

Icon-76@2x.png

Home screen on iPad with retina display

Optional but recommended

Optional but recommended

40x40

Icon-Small-40.png

Spotlight

Optional but recommended

Optional but recommended

80x80

Icon-Small-40@2x.png

Spotlight on devices with retina display

Optional but recommended

Optional but recommended

29x29

Icon-Small.png

Settings

Recommended if you have a Settings bundle, optional otherwise

Recommended if you have a Settings bundle, optional otherwise

58x58

Icon-Small@2x.png

Settings on devices with retina display

Recommended if you have a Settings bundle, optional otherwise

Recommended if you have a Settings bundle, optional otherwise

In addition to the above icons, universal applications with a deployment target of iOS 6.1 or earlier use the following icons. Items marked with "Required" must be included if the application's deployment target is iOS 6.1 or earlier.

Table 6  Universal app icon requirements (iOS 6.1 and earlier).

Image Size (px)

File Name

Used For

App Store

Ad Hoc

57x57

Icon.png

Home screen on iPhone/iPod touch (iOS 6.1 and earlier)

Required

Required

114x114

Icon@2x.png

Home screen on iPhone/iPod Touch with retina display (iOS 6.1 and earlier)

Optional but recommended

Optional but recommended

72x72

Icon-72.png

Home screen on iPad (iOS 6.1 and earlier)

Required

Required

144x144

Icon-72@2x.png

Home screen on iPad with retina display (iOS 6.1 and earlier)

Optional but recommended

Optional but recommended

29x29

Icon-Small.png

Spotlight on iPhone/iPod Touch (iOS 6.1 and earlier) and Settings

Recommended if you have a Settings bundle, otherwise optional but recommended

Recommended if you have a Settings bundle, otherwise optional but recommended

58x58

Icon-Small@2x.png

Spotlight on iPhone/iPod Touch with retina display (iOS 6.1 and earlier) and Settings on devices with retina display

Recommended if you have a Settings bundle, otherwise optional but recommended

Recommended if you have a Settings bundle, otherwise optional but recommended

50x50

Icon-Small-50.png

Spotlight on iPad (iOS 6.1 and earlier)

Optional but recommended

Optional but recommended

100x100

Icon-Small-50@2x.png

Spotlight on iPad with retina display (iOS 6.1 and earlier)

Optional but recommended

Optional but recommended

You can use separate images for the iPhone and iPad icons in categories where the required sizes are equivalent, for example, Settings.

Adding Icons to Your App

Xcode 5 offers two ways to intuitively manage your app's icons: asset catalogs, and the project editor. Apps that need to support iOS 5 and earlier should use the project editor to manage their icons. New projects are configured to use asset catalogs by default. Migrating an App Icon Set or Launch Image Set in the Asset Catalog Help describes the steps to migrate an existing project to use asset catalogs.

Adding Icon Images to an Asset Catalog

  1. Select the asset catalog in the project navigator. It is named Images.xcassets by default.

  2. From the left column of the editor, select the icon set. For new or migrated projects it will be named 'AppIcon'. You may need to create an icon set by clicking the (+) button in the bottom left of the editor and choosing New App Icon from the context menu.

Figure 1  The AppIcon set selected in the asset catalog.

The set will only contain image wells for icons that are relevant depending upon your project's configuration at the time the asset catalog was created. If an image well is missing, delete the existing app icon set and create a new one.

  1. Drag images from the Finder onto each image well to configure the associated icon.

Figure 2  Complete icon set for a universal app with a deployment target less than iOS 7.0

Asset catalogs make a copy of images added to them. If you had previously added the images as resources to your project you can safely remove them.

Adding Icon Images using the Project Editor

  1. Select the name of the project in the project navigator.

  2. Select the name of a target from the list in the left column of the project editor.

  3. Click General at the top of the project editor.

  4. For each row under the App Icons section, click the folder in the right column. If an image had previously been added to your project, it will appear in the list of available images. To add an image from disk, click the Add Other button and browse to the image.

Figure 3  Complete App Icon configuration for a universal app with a deployment target less than iOS 7.0

Troubleshooting

This section contains common problems and how to fix them.

My icons don't appear on the device

If your project is using asset catalogs, it may not be configured to use the correct icon set.

  1. Select the name of the project in the project navigator.

  2. Select the name of a target from the list in the left column of the project editor.

  3. Click General at the top of the project editor.

  4. Verify that the name of the app icon set you previously added your images to is selected in the Source menu under the App Icons section, as shown in Figure 4.

Figure 4  The Source menu controls which icon set is used as the app icon set.

If your project is not using asset catalogs, one or more of your icon images may not be associated with your app's target.

  1. Select each of your icon images in the project navigator.

  2. In the utility panel, check the box next to your app's target under the Target Membership pane as shown in Figure 5.

Figure 5  Associating an icon with a build target

Verify that your icon files use a supported color model. Images that do not use the RGB color model may appear correctly in Xcode but will fail to load on the device.

A previous version of my icon appears on the device

Your testing device or simulator may have a partially outdated build. That is, Xcode failed to copy the modified resource to the app bundle it installed on the device as part of the build & run process. To force Xcode to copy the most recent resources from your project directory:

  1. Remove the app from your testing device or simulator.

  2. Clean the build directory by choosing Product > Clean from the menubar in Xcode.

  3. Build and run your app.

If your project is using asset catalogs then you must replace the modified image in the asset catalog. Asset catalogs do not track files on disk, opting instead to make a copy of the image at the time it was added to the asset catalog.

The wrong icon appears in the App Store search results

You may encounter this issue when building an app using a third party development environment or if your project was created using a template project included with a third party library. Both will usually include a default set of icons in the projects they create for you. If you fail to remove these icons or replace all of them with your own icons, the App Store may display them in the search results for your app. Like the iOS home screen, the icons displayed in the search results depend upon the current device. It is possible that the incorrect icon is shown in the search results on certain devices but not others.

The solution is to delete any instances of the template-provided icons that remain in your project and remove any references to the deleted files from the Information Property List. Due to the wide variety of ways in which iOS versions have allowed developers to specify app icons in the Information Property List, you may find it simpler and less error prone to remove all icon related keys from the Information Property List and then reconfigure your app's icons using the steps presented in Adding Icons to Your App.

  1. Open the Information Property List for your app's target. It can be found under the Info tab in the project editor or in the navigator where it will be named either YourApp-Info.plist or Info.plist.

  2. Remove the following keys, including device specific variations.

    • “Icon file” (CFBundleIconFile)

    • “Icon files” (CFBundleIconFiles)

    • CFBundleIcons

  3. Follow the steps Adding Icons to Your App to configure the proper icons for your app.

Note: The solution presented above pertains to projects that are built with Xcode. If you are using a third party development environment, you should consult the vendor of your environment for an appropriate solution.

Additional Resources

For additional information, see the App Icons section in the iOS App Programming Guide.

For information about designing your application's icons, see the App Icon section of the iOS Human Interface Guidelines.

For an example of a project with properly configured icons, see the Application Icons and Launch Images for iOS sample code.



Document Revision History

DateNotes
2014-05-19

Added troubleshooting steps for incorrect icons appearing in the App Store search results.

2014-02-03

Updated for Xcode 5 and iOS 7.

2013-07-18

Added icon information for iPad with retina display.

2011-07-14

After iOS 4.3, order doesn't matter in the icon arrangement. Added links to related references.

2010-07-14

Fixed outdated "Add Icon files in Info.plist" section.

2010-07-12

Updated for iOS 4 requirements.

2010-04-09

New document that explains how the icon files in an application bundle are used on iPad and iPhone.


<think>好的,我现在需要解决用户的问题:Vue3项目在HBuilder上打包时,苹果商店上传失败,报错缺少Info.plist中的CFBundleIconName。用户希望得到解决方案。 首先,我需要理解这个错误的原因。根据苹果商店的要求,应用的Info.plist文件中必须包含CFBundleIconName字段,用于指定应用图标的名称。如果这个字段缺失或配置错误,上传时就会失败。用户提到使用的是HBuilder进行打包,所以可能是HBuilder生成的iOS项目中没有正确配置这个字段。 接下来,我需要回忆一下Vue项目使用HBuilder打包的流程。通常,HBuilder会将Vue项目转换为原生iOS项目,然后进行编译和打包。在这个过程中,HBuilder可能会自动生成Info.plist文件,但有时候自动生成的可能缺少必要的字段,特别是当配置不完整或模板更新不及时的时候。 然后,我需要考虑如何手动添加这个字段。可能需要用户修改生成的iOS项目中的Info.plist文件。具体路径可能在项目的platforms/ios目录下,找到对应的Info.plist文件,添加CFBundleIconName键,并设置正确的图标名称,比如AppIcon。同时,需要确保该图标资源确实存在于项目中,位置通常在Resources目录下,符合苹果的尺寸要求。 另外,用户可能需要检查HBuilder的相关配置,确保在manifest.json中正确配置了应用图标。HBuilder的配置可能会影响最终生成的iOS项目结构,如果图标路径或名称配置错误,也可能导致CFBundleIconName缺失。 还有可能需要用户清理并重新构建项目。有时候旧的构建缓存可能导致配置未更新,清理后重新打包可能会应用新的配置。 另外,参考之前的问题,比如引用[1]和[2]提到的Vue中使用ECharts时DOM未加载的问题,解决方法涉及确保DOM渲染完成后再执行代码。虽然问题不同,但思路类似,可能需要确保HBuilder在打包时正确生成了所有必要的配置,可能需要使用钩子函数或构建后的检查步骤。 最后,可能需要用户查看苹果的官方文档或开发者论坛,确认最新的Info.plist要求,确保其他相关配置也没有遗漏,比如图标的多种尺寸是否齐全,避免其他验证错误。 总结步骤应该是: 1. 确认Info.plist中存在CFBundleIconName字段。 2. 确保图标资源正确配置。 3. 检查HBuilder的manifest配置。 4. 清理并重新构建项目。 5. 参考苹果官方文档验证配置。 同时,生成相关问题需要考虑用户可能遇到的其他打包问题,比如图标配置、HBuilder设置、其他Info.plist字段缺失等。</think>### 解决方案 在Vue3项目中使用HBuilder打包iOS应用时,若因`Info.plist`缺少`CFBundleIconName`导致苹果商店上传失败(错误`Validation failed 409`),可通过以下步骤解决: --- #### 1. **确认`Info.plist`中`CFBundleIconName`字段** - **操作路径**: 打开HBuilder生成的iOS项目目录,找到`platforms/ios/[项目名]/[项目名]/Info.plist`文件。 - **修改方法**: 在`Info.plist`中添加以下内容(若已存在则修正值): ```xml <key>CFBundleIconName</key> <string>AppIcon</string> ``` 此处`AppIcon`是iOS应用默认的图标资源名称,需与实际图标资源名称一致[^1]。 --- #### 2. **检查图标资源是否配置正确** - **图标位置**: 确保`AppIcon`图标集已正确放置在`Resources`目录中,且包含所有苹果要求的尺寸(如20x20、29x29、40x40等)。 路径示例:`platforms/ios/[项目名]/Resources/AppIcon.appiconset`。 - **验证方法**: 在Xcode中打开项目,检查`Assets.xcassets`中的`AppIcon`是否完整无缺失。 --- #### 3. **检查HBuilder的`manifest.json`配置** - **图标配置**: 在HBuilder项目的`manifest.json`中,确认`app-plus->ios->icons`字段已正确指定图标路径。示例: ```json "app-plus": { "ios": { "icons": { "app": "static/ios/AppIcon.png" } } } ``` 若路径错误,HBuilder可能无法生成正确的图标资源[^2]。 --- #### 4. **清理并重新构建项目** - **操作步骤**: 删除`platforms/ios`目录,重新运行HBuilder的**发行->原生App-云打包**,确保配置生效。 若本地环境有缓存,可尝试`hbuilderx -> 运行 -> 清理项目缓存`。 --- #### 5. **参考苹果官方文档验证** - 苹果要求`CFBundleIconName`必须指向有效的图标资源名称[^3]。若仍报错,检查其他`Info.plist`字段(如`CFBundleIdentifier`、`CFBundleVersion`)是否符合规范。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值