Search code examples
androidlauncher

Create a Android launch icon for Website


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.


Solution

  • 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.