1. Download our Official Android App: Forums for Android!

Bookmark home screen shortcuts, fav icon size.

Discussion in 'Android Apps & Games' started by Xavura, Jun 7, 2010.

  1. Xavura

    Xavura Lurker
    Thread Starter

    When I add a bookmark shortcut to my home screen, sometimes the website's favicon is full size and others there is only a small preview of the favicon on a red flag.

    (How) can I make it so they are always full size?


  2. Xavura

    Xavura Lurker
    Thread Starter

  3. Roze

    Roze Hiding behind a mystery

    Jan 20, 2010
    Where the Sakura grows
    I only get small previews of the sites' logos on a flag.

    Thread has be moved to increase chance of answer.
  4. 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:

    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.
    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.
    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 (Text):
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    3.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
    5. <head>
    6.     <title>Twitter</title>
    7.     <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    8.     <link href='http://mobile3.twimg.com/740c0db7f33d69d1775678297629eea53d302048/images/apple-touch-icon-114.png' rel='apple-touch-icon-precomposed' />
    9.     <link href='http://mobile1.twimg.com/740c0db7f33d69d1775678297629eea53d302048/images/ic_fav_alpha_32.png' rel='icon' type='image/png' />
    10.     <link href='http://mobile2.twimg.com/740c0db7f33d69d1775678297629eea53d302048/images/startup.png' rel='apple-touch-startup-image' />
    11. </head>
    12. </head>
    13. <body>
    14. </body>
    15. </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!

Share This Page