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!