How to create App icon and favicon?

1

In “Project Properties and Global Code” >>“Properties”, there are 2 entries

  1. icon/favicon
  2. iconAndroid

How/where are these two icons used?

Does this mean that there must be two versions of an app, one for Android and the other version for all ‘non-Android’ apps?

What file format is to be used for each: jpg, gif, bmp, png, or ico? According to all the documentation I could find, it looks like the file format that is used is .png… right?

How big is the Icon to be: 180 by 180 for iOS, what about Android? (Again, does this mean two versions of the app with the only difference being the icon?

I believe favicons are smaller than icons used on device home screens… are they ‘automatically’ reduced in size? If not, then how?

Does the iOS 180 by 180 requirement also hold true for web apps run on iOS (vs. PhoneGap generated apps)?

What graphics software do you recommend?..other than Adobe Illustrator.

It sure would be nice to have a Tech Note on this topic…

I read through “Custom icon for ios - to be loaded from volt” topic and it didn’t help too much, since I’m focusing only on web apps… I also searched and looked through NSB documentation (Wiki and Tech Notes) and could find only the reference in the Properties description … stating the icon must be 180 by 180 for iOS. Is there a description/‘how to’ that I missed?

I also just read through Splash Screens in NSB documentation… I’ve deployed an app to an Android device via Volt… NO “iconAndroid” nor icon/favicon entry in Properties… once the app is saved to the Home Screen, when opened, the app opens to the form in the FirstForm entry in Properties… Does this mean that if I add an “iconAndroid”, it will open to a splash screen with the icon centered rather than the FirstForm entry?

2

The answers to some of these questions are “it depends”. Running as a PhoneGap app is different than a web app, and Chrome does some things different than Safari. What we try to do with AppStudio is make it easy to get most of the settings right with a single version of your app.

You’ll find answers to many of your questions in the Help panel which displays in AppStudio. For example, icon/favicon says “icon for iOS home screen and for favicon in browser menu bar. Enter none for no image. For Android, remember to set ‘iconAndroid’. Best size is 180x180 for iOS. Enter none for no image. Do not put file in /nsb. No spaces or special characters allowed.”

iconAndroid says “Icon for Home screen on Android Chrome. Must be 192x192. Enter none for no image. Do not put file in /nsb. No spaces or special characters allowed.”

While other files type work, the preferred format these days seems to be .png.

To create all the variations needed for PhoneGap apps, there’s a nice service here: http://phonegap.appiq.software/

There are lots of graphic editors which will work. The image requirements are not complex.

I’d start by supplying the icons requested. If there is anything missing or not working, ask follow up questions.

3

In my newer apps there seems to be no /nsb folder any more within the project folder.

4

Here’s what worked…

  • Created a 192 by 192 icon in Paint
  • Saved as a .png file in the same folder as all the programs… for me, that is “nsBasic Programs” (note the space)… I tried “nsBasic Programs/images” and that did NOT work.
  • Changed the icon/Navicon property to “none”
  • Changed the iconAndroid property to “SMNicon.png”
  • Saved and deployed.
  • Downloaded to Android device.
  • It opened to a (new) splash screen containing my icon and the name of the app centered under it.
  • I then saved the app to the Home Screen, shortening the app name to something that fits under the icon.
  • And my icon appeared on the Home Screen with the (shortened) app name under it.
  • Used the “Clear All” ‘button’ to clear all apps
  • Tapped on the icon and the app opened to the splash screen
  • Had to wait about 10 seconds for the app to go to Volt to see if there were any updates
  • After about 10 seconds, the app opened to the (property) "first form’.
    Problem solved… thanks for help, George!
5

Thanks for the good news!