28

Are there any alternatives to the default option in web browsers, like chrome that allows me to add a link or button in my webapp and create an icon in homescreen?

For example, I have my webapp and i want a link or button in the main.html that execute an script and create the icon in the homescreen. It is not possible i think. So are there any alternatives that simulate this default option in web browsers?

Also i want to specify the icon that shows in the homescreen. How can i do that?

garciam202
  • 591
  • 2
  • 7
  • 17
  • You should specify the OS, the device(s) and maybe an example of what you want. – Dwhitz Apr 18 '17 at 08:59
  • the OS are Android and IOS. And an example is like i describe it. Any button or link in my HTML that execute any script and create an icon in my homescreen. I search other post and it is not possible like this. I ask for maybe other alternatives. – garciam202 Apr 18 '17 at 09:03
  • sorry for my bad explanation. I changed it and i hope it is more helpful. – garciam202 Apr 18 '17 at 09:09

2 Answers2

51

I want to specify the icon that shows in the home screen. How can i do that?

You can use <link rel="apple-touch-icon" sizes="128x128" href="niceicon.png"> (yes, even for Android device).

Please check iOS document for detail information on Apple devices. Please note you can even define icon for the entire website.

Please check Android document for detail information on Android devices. If <link rel="apple-touch-icon" sizes="128x128" href="niceicon.png"> does not work, you can try <link rel="icon" sizes="192x192" href="nice-highres.png">, which is the recommended method in Android.

Are there any alternatives that simulate this default option in web browsers?

You can check http://cubiq.org/add-to-home-screen for an alternative. "add-to-home-screen" will show an overlaying message encouraging user to add the web app to the homescreen.

Note: Thanks to adam0404's comment, cubiq.org link is broken now. Fortunately, the "add-to-home-screen" library was uploaded to GitHub, please check https://github.com/cubiq/add-to-homescreen

shaochuancs
  • 15,342
  • 3
  • 54
  • 62
  • 1
    one question. If i want to do this in both OS, i need to put also the both "link" tag? this for IOS and this for Android in my "head" tag? – garciam202 Apr 18 '17 at 11:46
  • Normally, `` is enough, as it is supported by Android (though not the recommended way). However, there are various Android devices and browsers in the market, some may not support it. My suggestion is: only use `apple-touch-icon` until you find it not work in some Android devices. – shaochuancs Apr 18 '17 at 13:15
  • @shaochuancs cubiq.org link is broken – acsadam0404 Sep 24 '18 at 14:38
  • Thanks @adam0404, fortunately, cubiq.org's add-to-home-screen is uploaded to GitHub: https://github.com/cubiq/add-to-homescreen – shaochuancs Oct 09 '18 at 01:50
  • thanks for the great answer. this was so difficult to find anywhere. so glad it's here. – raddevus Oct 04 '20 at 19:13
  • Note: That link above to the Android docs is now 'stale' (broken). But, I managed to hack until I got something to work on Android. The secret seems to be that Android wants the 'rel' clause to be: rel="icon shortcut". Additional observation: Before this tweak, I WAS getting a big black capital "F", for the home-scream, and I wondered why. I later deduced (speculated) that it comes from the first letter of my website's domain-name,. – David Apr 05 '22 at 11:50
  • @David, do you mind showing the working example? I have set rel="icon shortcut" but the add to home screen shotcut is still the capital letter instead of icon. – jetjetboi Jun 01 '22 at 16:15
1

First line apply to Web and Android, second line apply to iOS omit sizes tag to specify only one icon.

if jpg

<link rel="shortcut icon" type="image/jpeg" href="favicon.jpg">
<link rel="apple-touch-icon" href="favicon.jpg">

if png

<link rel="shortcut icon" type="image/png" href="favicon.png">
<link rel="apple-touch-icon" href="favicon.png">
Ax_
  • 803
  • 8
  • 11