views:

3067

answers:

6

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

+7  A: 

When you create a shortcut on the home screen to a bookmark, Android will use a apple-touch-icon-precomposed if present (but not apple-touch-icon) as a high-res icon:

<link rel="apple-touch-icon-precomposed" href="/custom_icon.png"/>

As for the rest of the features, I don't think there's any way to do this at present without publishing an Android app that acts as a wrapper for your website.

Trevor Johns
This doesn't appear to work on HTC Evo; it probably doesn't work on any HTC Sense UI device.
Dan Fabulich
It should work if you disable the HTC Sense launcher and use the AOSP Launcher instead. (HTC Sense devices actually ship with both launchers installed.)In any case, thanks for the feedback. That's good to know. I've filed a bug to review this as a candidate for inclusion in future versions of the Android CDD. (b/2811198)
Trevor Johns
A: 

When you create a shortcut on the home screen to a bookmark, Android will use a apple-touch-icon-precomposed if present

It doesn't work on my HTC Desire (Andr 2.1 + Webkit 3.1)... have you actually tried this?

Arnz
Yes, it works fine on Google experience phones but not on HTC Sense UI. Note that you posted your comment an answer to the question; this is not correct, since it doesn't answer the question.
Dan Fabulich
A: 

I believe the favicon image is used as the desktop icon in certain situations. Unfortunately, these are cached per-domain, and not per directory, which makes this unsuitable for blogs and other items arranged in this manner.

Just put something like this in your "head" section: <link rel="shortcut icon" href="/favicon.png" type="image/png" />

I think this is what happens when I put a www.google.com bookmark on my desktop.

JokeyRhyme
A: 

On my HTC Evo it puts the fav icon as a small icon next to a bookmark icon. So it doesn't make it like a native app icon like the iphone does. And it doesn't use the precomposed icon either. Just the favicon. ... bummer.

Cybus
A: 

Anyone got a final solution for this?

frisörutbildningar
+1  A: 

This may be of interest to readers:

http://code.google.com/p/android/issues/detail?id=7657

In 2.1-update1, on the Droid, and I presume other 2.* OS phones, when adding a bookmark to the homescreen, the homescreen only displays a custom icon if the link rel="apple-touch-icon" or apple-touch-icon-precomposed have a FULL url path.

adam.lofts