android - Add to homescreen on mobile phone

Question

How can I code a button to make a shortcut for mobile phone especially on iPhone and Android.

I'm using boilerplate as a framework so it would automatically be adding this on the head section <link rel="shortcut icon" href="img/l/apple-touch-icon.png">. I think this would be my default icon to be used.

now I have a button in my html that is setup like this

<a href="#"><img src="img/button-shortcut.jpg" /></a>

I'm not sure what to put in my href or should I implement it using javascript. I'm also not sure what is the proper term, I'm just guessing it's called as a "shortcut"

What' I'm trying to achieve is, I have a simple web app (plain html) and I have a button to add a shortcut/icon on their homescreen. That way it's easier for them to access my website/web app. My target devices are iphone and android primarily.

Can someone enlighten me?

Thanks!

Answer 1

You can't make a shortcut link for this functionality on iOS, and I'm not aware of a way on Android either. iOS users have to use the Safari toolbar to add something to the home screen.

Some sites use JavaScript to present the user with a little popup, like this: