Bookmark home screen shortcuts, fav icon size.

Last Updated:

  1. Xavura

    Xavura New Member

    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 New Member

  3. Roze

    Roze Hiding behind a mystery VIP Member

    I only get small previews of the sites' logos on a flag.

    Thread has be moved to increase chance of answer.
  4. shmooperdooper

    shmooperdooper New Member

    I spent about four hours trying to figure out why some icons were showing up as full-sized buttons ( 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.   "">
    4. <html xmlns="" 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='' rel='apple-touch-icon-precomposed' />
    9.     <link href='' rel='icon' type='image/png' />
    10.     <link href='' 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. 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