I spent about four hours trying to figure out why some icons were showing up as full-sized buttons (mobile.twitter.com is a good example) and others as the system standard red flag / red ribbon (with or without the favicon superimposed on top).
All the answers I found involved downloading external apps, which seemed to skirt around the issue.
My solution requires some html knowledge (and access to a hosting space) but if you're moderately anal (as I am) and want custom bookmark / shortcut icons, it will work flawlessly.
Some background:
As far as I understand, Android 2.2 uses the icon standards imposed by Apple. That means that the usual favicon.ico won't work as a full-sized shortcut button, even if it looks great in the browser bookmarks panel.
To review, the custom images requested by Apple are:
apple-touch-icon
What we otherwise would think of as a "favicon", 32x32 pixels, transparent png
On my LG Optimus S running Android 2.2, this image is used as the page favicon, as well as the little icon that shows up on my bookmarks screen.
apple-touch-icon-precomposed
A larger, non-glossy version of the favicon, used to make home screen shortcuts; 57x57 pixels (or a high-res version at 114x114) transparent png
Android 2.2 uses this image for the home screen shortcuts. Notice that you may have two separate icons for the same bookmark -- one for the bookmarks page and one for the home screen.
apple-touch-startup-image
The splash screen displayed while loading; 320x460 pixels for the ipod/iphone
(More info on Apple Application Icons
here)
For our purposes, we'll only need to deal with the "apple-touch-icon-precomposed". Check out the twitter version
here to get a feel for how this looks.
Setting up the HTML
(I'm assuming some dev knowledge here)
To get a custom icon for our bookmark, we'll first need to create a simple html page that satisfies the requirements for a proper apple precomposed icon, and make sure that we have a 57x57 transparent png uploaded and ready to go. I would suggest adding a regular 32x32 icon as well, since this will still show up in the bookmarks panel.
Our html link tags will look like this:
<link href='FULL URL HERE' rel='apple-touch-icon-precomposed' />
<link href='FULL URL HERE' rel='icon' type='image/png' />
The full code should look like this (replace link hrefs with the proper
full URL):
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>Twitter</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link href='http://mobile3.twimg.com/740c0db7f33d69d1775678297629eea53d302048/images/apple-touch-icon-114.png' rel='apple-touch-icon-precomposed' />
<link href='http://mobile1.twimg.com/740c0db7f33d69d1775678297629eea53d302048/images/ic_fav_alpha_32.png' rel='icon' type='image/png' />
<link href='http://mobile2.twimg.com/740c0db7f33d69d1775678297629eea53d302048/images/startup.png' rel='apple-touch-startup-image' />
</head>
</head>
<body>
</body>
</html>
Now the fun part
Upload your new html page and access it with your phone's browser. You should see the smaller 32x32 favicon on the address bar. Add a bookmark for this page and give it the correct name ("Facebook," "Twitter," etc.) but change the Location URL to the
actual URL of the site you want bookmarked (i.e. http://touch.facebook.com). Press OK.
Now set up the home screen shortcut -- Press and hold down on the newly created bookmark until prompted with additional options. Select "Add shortcut to Home" and you're done!
