philwilson.org

a geek commodity

Adding a bookmark to an Android Home screen

January 2nd, 2010 by Phil

It’s easy to add a link to a URL to the home screen on the iPhone. When you’re looking at a web page, just hit “+” and select “Add to Home Screen”. On Android it’s slightly more involved:

  • Bookmark the page you want to add to a home screen
  • Go to the home screen you want to add the link to
  • long-press in an empty space to bring up the “Add to Home Screen” menu
  • select “Shortcuts”
  • select “Bookmark”
  • choose your bookmark!

The icon you get will be the standard bookmark image with a small overlay of the site’s favicon. If the site provides <link rel="apple-touch-icon-precomposed" href="blah" /> in the <head> then that will be used in preference. Both the iPhone and Android support the apple-touch-icon-precomposed link rel-type so it’s the preferred way of setting a custom icon for your webpage.

Update: I should mention that the resolution of the image you link to shouldn’t be too important but that the Android Icon Guidelines say it should be a 48×48 transparent PNG. I ignored that and used an icon I had lying around that was 256×256 and the OS scaled it just fine. Google themselves use this technique and their image is 57×57. You can find lots of good, free icons for your apps on Smashing Magazine.

Update 2: As rblon says in the comments, there is another way of doing this:

  1. Bookmark the page you want to add to a Home screen
  2. Open the browser “bookmarks” screen
  3. Long-press the bookmark you want
  4. Select “Add to Home screen”

tada!

Tagged: , , , | 51 Comments »

