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

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

When you create a new mobile app build, or need to re-brand your station, your SoCast Account Manager will provide you with the information you need to submit your app assets to SoCast. Please follow steps 1-7 below to properly prepare your assets for the app to be built correctly for the first time.



STEP 1: Download the sample folder


Download Attached Zip file to see an example of what a folder with the full set of app assets look like:




STEP 2: Review the asset chart


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

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

Android App Icons

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

Example Context






Folder Location Image Name & Format (PNG) Image Size (Pixels)
1 / CALL LETTERS/android _res /drawable-hdpi icon.png 72x72
2 / CALL LETTERS / android _res /drawable-ldpi icon.png 36x36
3 / CALL LETTERS / android _res /drawable-mdpi icon.png 48x48
4 / CALL LETTERS / android _res /drawable-xhdpi icon.png 96x96
5 / CALL LETTERS / android _res /drawable-xxhdpi icon.png 144x144
6 / CALL LETTERS / android _res /drawable-xxxhdpi icon.png 192x192


Android Notification Icons

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

NOTE: This image can only be in white with transparent areas to work correctly.

Example Status Bar Context Notification Menu Context Lock Screen Context




Folder Location Image Name & Format (PNG) Image Size (Pixels)
1 / CALL LETTERS / android _res /drawable-hdpi ic_action_notification.png 36x36
2 / CALL LETTERS / android _res /drawable-mdpi ic_action_notification.png 24x24
3 / CALL LETTERS / android _res /drawable-xhdpi ic_action_notification.png 48x48
4 /CALL LETTERS / android _res /drawable-xxhdpi ic_action_notification.png 72x72
5 / CALL LETTERS / android _res /drawable-xxxhdpi ic_action_notification.png 96x96

For Reference: The chart is ordered alphabetically according to the order in which the items will appear in the folder.


Android Splash Screens

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

Example Context



Folder Location Image Name & Format (PNG) Image Size (Pixels)
1 / CALL LETTERS / android _res /drawable-port-hdpi screen.png 480x800
2 / CALL LETTERS / android _res /drawable-port-ldpi screen.png 200x300
3 / CALL LETTERS / android _res /drawable-port-mdpi screen.png 320x480
4 / CALL LETTERS / android _res /drawable-port-xhdpi screen.png 720x1280

For Reference: The chart is ordered alphabetically according to the order in which the items will appear in the folder.


iOS App Icons

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

Example Context



Folder Location Image Name & Format (PNG) Image Size (Pixels)
1 /CALL LETTERS / ios_icons icon.png 57x57
2 /CALL LETTERS / ios_icons icon@2x.png 114x114
3 /CALL LETTERS / ios_icons icon-40.png 40x40
4 /CALL LETTERS / ios_icons icon-40@2x.png 80x80
5 /CALL LETTERS / ios_icons icon-50.png 50x50
6 /CALL LETTERS / ios_icons icon-50@2x.png 100x100
7 /CALL LETTERS / ios_icons icon-60.png 60x60
8 /CALL LETTERS / ios_icons icon-60@2x.png 120x120
9 /CALL LETTERS / ios_icons icon-60@3x.png 180x180
10 /CALL LETTERS / ios_icons icon-72.png 72x72
11 /CALL LETTERS / ios_icons

icon-72@2x.png

144x144
12 /CALL LETTERS / ios_icons icon-76.png 76x76
13 /CALL LETTERS / ios_icons icon-76@2x.png 152x152
14 /CALL LETTERS / ios_icons icon-small.png 29x29
15 /CALL LETTERS / ios_icons icon-small@2x.png 58x58
16 /CALL LETTERS / ios_icons icon-small@3x.png 87x87

For Reference: The chart is ordered alphabetically according to the order in which the items will appear in the folder.


iOS Splash Screens

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

Portrait Example Portrait Context
Landscape Example Landscape Context



