Adding a bookmark to an Android Home screen

02 January, 2010

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:

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

tada!

See other posts tagged with android general iphone mobile pics and other posts made in January 2010.

Comments

Clark

27 January, 2010 at 05:08

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

Dario

11 March, 2010 at 22:46

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

Phil

12 March, 2010 at 18:20

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

StarQuake

02 April, 2010 at 10:18

Thanks!!! Very useful!

rblon

06 May, 2010 at 08:30

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.

rblon

06 May, 2010 at 08:37

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

Phil

08 May, 2010 at 06:42

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

rima

24 June, 2010 at 19:22

how to delete the shortcut??????????

Arnz

24 June, 2010 at 19:23

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

Arnz

24 June, 2010 at 19:24

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

Phil

30 June, 2010 at 20:44

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.

Alex

08 July, 2010 at 19:19

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

Phil

08 July, 2010 at 20:32

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

Wello

25 August, 2010 at 08:53

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

Brinley Ang

18 November, 2010 at 14:25

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.

Mike

21 November, 2010 at 21:51

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

Phil

23 November, 2010 at 21:20

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!

25 November, 2010 at 17:10

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?

Mike

30 November, 2010 at 03:32

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.

Phil

18 December, 2010 at 22:42

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

Jeffrey David Scott

10 January, 2011 at 09:04

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?

Add ‘BramptonSoccer.com’ to your iPhone/iPod Touch/Android as an icon « …90 Perfect Minutes…

13 February, 2011 at 21:44

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

Har din sajt en app-ikon för iPhone och Android? | lillbra.se

04 March, 2011 at 08:55

[…] 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 […]

If you can do it on the iPhone, chances are … | RJ Hogue Consulting

19 April, 2011 at 23:42

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

Dich thuat

10 May, 2011 at 09:10

Thanks, i looking for the way to do this

Google News Goes Local On Mobile: Introduces ‘News Near You’ | TxtJive.Com

13 May, 2011 at 20:13

[…] 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 […]

Google News Goes Local On Mobile: Introduces ‘News Near You’ - Media.Tekhis|TEKHIS | Media.Tekhis|TEKHIS

14 May, 2011 at 03: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 […]

Google News Goes Local On Mobile: Introduces ‘News Near You’ | Take A Plunge

14 May, 2011 at 03:36

[…] 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: […]

Google News Goes Local On Mobile: Introduces ‘News Near You’ | Techno Earth

14 May, 2011 at 06: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 […]

Google Newsがモバイルでローカルに: ‘News Near You’を開始

14 May, 2011 at 09:13

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

Google News Goes Local On Mobile: Introduces ‘News Near You’ | Gadgets Riview | Malgibar

14 May, 2011 at 11:15

[…] 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 […]

Google News Goes Local On Mobile: Introduces ‘News Near You’ | Best Technology Quotes

14 May, 2011 at 12:07

[…] 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 […]

Google News Goes Local On Mobile: Introduces ‘News Near You’ | Tech stuff center

14 May, 2011 at 15:14

[…] 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 […]

Google News Goes Local On Mobile: Introduces ‘News Near You’ | technology3in1.com

14 May, 2011 at 19:18

[…] 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 […]

Technology Global » Google News Goes Local On Mobile: Introduces ‘News Near You’

15 May, 2011 at 02:53

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

Google News Goes Local On Mobile: Introduces ?News Near You? | adocymutok

15 May, 2011 at 17:49

[…] 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 […]

19 May, 2011 at 13:51

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/

links for 2011-05-23 | Visualrinse | Design and Development by Chad Udell

23 May, 2011 at 23:13

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

links for 2011-05-23 ‹ The Iona Group

24 May, 2011 at 15:30

[…] 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 […]

Allyson Blackard

10 June, 2011 at 22:41

This is awesome…so easy to do!

philwilson.org » Blog Archive » Adding a bookmark to an Android Home screen « Gregory Reese Research

19 August, 2011 at 21:53

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

Sim

09 January, 2012 at 10:33

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”

sheershoff

18 April, 2012 at 11:42

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

adventist54

23 May, 2012 at 10:12

But HOW TO REMOVE THOSE “FLAGS”?

Setting a home screen icon for your website on iOS and Android devices | Blog | Zen Internet

24 July, 2012 at 09:54

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

Jeff Holtzclaw

22 August, 2012 at 18:44

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.

Die Android-App wird abgeschaltet « Blog

28 August, 2012 at 08:59

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

Android app to be retired « Blog

28 August, 2012 at 09:19

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

IBYS as app on Android | Nama Pradipa

01 October, 2012 at 21:59

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

Mobile App vs Mobile Website

13 February, 2013 at 12:39

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

Dan John

05 March, 2013 at 19:30

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…

Favicon, icon, shortcut icon, apple-touch-icon: Are there any others? | CL-UAT

29 December, 2014 at 12:44