Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Customize icon for "Add to home screen"

Tags:

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?

like image 308
garciam202 Avatar asked Apr 18 '17 08:04

garciam202


People also ask

How do I add an icon to my home screen?

Launch Chrome app (web browser). Open the website or web page you want to pin to your home screen. Tap the menu icon (3 dots in upper right-hand corner) and tap Add to homescreen. You'll be able to enter a name for the shortcut and then Chrome will add it to your home screen.

Can you customize app icons?

Open Shortcut Changer, then choose Apps to create a new app shortcut. Select the app you want to pick a new icon for, then choose Icon on the next screen to customize its look. Under Icons, you'll see icons that match the app from any icon packs you have installed.

How do I change a widget icon?

Some app icons can be changed into a convenient widget to use on your Home screen. Touch and hold the icon you want to customize, then release the icon. A blue frame appears around the icon if it can be resized and changed into a widget (if it can't, only the Edit icon is displayed).


1 Answers

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

like image 73
shaochuancs Avatar answered Sep 19 '22 00:09

shaochuancs