Search code examples
htmlandroidbookmarks

Configuring Android Web Applications


iPhone web apps have four configuration features available (not including the HTML5 application cache) to configure how web pages behave when you save the web page to the home screen as a bookmark.

  1. You can specify the home page icon.
  2. You can specify a startup image that displays while the web page is loading.
  3. You can hide the browser UI.
  4. You can change the status bar color.

The four features work by adding tags to the <head> like this:

<link rel="apple-touch-icon" href="/custom_icon.png"/>
<link rel="apple-touch-startup-image" href="/startup.png">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

Naturally, none of these "apple-" specific tags do anything in Android. But is there any way to do something equivalent? [At a minimum, I want users to be able to add my web page to their Android home screen (e.g. in Android 2.0) and have a pretty hi-res icon.]


Solution

  • This is a dated question, as such the answer has changed. Chrome on newer androids has it's own meta tags for this. Make sure you Add to the Homescreen, and launch from the homescreen. A normal bookmark is not sufficient. Chrome currently uses a few of the apple directives, but the three at the bottom are the android magic.

    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-startup-image" href="startup.png">
    <link rel="apple-touch-icon" href="youricon.png"/>
    <link rel="apple-touch-icon-precomposed" sizes="128x128" href="youricon.png">
    
    <meta name="mobile-web-app-capable" content="yes">
    <link rel="shortcut icon" sizes="196x196" href="youriconhighres.png">
    <link rel="shortcut icon" sizes="128x128" href="youricon.png">