How Do I Create Image Assets for My Mobile App Build?

When you create a new mobile app build or need to rebrand your station, your SoCast Account Manager will provide the information you need to submit your app assets. Please follow the steps below to properly prepare your assets so your app can be built correctly the first time.

Step 1: Download the Sample Folder

Download the attached ZIP file to see an example of a folder containing the full set of required app assets.

Step 2: Review the Asset Chart

Review the charts below to see the name, location, size, format, and purpose of each asset required for your app build.

Note: The icons and splash screens pictured in the “Example” columns are not all displayed to exact scale—they are just to show rough dimensions.

Android App Icons

This icon is used to launch the app after it has been downloaded on an Android device.

Android Notification Icons

This icon displays in the status bar, notification menu, and lock screen on an Android device.

Note: This image must be white with transparent areas to display correctly.

Android Splash Screens

This is the first screen that displays when the app is launched from an Android device.

iOS App Icons

This icon is used to launch the app after it has been downloaded on an iOS device.

iOS Splash Screens

This is the first screen that displays when the app is launched from an iOS device.

App 'Splash' Logo

This is a fallback image that displays in the navigation menu for news apps if there is no 'on air now' program image. Please include this image regardless of whether your app is music or news.

Step 3: Create the Folder Structure

Follow the folder structure and naming convention as demonstrated by the “Example App Assets.zip” sample folder from Step 1. The exact folder structure and folder names must be used so the app can recognize where the required assets are located.

Station Folder (All Assets)

1. Create a new folder containing all assets for the app called CALL LETTERS, replacing “CALL LETTERS” with your station’s call letters (e.g., "WXYZFM").

Android Assets Folder

1. Inside the station folder, create a folder called android_res.
2. Inside android_res, create the following subfolders:
   • drawable-hdpi
   • drawable-ldpi
   • drawable-mdpi
   • drawable-xhdpi
   • drawable-xxhdpi
   • drawable-xxxhdpi
   • drawable-port-hdpi
   • drawable-port-ldpi
   • drawable-port-mdpi
   • drawable-port-xhdpi

iOS Icon Assets Folder

1. Inside the station folder, create a folder called ios_icons.

iOS Splash Screen Assets Folder

1. Inside the station folder, create a folder called ios_splash.

App 'Splash' Logo Folder

1. Inside the station folder, create a folder called other_img.

Step 4: Create One Version of Each Asset Type for Approval

Follow the guidelines and recommendations below to create app assets for best display.

Asset Creation

Create one of each asset type at the largest size required and save each asset into its corresponding folder as set up in Step 3.

Note: Only the 192x192 icon.png is needed for approval for both Android and iOS app icons.

Note: Only the 320x320 splash_logo.png is needed for approval if your app 'splash' logo design is also suitable for both Android and iOS app icons.

1. Once each asset type has been created, get internal approval for the appearance of the assets.
2. Revise the assets if necessary and repeat the approval process until each asset type is approved.

Design Considerations

Please consider the following guidelines when designing or sizing assets:

• At smaller icon sizes, a simpler icon design will display more clearly with less detail.
• Design icons to display well across a variety of device screens and backgrounds.
• Maintain consistency in icon and splash screen design across all sizes and platforms for stronger brand recognition.
• Scale assets proportionately—do not stretch or distort images.
• Reduce asset file sizes as much as possible to optimize app launch speed and overall file size. See our recommendations for reducing file size.
• Do not save assets as indexed files unless the image is extremely simplified and remains true to the original after indexing.
• See best practices for Android and iOS iconography.

For Reference: Digital screens use pixels per inch (ppi) as a display unit. Image resolution on digital screens depends on the image size in pixels, not dots per inch (dpi), which is used for print.

Step 5: Produce the Remaining Assets

Once each asset type from Step 4 is approved, you can produce the remaining assets using one of the following options:

Option 1: Image-Editing Software

1. Manually resize and crop each asset by changing the image size in your image-editing software.
2. Start from the largest asset for each type and work through the chart from Step 2 to resize and/or crop it to create the next largest asset for the same type.
3. Repeat the process until the smallest asset is completed for each asset type.
4. Refer to the folder locations in the chart from Step 2 and move each asset into its corresponding folder as set up in Step 3.

For Reference: Many splash screens share the same proportions, so you can resize from the largest version to create smaller ones.

Option 2: Icon Generator

1. Use any of the recommended online tools below to help automate parts of the icon production process.
2. Once the icons have been generated, refer to the folder locations in the chart from Step 2 to move each icon into its corresponding folder as set up in Step 3.

Step 6: Rename the Assets

Follow the asset naming convention as demonstrated by the “Example App Assets.zip” sample folder from Step 1. The exact filenames must be used so the app can recognize the assets it requires.

1. Refer to the chart in Step 2.
2. Copy the exact filename of the asset, including any special characters (e.g., "@", "~").
3. Double-click on the filename of the corresponding asset and paste the correct name.
4. Repeat for each asset until complete.
5. Review the chart again to ensure all assets are correctly named and organized, and that the folders created in Step 3 are also correctly named and structured.

For Reference: The “@2x”, “@3x” in filenames is a standard naming format used by apps to recognize assets for retina display.

Step 7: Upload to SoCast

Submit the station folder created in Step 3 via Google Drive, or speak to your SoCast Account Manager for more sharing options.

If you have any questions or need further assistance, please contact your SoCast Account Manager.