Last Update October 31, 2020: We improved the overall article.

New in Chrome M31 Beta you can set up your web app to have an application shortcut icon added to a device’s homescreen, and have the app launch in full-screen “app mode” using Chrome for Android’s “Add to homescreen” menu item.

When a user clicks “Add to homescreen” they will see the app being added on the homescreen.

how to Add to Homescreen button on HTML5 Framework android Apps 1
homescreen Preview

add to homescreen  on apps

Chrome will look for the following meta tag in the  element of the web-page:

how to Add to Homescreen button on HTML5 Framework android Apps 2



The name attribute MUST be “mobile-web-app-capable” and the content attribute must be “yes” (case in-sensitive). If there is any other value in the content attribute the web app will be added as a regular bookmark.

The icon that is used to install to the homescreen is determined by using the largest icon found in one of the following tags:

how to Add to Homescreen button on HTML5 Framework android Apps 3

Configuration

The following example is the minimum required configuration to support a homescreen launch experience.

how to Add to Homescreen button on HTML5 Framework android Apps 4
phonegap project Index code adding for icon

In Android Studio on  [project] open assets folder past code in index.html file : 

how to Add to Homescreen button on HTML5 Framework android Apps 5

As an Amazon Associate I earn from qualifying purchases.