Folder Location Image Name & Format (PNG) Image Size (Pixels)
1 /CALL LETTERS / ios_splash Default@2x~iphone.png 640x960
2 /CALL LETTERS / ios_splash Default~iphone.png 320x480
3 /CALL LETTERS / ios_splash Default-568h@2x~iphone.png 640x1136
4 /CALL LETTERS / ios_splash Default-667h.png 750x1334
5 /CALL LETTERS / ios_splash Default-736h.png 1242x2208
6 /CALL LETTERS / ios_splash Default-Landscape@2x~ipad.png 2048x1536
7 /CALL LETTERS / ios_splash Default-Landscape~ipad.png 1024x768
8 /CALL LETTERS / ios_splash Default-Landscape-1366@2x.png 2732x2048
9 /CALL LETTERS / ios_splash Default-Portrait@2x~ipad.png 1536x2048
10 /CALL LETTERS / ios_splash Default-Portrait~ipad.png 768x1024
11 /CALL LETTERS / ios_splash Default-Portrait-1366@2x.png 2048x2732

For Reference: The chart is ordered alphabetically according to the order in which the items will appear in the folder.


App 'Splash' Logo

This is a fallback image that displays in the navigation menu for news apps if they do not have an 'on air now' program image. We ask that this image still be included regardless of whether the app is music or news.

Example Context




Folder Location Image Name & Format (PNG) Image Size (Pixels)
1 /CALL LETTERS / other_img splash_logo.png 320x320




STEP 3: Create the folder structure


Follow the folder structure and naming convention as demonstrated by the “Example App Assets.zip” sample folder downloaded in step 1 . In order for the app to be built correctly, the exact folder structure and folder names must be used so that 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 ” and replace “CALL LETTERS” in the folder name with the call letters of your station, i.e. "WXYZFM"

Android Assets Folder

  1. Inside the station folder, create a new folder called “ android_res

  2. Inside the “ android_res ” folder, create the following sub folders:

    1. drawable-hdpi

    2. drawable-ldpi

    3. drawable-mdpi

    4. drawable-xhdpi

    5. drawable-xxhdpi

    6. drawable-xxxhdpi

    7. drawable-port-hdpi

    8. drawable-port-ldpi

    9. drawable-port-mdpi

    10. drawable-port-xhdpi

iOS Icon Assets Folder

  1. Inside the station folder, create a new folder called “ ios_icons ” and replace “CALL LETTERS” in the folder name with the call letters of your station, i.e. "WXYZFM"

iOS Splash Screen Assets Folder

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

App 'Splash' Logo Folder

  1. Inside the station folder, create a new 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 of the following asset types at the largest size required and save each asset into its corresponding folder setup in step 3 .

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

NOTE: Only the 320x320 icon.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 has been approved


Asset Type Folder Location Image Name & Format (PNG) Image Size (Pixels)
1 Android App Icon / CALL LETTERS/android_res /drawable-xxxhdpi icon.png 192x192
2 Android Notification Icon / CALL LETTERS/android_res /drawable-xxxhdpi ic_action_notification.png 96x96
3 Splash Screen (Landscape Orientation) /CALL LETTERS/ios_splash Default-Landscape-1366@2x.png 2732x2048
4 Splash Screen (Portrait Orientation) /CALL LETTERS/ ios_splash Default-Portrait-1366@2x.png 2048x2732
5 App 'Splash' Logo /CALL LETTERS/other_img splash_logo.png 320x320

Design Considerations

Please consider the guidelines below when designing or sizing assets.

Asset Type Standardized Display Boundary/Background Buffer Space Notes
Android App Icon None A boundary or background containing icon elements is strongly recommended for best display Some buffer space between the icon content and icon boundary is strongly recommended so that the icon content does not appear to bleed into the icon edges


Android Notification Icon Android notification icons may appear inside a circular boundary in some circumstances Icon background must be transparent
  • Android notification icons must be white so the simpler the design, the better it will translate as a single, solid colour
  • A simple, solid shape will also display sharper at small sizes than a logo or a detailed design
