31

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?

Improve this question
3
  • You should specify the OS, the device(s) and maybe an example of what you want.
    – Dwhitz
    Commented Apr 18, 2017 at 8: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
    Commented Apr 18, 2017 at 9:03
  • sorry for my bad explanation. I changed it and i hope it is more helpful.
    – garciam202
    Commented Apr 18, 2017 at 9:09

2 Answers 2

Reset to default
52

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

Improve this answer
7
  • 1
    one question. If i want to do this in both OS, i need to put also the both "link" tag? <link rel="apple-touch-icon" sizes="128x128" href="niceicon.png"> this for IOS and <link rel="icon" sizes="192x192" href="nice-highres.png"> this for Android in my "head" tag?
    – garciam202
    Commented Apr 18, 2017 at 11:46
  • Normally, <link rel="apple-touch-icon" sizes="128x128" href="niceicon.png"> 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
    Commented Apr 18, 2017 at 13:15
  • @shaochuancs cubiq.org link is broken
    – acsadam0404
    Commented Sep 24, 2018 at 14:38
  • 1
    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
    Commented Apr 5, 2022 at 11:50
  • 1
    @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
    Commented Jun 1, 2022 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">
Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.