Create a Android launch icon for Website

Anoop Halgeri picture Anoop Halgeri · Mar 4, 2014 · Viewed 43.7k times · Source

I have a responsive website which can be accessed across multiple devices, our design and application is mainly targeted for mobile users.

To ease access to the site, we want to create a launch icon which will apear on the mobile home screen and user can access the site using one touch, as against launching the browser and typing the url / opening the bookmarked page.

I found a solution for it in IOS, which is also supported by the safari browser using which you can save the page url as a launch icon, can a similar feature be found on a android device? I would also be interested in prompting the users to create the launch icon if they are accessing it from a mobile phone /tablet.

Answer

hcpl picture hcpl · Mar 4, 2014

Default Android

This is the preferred way since this is all based on default Android options and doesn't add any maintenance.

As a widget from bookmarks

If on android you long press the home screen and then select the widget option you can create a bookmark. This will let you select a bookmark from your chrome bookmarks to be linked on the desktop. If that works for you you're all set with default Android features. The icon from the bookmark is used on the desktop.

Directly from Chrome

Similar to this approach is selecting the "Add to homescreen" option in the chrome settings menu.

Adding a screenshot to desktop from Chrome

The icon is the icon from the website.

Icon as shown on the desktop

Custom alternative

As stated before the alternative is to create an app that only serves the purpose of being a link to your mobile website. Then you have 2 options:

Using default browser of user

An app that uses intents to open the default browser of the user with your URL. This should be the way to go since the user can now keep on using his favorite browser.

In app browser

An app that contains a single webview loading the URL of your webapp. This last option gives you more control over the browsing experience (blocking scripts, overriding requests, ...). However the user can no longer use his preferred browser.

About the icon

In both cases the Icon will be the icon configured and distributed within the app. This also introduce the need of a new app release if the icon or the URL should change.

About the code

Code examples and information about this webapp in app approach can be found at http://developer.android.com/guide/webapps/webview.html

Another good resource is https://developers.google.com/chrome/mobile/docs/webview/overview where mobile app development using a native android app with webview is covered with several aspects like tools, css tricks and more.