iOS App Icon iOS automatically rounds out icon corners for consistent display of apps on the device A boundary or background containing icon elements is strongly recommended for best display

Icon contents should be designed or sized in a way that critical content will not be cropped out near the corners

Android and iOS Splash Screens None A background that fills the full image space is strongly recommended for best display
Some buffer space between the image content and image boundary is strongly recommended so that the image content does not appear to bleed into the screen edges


Additional Recommendations

  • At smaller icon sizes, a simpler icon design will display more clearly with less detail

  • When designing the icon, keep in mind that it must display well across a variety of device screens that may be using different coloured backgrounds that range from light to dark hues, or different wallpaper images that range from simple to complex details

  • The icon design should be consistent across all sizes, and ideally also consistent for Android and iOS apps for stronger brand recognition

  • The splash screen design should be consistent across all sizes, and ideally also consistent between Android and iOS apps for stronger brand recognition

  • Assets should be scaled proportionately and not stretched or distorted

  • Asset file sizes should be reduced as much as possible in order to optimize the app’s launch speed and the app’s overall file size. Please see our recommendations for reducing file size .

  • Even if the asset has only 1 colour, saving it as an indexed file is not recommended unless the image detail is extremely simplified and the appearance of the image remains true to original after indexing. Otherwise the asset will most likely appear bitmapped and unrecognizable especially at small sizes.
  • See best practices for Android and iOS iconography


For Reference: Digital screens use pixels per inch (ppi) as a display unit. This means that image resolution on digital screens is dependent on the image size in pixels instead of using dots per inch (dpi) which is used for print resolution.



STEP 5: Produce the remaining assets


Once each of the asset types from step 4 are approved, you can produce the remaining assets using 1 of the 2 following options:

Option 1: Image-Editing Software

  1. Manually re-size and re-crop each asset by changing the image size in your image-editing software.

  2. Start from the largest asset available for each type and work through the chart from step 2 to re-size and/or re-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 setup in step 3


For Reference:

  • The 2732x2048 iOS splash screen ( Default-Landscape-1366@2x.png ) is the same proportions as the 2048x1536 iOS splash screen (Default-Landscape@2x~ipad.png) and 1024x768 iOS splash screen (Default-Landscape~ipad.png)
  • The 2048x2732 iOS splash screen ( Default-Portrait-1366@2x.png ) is the same proportions as the 1536x2048 iOS splash screen (Default-Portrait@2x~ipad.png) and 768x1024 iOS splash screen (Default-Portrait~ipad.png)
  • The 1242x2208 iOS splash screen (Default-736h.png) is of similar proportions to the 750x1334 iOS splash screen (Default-667h.png), 640x1136 iOS splash screen (Default-568h@2x~iphone.png), and 720x1280 Android splash screen
  • The 640x960 iOS splash screen (Default@2x~iphone.png) is the same proportions as the 320x480 iOS splash screen (Default~iphone.png), 320x480 Android splash screen, and 200x300 Android splash screen
  • The 480x800 Android splash screen does not share similar proportions to any of the splash screens

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 setup in step 3
Icon Type URL Description Folder & Asset Naming iOS Preview Android Preview Custom Display Options Scales Proportionately Notes
iOS and Android App Icons https://makeappicon.com Upload 1 image that generates all iOS app icons and Android app icons . Notification icons and splash screens are not included. These tools do NOT use the same folder structure and naming convention that we require for the app build. The folders and assets will still need to be re-named according to the chart from step 2 . Yes Yes No No
  • Email IS required to download generated icons

  • For best results, create 1 square version of the image with a background colour at the largest size needed (recommended 1536x1536)

  • This tool automatically converts the artwork to black if the background is transparent

  • This tool generates several extra assets that we do not require and should NOT be included with the assets folder prepared for SoCast: iTunesArtwork.png, Icon-40@3x.png , Icon-83.5@2x.png , and Icon-Small@3x.png

