Icon requirements - List

[robertocarroll]

Here's the beginning of the list of design files that we need along with a few things about common rejections from the app store: https://developer.apple.com/app-store/review/rejections/

General

• A link to user support with up-to-date contact information
• Hit targets at least 44 x 44
• Text size at least 11 points
• High res / retina versions of images

  Specific

• [x] The default icon file must be called icon.png
  • [x] 29x29.png
  • [x] 48.png
  • [x] 57.png
  • [x] 58.png
  • [x] 64.png
  • [x] 72.png
  • [x] 76.png
  • [x] 114.png
  • [x] 120.png
  • [x] 144.png
  • [x] 152.png
  • [x] 320.png
  • [x] 1024.png
• [ ] Splash screens - shown when app starts
• ---iOS-----
  • [x] 320X460.png
  • [x] 640x920.png
  • [x] 640x1096.png
  • [x] 748x1024.png
  • [x] 768x1004.png
  • [x] 1496x2046.png
  • [x] 1536x2008.png
  • [x] 1242x2148.png
  • [x] 2208x1182.png
  • [x] 750x1284.png
• ---Android-----
  • [x] 960x720.png
  • [x] 640x480.png
  • [x] 470x320.png
  • [x] 426x320.png
  • [x] 720x960.png
  • [x] 480x640.png
  • [x] 320x470.png
  • [x] 320x426.png

    Custom icons

Use SVG (see #14 for details):

• [x] Play icon (1.2 and 2.1)
• [x] Connect icon (1.2 and 3.1)
• [x] Discover icon (1.2 and 4.1)
• [x] Back arrow pointing left (top bar) (Currently using Ratchet icon from icon font)
• [x] Forward arrow pointing right (2.3 and 2.4) (Currently using Ratchet icon from icon font)
• [x] Red double arrow between images (2.4)
• [x] Three lives (2.3 and 2.4)
• [x] Two lives (2.3 and 2.4)
• [x] One life (2.3 and 2.4)

[clintmclean]

Hi -I may need an explainer on what yo mean by some of this - such as which icon do you mean for the default icon and what do the 1.2, 2.3, 2.4 numbers mean in your last section? I can export this stuff from the indesign in any sizes (or get Una to) - just not quite clear. Shall we skype tomorrow?

[robertocarroll]

• The default icon is the icon which the user taps to launch the app.
• The numbers are the screen number for reference in barjeel-app-user-journeys.pdf
• There's an open issue about icon fonts #14 which you need to decide which approach is best
• There's an open issue about animations #8 which you need to decide is possible - if you provide an example I can add the file and we can test

[clintmclean]

ah ok I understand. Regarding #14 I have exported some but they are all blocked up and I can't figure out why. I just asked una in that previous email if she may know someone who can advise if it is because our icons are too fine or if I am not doing it correctly. Will ask talk to her about #8 as well and see if we can figure it out between us.

[clintmclean]

I've added the default icon in the various sizes to the images folder in the public app folder in dropbox. They are in a separate folder called default icon sizes. what is the default size for the one called icon.png? Or should I be naming them icon29x29.png etc?

[robertocarroll]

I'm a bit confused about the icons we need. c.f. these two articles:

• http://docs.build.phonegap.com/en_US/configuring_icons_and_splash.md.html#Icons%20and%20Splash%20Screens
• https://github.com/phonegap/phonegap/wiki/App-Icon-Sizes

They seem to be saying slightly different things. What do you think?

This clears things up a bit but I'm not sure it's up to date: http://mrgan.tumblr.com/post/708404794/ios-app-icon-sizes

I think we're missing:

<icon src="/images/icons/ios/icon-60.png" width="60" height="60" />
<icon src="/images/icons/ios/icon-60@2x.png" width="120" height="120" />
<!-- iPad -->
<icon src="/images/icons/ios/icon-76.png" width="76" height="76" />
<icon src="/images/icons/ios/icon-76@2x.png" width="152" height="152" />
<!-- iPad Spotlight and Settings Icon -->
<icon src="/images/icons/icons/ios/icon-48@2x.png" width="96" height="96" />

[robertocarroll]

Here's the android ones. (Sorry I missed them from the list above). If you could put them in the android folder in icons that would be great. Thanks!

<icon src="/images/icons/icon/android/icon-36-ldpi.png" gap:platform="android" gap:density="ldpi" />
<icon src="/images/icons/icon/android/icon-48-mdpi.png" gap:platform="android" gap:density="mdpi" />
<icon src="/images/icons/icon/android/icon-72-hdpi.png" gap:platform="android" gap:density="hdpi" />
 <icon src="/images/icons/icon/android/icon-96-xhdpi.png"  gap:platform="android"    gap:density="xhdpi" />
 <icon src="/images/icons/icon/android/icon-144-xxhdpi.png"  gap:platform="android"    gap:density="xxhdpi" />
 <icon src="/images/icons/icon/android/icon-196-xxxhdpi.png"  gap:platform="android"    gap:density="xxxhdpi" />
 <icon src="/images/icons/icon/android/icon-512.png"  gap:platform="android"/>

[clintmclean]

Hi Rob, I have added these all into the folder. I also redid the previous ones so can you reload them all rather than just the new ones. I looked at your article links and your guess is as good as mine - I lean towards the one specifying the ios but I don't really know.

[clintmclean]

The splash screen is just the default icon on grey right? So do I need to make a file that is the icon on grey or do you do the grey in css?

[robertocarroll]

The splash screen needs to include the background.

For the icon sizes, the android ones are clear (and i missed them off my earlier list)

For ios, did you read the actual apple article? I'm still not clear though.

[robertocarroll]

I've added the icons and splash screens, but I'm still confused about what is required and lots of the different sizes didn't tally up. Perhaps something like this automatic generator would be the best approach?

http://ticons.fokkezb.nl/

[robertocarroll]

Currently missing:

• [x] Three lives (2.3 and 2.4)
• [x] Two lives (2.3 and 2.4)
• [x] One life (2.3 and 2.4)
• [x] Home icon (see #27 )
• [x] The red of the play icon is not the same as the red of the background

[robertocarroll]

Will you take a look at this generator when you get chance? http://ticons.fokkezb.nl/

I think it could help with the splash screen squashed issues you've been noticing.

[robertocarroll]

All provided. Will re-open if there are any problems.