Page 1 of 1

"Add to Home Screen" icon for iOS

PostPosted: Sat Oct 15, 2016 5:51 pm
by Ronnie
Here's a handy info especially when you're compiling your NeoApp project to "Web Application / Website (HTML)" option.

On the smartphone and tablet devices (iOS and Android OS), there is an "Add to Home Screen" option on the web browser (Safari, Chrome) as a "shortcut" to link to your app page, and the app icon would be displayed on the phone's home screen.

But there are some differences in the way iOS handle the screen icon...

On iOS, the screen icon used on Home Screen is a 'screenshot' of your first page, unless you defined them correctly.

The solution to "enable" the same icon to be displayed on iOS and Android devices requires editing the INDEX.HTML file. I normally use NotePad ++ for editing.

In the index.html file, search for the icon image file. In this example, the icon and link for my app is located at "img/icon128.png"

Once you have located the icon image file, look at the entire line which is something like:
<link rel="shortcut icon" href="img/icon128.png" />

Add the following statement in the INDEX.HTML file:
<link rel="apple-touch-icon" href="img/icon128.png" />

Save the changes. This means you will see the followings:
<link rel="apple-touch-icon" href="img/icon128.png" /><link rel="shortcut icon" href="img/icon128.png" />

Now, when user chose to "Add to Home Screen" on their iOS devices, the correct icon image (icon128.png) that you've defined would be used.

Hope that helps...


Re: "Add to Home Screen" icon for iOS

PostPosted: Sun Oct 16, 2016 12:24 pm
by Neosoft Support
That's good information. I'll make a note to have NAB's compiler do this automatically in the future.