iOS and Android App Icons http://icon.angrymarmot.org/ Upload 1 image that generates all iOS app icons and Android app icons . Notification icons and splash screens are not included. No No No No
  • Email NOT required to download generated icons
  • For best results, create 1 square version of the image with a background colour at the largest size needed (recommended 1024x1024)
  • This tool does not include a background color if the background is transparent
  • This tool generates several extra assets that we do not require and should NOT be included with the assets folder prepared for SoCast : Icon-32.png, Icon-40@3x.png , Icon-120.png, Icon 152, Icon-Amazon, Icon-Small-40, Icon-Small-40 @ 2x, Icon-Small-40 @ 3x, Icon-50, Icon-Small-50 @ 2x, iTunesArtwork.png, Icon-xxhdpi.png, Icon-xxxhdpi.png, and upload.png
Android App Icons http://romannurik.github.io/AndroidAssetStudio/icons-launcher.html Upload 1 image that generates all Android app icons . Notification icons and splash screens are not included.
N/A No Yes Yes
  • For best results, create an image with a background colour

  • This tool does not include a background color if the background is transparent and the shape is removed in the tool
  • This tool generates 1 extra asset that we do not require and should NOT be included with the assets folder prepared for SoCast: 144x144 icon

  • The LDPI app icon listed in the chart from step 2 must be created separately as this tool does not include the LDPI version which is required for the app

Android Notification Icons https://romannurik.github.io/AndroidAssetStudio/icons-notification.html Upload 1 image that generates all Android notification icons . App icons and splash screens are not included.
N/A No Yes Yes
  • This tool automatically converts the artwork to white if the background is transparent

  • This tool generates several extra assets that we do not require and should NOT be included with the assets folder prepared for SoCast: 24x38 icon, 16x25 icon, 32x50 icon, 48x75 icon, and 64x100 icon




STEP 6: Rename the assets


Follow the asset naming convention as demonstrated by the “Example App Assets.zip” sample folder downloaded in step 1 . In order for the app to be built correctly, the exact filenames must be used so that the app can recognize the assets it requires.

  1. Refer to the chart in step 2

  2. Start from the top of the chart and copy the exact filename of the asset, including any special characters (i.e., "@", "~", etc.)

  3. Double click on the filename of the corresponding asset and paste the correct name

  4. Work down the chart and repeat the process for each asset until complete

  5. Once complete, review the chart again to ensure that 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 the filenames is a standard naming format used by apps to recognize assets used for retina display.




STEP 7: Upload to SoCast


Submit the station folder created in step 3 via Google Drive, or talk to your SoCast account manager for more sharing options.







    • Related Articles

    • List Of Mobile App Advertising & Sponsorship Options

      This Article Is For: All users who have: Manage Mobile App Permissions This is applicable to: Single Tenant App & Multi-Tenant App Requirements: Station/brand have already purchased the SoCast Mobile App package Have been given the above listed ...
    • What Image Assets Do I Need To Create For My Mobile App?

      A huge number of image assets are needed to build and create a new mobile app in the first place, but here are the images that you can create and change within your mobile app. If you haven't seen a demo of the mobile app, please contact ...
    • How do I Rebrand my Mobile App?

      This article is for stations that are rebranding/ flipping formatsRequests to rebuild a mobile app with a new station brand must come from your Company Administrator Before SoCast can build and publish new mobile apps to your account, you must ensure ...
    • Why Does Google Play Say The App Isn't Available In My Country?

      This Article Is For: Users who have been given permission to manage Mobile App Settings This is applicable to: Single Tenant App & Multi-Tenant App Requirements: Station/brand have already purchased the SoCast Mobile App package Have been given the ...
    • Mobile App Navigation Icons

      This Article Is For: All users who have: Manage Mobile App Navigation Permissions This is applicable to: Single Tenant App & Multi-Tenant App Navigation Icons The navigation icons are the images you see in the bottom bar on your mobile device, and on ...