iOS 7 app icons showing up black as soon as I add new images

Question

I start writing this app under iOS 6 I managed to fix everything with respect to image and deprecated APIs without issue.

I am creating an new icon to support iOS 7 style but regardless of if I use asset catalog and or straight paths to images as soon as I add a new reference whenever I launch applications I get a black icon being rendered.

I am clearly doing something wrong.

Here is my asset catalog showing all mapped images. They aren't actually showing up in the application, and I have black icons across all iOS applications.

Whenever I launch I get a black icon. Does it have to do with some setting in Info.plist file?

Here it is.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>CFBundleDevelopmentRegion</key>
    <string>en</string>
    <key>CFBundleDisplayName</key>
    <string>${PRODUCT_NAME}</string>
    <key>CFBundleExecutable</key>
    <string>${EXECUTABLE_NAME}</string>
    <key>CFBundleIcons</key>
    <dict/>
    <key>CFBundleIcons~ipad</key>
    <dict/>
    <key>CFBundleIdentifier</key>
    <string>com.neckbeardrepublic.${PRODUCT_NAME:rfc1034identifier}</string>
    <key>CFBundleInfoDictionaryVersion</key>
    <string>7.0</string>
    <key>CFBundleName</key>
    <string>${PRODUCT_NAME}</string>
    <key>CFBundlePackageType</key>
    <string>APPL</string>
    <key>CFBundleVersion</key>
    <string>1.0</string>
    <key>LSRequiresIPhoneOS</key>
    <true/>
    <key>UIAppFonts</key>
    <array>
        <string>Lato-Black.ttf</string>
        <string>FontAwesome.ttf</string>
    </array>
    <key>UIPrerenderedIcon</key>
    <true/>
    <key>UIRequiredDeviceCapabilities</key>
    <array>
        <string>armv7</string>
    </array>
    <key>UIStatusBarHidden</key>
    <false/>
    <key>UIStatusBarHidden~ipad</key>
    <true/>
    <key>UIStatusBarTintParameters</key>
    <dict>
        <key>UINavigationBar</key>
        <dict>
            <key>Style</key>
            <string>UIBarStyleDefault</string>
            <key>Translucent</key>
            <false/>
        </dict>
    </dict>
    <key>UISupportedInterfaceOrientations</key>
    <array>
        <string>UIInterfaceOrientationPortrait</string>
        <string>UIInterfaceOrientationLandscapeLeft</string>
        <string>UIInterfaceOrientationLandscapeRight</string>
    </array>
    <key>UISupportedInterfaceOrientations~ipad</key>
    <array>
        <string>UIInterfaceOrientationLandscapeLeft</string>
        <string>UIInterfaceOrientationLandscapeRight</string>
    </array>
    <key>UIViewControllerBasedStatusBarAppearance</key>
    <false/>
</dict>
</plist>

Extremely frustrating. I have also just tried providing the specific files without much avail either.

Can anyone pinpoint the issue?

Solution

First, check that the image files you're using for app icons are appropriate. See Apple's Human Interface Guidelines on App Icons for the full details, but particularly relevant to this question:

Avoid transparency. An app icon should be opaque. If the icon’s boundaries are smaller than the recommended sizes—or you use transparency to create “see-through” areas—the resulting icon can appear to float on a black background, which tends to look especially unattractive on the beautiful wallpapers that users choose.

If you're using transparency, for example a black image on a transparent background, the icon may appear completely black in iOS.

Next, there are a few ways to tell iOS about the icons for your app. The new mechanism is to use the Asset Catalog; Apple has a guide on Migrating an App Icon or Launch Image Set.

The old, simple method is to add the icon filenames to your Info.plist file CFBundleIcons. According to Apple's docs on App-Related Resources:

Regardless of how many different icons your app has, you specify them using the CFBundleIcons key in the Info.plist file. The value of that key is an array of strings, each of which contains the filename of one of your icons. The filenames can be anything you want, but all image files must be in the PNG format and must reside in the top level of your app bundle. (Avoid using interlaced PNGs.) When the system needs an icon, it choose the image file whose size most closely matches the intended usage.

Comments

[pix0r]

@myusuf3 I updated the answer to include a warning against using transparent PNG's ;)