Customize icon for "Add to home screen"

html icons homescreen
garciam202 picture garciam202 · Apr 18, 2017 · Viewed 40.9k times · Source

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?

Answer

shaochuancs picture shaochuancs · Apr 18, 2017

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

Related questions

How to add a browser tab icon (favicon) for a website?

I've been working on a website and I'd like to add a small icon to the browser tab. How can I do this in HTML and where in the code would I need to place it (e.g. header)? I …

Read More
What characters can be used for up/down triangle (arrow without stem) for display in HTML?

I'm looking for a HTML or ASCII character which is a triangle pointing up or down so that I can use it as a toggle switch. I found ↑ (&uarr;), and ↓ (&darr;) - but those have a narrow stem. …

Read More
Put icon inside input element in a form

How do I put an icon inside a form's input element? Live version at: Tidal Force theme

Read More