51 Responses

  1. Great information. Took a bit of Googling to track it down but this is exactly what I needed…

    Posted by Clark on January 27th, 2010 at 6:08 am

  2. I try it in my website and it didn’t work. It works for iphone.

    Posted by Dario on March 11th, 2010 at 11:46 pm

  3. It seems to require Android 2.0 or greater, but if you have that then it *does* work!

    Posted by Phil on March 12th, 2010 at 7:20 pm

  4. Thanks!!! Very useful!

    Posted by StarQuake on April 2nd, 2010 at 11:18 am

  5. An other way of doing it is:
    - long press on a bookmark
    - select “Add shortcut to Home”
    I don’t get it to work though (ie I only get the bookmark image with small favicon in the bottom left). Testing with Android 2.1, while it does work on the iPhone.

    Posted by rblon on May 6th, 2010 at 9:30 am

  6. Actually it does work for me now (had a typo in the link). Thanks!

    Posted by rblon on May 6th, 2010 at 9:37 am

  7. Hi rblon, thanks for the other way of doing it – I only found that out a couple of days ago!

    Posted by Phil on May 8th, 2010 at 7:42 am

  8. how to delete the shortcut??????????

    Posted by rima on June 24th, 2010 at 8:22 pm

  9. Damn! It doesn’t work for me (Android on HTC Desire) and Ive tried the ‘apple-touch-icon-precomposed’ on its own AND with the ‘apple-touch-icon-precomposed’ (declared before and after) for the glossy icon on iPhone…
    Maybe the type of PNG (8 or 24) might mess it up… I’ll try again

    Posted by Arnz on June 24th, 2010 at 8:23 pm

  10. I meant to be more specific:
    Android 2.1 upd1 & Webkit 3.1

    Posted by Arnz on June 24th, 2010 at 8:24 pm

  11. Hi Arnz, it could be that you are seeing http://code.google.com/p/android/issues/detail?id=7657 and you therefore need the full path to the icon, not just a path and filename.

    rima – just long press the icon and then drag and drop it to the trash icon at the bottom of the screen.

    Posted by Phil on June 30th, 2010 at 9:44 pm

  12. This Android 2 update1 and Webkit 3 supports this???

    Posted by Alex on July 8th, 2010 at 8:19 pm

  13. I run Android 2.1, but no idea which version of Webkit I have!

    Posted by Phil on July 8th, 2010 at 9:32 pm

  14. If you’ve got htc sense it will only show a bookmark icon with the favicon in the corner.

    Posted by Wello on August 25th, 2010 at 9:53 am

  15. Yeah, its pretty ugly in HTC sense with the favicon in the bookmark icon. Its quite a poor UI compared to the iOS’s approach where that “bookmark” on the home screen looks and behaves like a native app whereas in HTC sense its just a shortcut to firing up the browser with the link opened.

    Posted by Brinley Ang on November 18th, 2010 at 3:25 pm

  16. Is there any way to replace the standard default icon (or the default icon with small overlay) with a proper, customized icon?

    For instance, if I’d much rather have the proper Euronews logo of a white circle on a black field on my home than a generic white star over a red field (especially when I have a dozen other icons of the same star on a red field).

    Posted by Mike on November 21st, 2010 at 10:51 pm

  17. Is that quite right? If the site uses the correct HTML then Android will use the same icon that iOS uses. I was also under the impression that it just opened in a standalone mobile Safari window, rather than actually behaving like a mobile app, but don’t have my Touch at hand to test!

    Posted by Phil on November 23rd, 2010 at 10:20 pm

  18. Thx for the site, it’s a lifesaver! One question about this topic tho – of course it only works for the default browser – any ideas how to do it for something like Dolphin?

    Posted by RB on November 25th, 2010 at 6:10 pm

  19. I’m trying to essentially use the bookmark like an app. Click the icon on the homepage, and it’ll load the relevant site. It’s a little less smooth than a well-made app, but for news sites (which 90% of my bookmarks are), I’d need connectivity whether it’s a bookmark or an app, so no real advantage to an app as far as I can see.

    But I’m using it on Dolphin. And the icons are either a red flag with a white star on them. or else the same flag with a very tiny inset of the proper logo (maybe 1/15th the size of the flag). Perhaps it would be different if I were using safari.

    Either way, I’m slightly disappointed that my android won’t allow me to manually change the logo (or so I think?). I’m also a little annoyed that if I put the bookmarks into folders, I can’t readily rearrange them. If I want to make the 20th bookmark the third, I’d better take all my bookmarks out and put them back in (and even then, it seems to put apps before bookmarks, even if that’s not the order you prefer).

    To date, this is my only gripe about my Android – that and they haven’t worked out media streaming with netflix on all devices. A mild annoyance, but still annoying enough I’m spending time trying to fix it.

    Posted by Mike on November 30th, 2010 at 4:32 am

  20. Hi Mike, I think this blog post may help you: http://androinica.com/2009/04/06/tips-customize-and-manage-your-android-bookmarks/

    Posted by Phil on December 18th, 2010 at 11:42 pm

  21. I, too, would like to be able to have home screen icons that open pages in Opera or Skyfire instead of the default browser. Neither of the methods above will work with Opera. Any ideas, anyone?

    Posted by Jeffrey David Scott on January 10th, 2011 at 10:04 am

  22. [...] ANDROID: Detailed instructions on how to add a shortcut to your Android. [...]

    Posted by Add ‘BramptonSoccer.com’ to your iPhone/iPod Touch/Android as an icon « …90 Perfect Minutes… on February 13th, 2011 at 10:44 pm

  23. [...] någon undrar, hur gör man då för Android-mobiler? Svaret är enkelt: Man kan göra likadant! Android stöder nämligen också apple-touch-icon-precomposed, så om du använder det kommer din ikon alltså användas för majoriteten av [...]

    Posted by Har din sajt en app-ikon för iPhone och Android? | lillbra.se on March 4th, 2011 at 9:55 am

  24. [...] My latest trick was to figure out how to put a webpage as an icon on the home screen. This is a little trick used to make a website look like an applications – we used it often where I used to work. On the iPhone it is simple, you just touch the + and select “Add to Home Screen”. On the Android, this wasn’t so easy. Thank-you to Phil Wilson for posting the directions for how to add a bookmark to the Android home screen. [...]

    Posted by If you can do it on the iPhone, chances are … | RJ Hogue Consulting on April 20th, 2011 at 12:42 am

  25. Thanks, i looking for the way to do this

    Posted by Dich thuat on May 10th, 2011 at 10:10 am

  26. [...] your homescreen using the “Add to homescreen” button if you’re on an iPhone or by this (are you kidding me?!) if you’re on an Android. CrunchBase Information Google News [...]

    Posted by Google News Goes Local On Mobile: Introduces ‘News Near You’ | TxtJive.Com on May 13th, 2011 at 9:13 pm

  27. [...] web app to your homescreen using the “Add to homescreen” button if you’re on an iPhone or bythis (are you kidding me?!) if you’re on an [...]

    Posted by Google News Goes Local On Mobile: Introduces ‘News Near You’ - Media.Tekhis|TEKHIS | Media.Tekhis|TEKHIS on May 14th, 2011 at 4:27 am

  28. [...] web app to your home screen using the “Add to homescreen” button if you’re on an iPhone or by doing this if you’re on an Android. SHARETHIS.addEntry({ title: "Google News Goes Local On Mobile: [...]

    Posted by Google News Goes Local On Mobile: Introduces ‘News Near You’ | Take A Plunge on May 14th, 2011 at 4:36 am

  29. [...] your homescreen using the “Add to homescreen” button if you’re on an iPhone or by this (are you kidding me?!) if you’re on an Android. CrunchBase Information Google News [...]

    Posted by Google News Goes Local On Mobile: Introduces ‘News Near You’ | Techno Earth on May 14th, 2011 at 7:26 am

  30. [...] to homescreen” ボタン、Androidではこれ…私はからかわれているのか?!…を使って、“News Near [...]

    Posted by Google Newsがモバイルでローカルに: ‘News Near You’を開始 on May 14th, 2011 at 10:13 am

  31. [...] your homescreen using the “Add to homescreen” button if you’re on an iPhone or by this (are you kidding me?!) if you’re on an Android. Related Post :Google NewsGoogle News [...]

    Posted by Google News Goes Local On Mobile: Introduces ‘News Near You’ | Gadgets Riview | Malgibar on May 14th, 2011 at 12:15 pm

  32. [...] your homescreen using the “Add to homescreen” button if you’re on an iPhone or by this (are you kidding me?!) if you’re on an Android. CrunchBase InformationGoogle NewsInformation [...]

    Posted by Google News Goes Local On Mobile: Introduces ‘News Near You’ | Best Technology Quotes on May 14th, 2011 at 1:07 pm

  33. [...] your homescreen using the “Add to homescreen” button if you’re on an iPhone or by this (are you kidding me?!) if you’re on an Android. CrunchBase Information Google News [...]

    Posted by Google News Goes Local On Mobile: Introduces ‘News Near You’ | Tech stuff center on May 14th, 2011 at 4:14 pm

  34. [...] your homescreen using the “Add to homescreen” button if you’re on an iPhone or by this (are you kidding me?!) if you’re on an Android. CrunchBase Information Google News [...]

    Posted by Google News Goes Local On Mobile: Introduces ‘News Near You’ | technology3in1.com on May 14th, 2011 at 8:18 pm

  35. [...] if you’re on an iPhone or by this (are you kidding me?!) if [...]

    Posted by Technology Global » Google News Goes Local On Mobile: Introduces ‘News Near You’ on May 15th, 2011 at 3:53 am

  36. [...] the web app to your homescreen using the ?Add to homescreen? button if you?re on an iPhone or by this?(are you kidding me?!) if you?re on an [...]

    Posted by Google News Goes Local On Mobile: Introduces ?News Near You? | adocymutok on May 15th, 2011 at 6:49 pm

  37. When you visit various webpages you can save and read them later on your Android phone with the help of Read It Later Pro.

    http://bstdownload.com/reviews/read-it-later-pro-1/

    Posted by vl on May 19th, 2011 at 2:51 pm

  38. [...] Adding a bookmark to an Android home screen Yes, it can be done. (tags: iphone png mobile favicon android) [...]

    Posted by links for 2011-05-23 | Visualrinse | Design and Development by Chad Udell on May 24th, 2011 at 12:13 am

  39. [...] for 2011-05-23Chad Udell Posted on May 23, 2011 Category: DiscoverAdding a bookmark to an Android home screenYes, it can be done.(tags: iphone png mobile favicon android) See the original post hereLeave a [...]

    Posted by links for 2011-05-23 ‹ The Iona Group on May 24th, 2011 at 4:30 pm

  40. This is awesome…so easy to do!

    Posted by Allyson Blackard on June 10th, 2011 at 11:41 pm

  41. [...] philwilson.org » Blog Archive » Adding a bookmark to an Android Home screen. Advertisement GA_googleAddAttr("AdOpt", "0"); GA_googleAddAttr("Origin", "other"); [...]

    Posted by philwilson.org » Blog Archive » Adding a bookmark to an Android Home screen « Gregory Reese Research on August 19th, 2011 at 10:53 pm

  42. Hi everyone,

    First off, thanks Phil for the guide. However I thought I might update it a bit on how to add a bookmark to the home screen on Android 4.0. as the above method won’t work.

    1) Bookmark a page in your browser
    2) Long press on the back arrow on your browser. The History and Bookmarks menu should show up.
    3) Select “Bookmarks”
    4) Long press on the bookmark you want to add to your home screen, and click ‘Add shortcut to Home”

    Posted by Sim on January 9th, 2012 at 11:33 am

  43. Also for android an easier way:

    1. press the button with squares on the phone.
    2. in the pop-up menu choose “(+) more”
    3. choose “add to home screen”. also it will be added to the bookmarks

    Posted by sheershoff on April 18th, 2012 at 12:42 pm

  44. But HOW TO REMOVE THOSE “FLAGS”?

    Posted by adventist54 on May 23rd, 2012 at 11:12 am

  45. [...] Android there’s a few different ways to achieve this. Thanks to philwilson.org for both these [...]

    Posted by Setting a home screen icon for your website on iOS and Android devices | Blog | Zen Internet on July 24th, 2012 at 10:54 am

  46. I have an HTC EVO 3D with the new Android “Ice Cream Sandwich” upgrade, and when I went to “add to” to bookmark it I was also given the option of addin it to my “homescreen” at the exact same time. Be sure you have space for it on your home screen–it’s not very difficult regardless. Just use common sense.

    Posted by Jeff Holtzclaw on August 22nd, 2012 at 7:44 pm

  47. [...] Klick auf Doodle zugreifen wollen, können Sie sich einen Bookmark auf den Startbildschirm setzen (hier lesen Sie wie das [...]

    Posted by Die Android-App wird abgeschaltet « Blog on August 28th, 2012 at 9:59 am

  48. [...] To retain a one-click button to access Doodle, you can add a bookmark to the homescreen of your smartphone (see how). [...]

    Posted by Android app to be retired « Blog on August 28th, 2012 at 10:19 am

  49. [...] Source: http://philwilson.org/blog/2010/01/adding-a-bookmark-to-an-android-home-screen [...]

    Posted by IBYS as app on Android | Nama Pradipa on October 1st, 2012 at 10:59 pm

  50. [...] Click Here for Instructions to Add a Custom Icon For Your Mobile Website Bookmark [...]

    Posted by Mobile App vs Mobile Website on February 13th, 2013 at 1:39 pm

  51. You could run into problems if your users have other launchers though. I’ve seen icons get mangled to all hell with different launchers. Just something to keep in mind.

    We’ve been working with a mobile dev studio (i.e. http://www.clearbridgemobile.com) and they told us this. Makes sense though…

    Posted by Dan John on March 5th, 2013 at 8:30 pm

Leave a Comment




Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.