NetTalk Central

« previous next »
Pages: [1]

Author Topic: Setting Icon For Mobile Web App Home Page  (Read 21817 times)

AZIS350

  • Jr. Member
  • **
  • Posts: 62
    • View Profile
    • Email
Setting Icon For Mobile Web App Home Page
« on: February 20, 2012, 10:08:39 AM »
I'm trying to find the correct embed point in our NT mobile app so that when a user saves the web app to their home screen on their phone (iphone or android) it will use our supplied icon rather than just a screen shot of the web app. Here is the code that needs to be placed on the web page (preferably the login screen or the index page):

<link rel="apple-touch-icon" href="ourapplicationicon.png"/>

Has anyone done this for their mobile app, or have a suggestion on the best embed point to place this? Thanks.

Bob
Logged

AZIS350

  • Jr. Member
  • **
  • Posts: 62
    • View Profile
    • Email
Re: Setting Icon For Mobile Web App Home Page
« Reply #1 on: February 20, 2012, 10:22:57 AM »
Never mind, after a little further testing I found the answer.

For anyone interested in this, I placed the link code in the 'XHTML' section of IndexPage. Within there, I created a new routine, selected After <head> as the location, and then just put the following code:

<link rel="apple-touch-icon" href="/Images/ourapplicationicon.png"/>
(where ourapplicationicon.png is our PNG icon in a 57x57 pixel resolution - at least for the iPhone and should work for android as well. For ipad, use 72x27 pixel resolution).

The icon file itself is placed in the Images subfolder of the Web folder.

Works like a charm.

Bob
Logged

DonRidley

  • Don Ridley
  • Global Moderator
  • Hero Member
  • *****
  • Posts: 729
  • donaldridley2011@gmail.com
    • View Profile
    • Email
Re: Setting Icon For Mobile Web App Home Page
« Reply #2 on: February 20, 2012, 07:37:41 PM »
Pretty cool!  Kind of like a mobile favicon..

Thanks for sharing!

Don
Logged
"Eliminate the impossible, whatever remains, however unlikely, must be the truth."

NetTalk 12.55
Clarion 11

peterH

  • Sr. Member
  • ****
  • Posts: 413
    • View Profile
Re: Setting Icon For Mobile Web App Home Page
« Reply #3 on: February 21, 2012, 12:04:53 AM »
Hi,
To add to what Bob is saying, we've got an app that's optimized for (and only meant to be used on) the iPad. The staff in a care home for elderly people will bring their iPad with them when they see the patients in their rooms. This way they've got access to the live db as opposed to a solution with download/upload to/from a pda.

In order to make the app look almost like a native app we're using the code shown below. It's also in a routine in the index page procedure (actually before /head). What it does - besides making the app "install" nicely with an icon on the iPad - is to hide the Safari navigation stuff. The app uses the full screen and the user doesn't even know they're using the internet and they never see the url. For security reasons we access an ip address directly on some highnumber port (no domain) and only the it staff knows about this.

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon" href="/images/OurLogo.png" />

Peter
Logged

DonRidley

  • Don Ridley
  • Global Moderator
  • Hero Member
  • *****
  • Posts: 729
  • donaldridley2011@gmail.com
    • View Profile
    • Email
Re: Setting Icon For Mobile Web App Home Page
« Reply #4 on: February 21, 2012, 03:35:28 AM »
Hmm.. does not work on Android.  Actually made the address bar NOT go away.

 :(

Don
Logged
"Eliminate the impossible, whatever remains, however unlikely, must be the truth."

NetTalk 12.55
Clarion 11

ccordes

  • Sr. Member
  • ****
  • Posts: 384
    • View Profile
    • Email
Re: Setting Icon For Mobile Web App Home Page
« Reply #5 on: February 22, 2012, 11:30:44 AM »
Try 'apple-touch-icon-precomposed' for android
<link rel="apple-touch-icon-precomposed" href="IMAGE-NAME" />

HTH
Chris
Logged
Real programmers use copy con newapp.exe
Pages: [1]
« previous next »