Bookmarking your favourite web pages and adding to the the home screen (desktop) of your iPad and iPhone just got easier, and a whole lot prettier.
You can add a bookmark for any website to the iPad desktop. An icon for the site will sit amongst your iPad and iPhone App icons. Web sites can define an image to be their icon, or the iPad will create one by taking a small picture of a portion of the page you bookmark. (Of Zen and Computing)
On your iPad or iPhone simply open the page you want to bookmark in Safari and tap the “+” icon immediately to the left of the address bar. You’ll see a menu appear. Choose the ‘add to Home Screen‘ option and you will be able to label you new icon which will immediately be available on your iPad or iPhone desktop.
For the blogger and website owner
How do you as a non-tech savvy blogger and website owner create your own custom icon for the iPad, iPod and iPhone?
There are three simple steps to apple icon heaven…
- Create a cool icon. (Flavor Studios)
- Upload the icon to your blog/website (root directory or as a simple media file upload)
- Specify its location in your HTML header with some simple code.
1. Create your icon…
With the advent of the iPod Touch, Apple updated thier devices to allow users to add website links to their home screen. These home screen icons are created by taking a thumbnail screenshot of your current view on that website. Pretty cool, but…boring!
Now Apple has provided web site owners the ability to specify an icon to be used in-place of the screenshot (apple-touch-icon.png). You can also explicity specify which icon should be used when the iPhone’s browser visits your site by specifying a ‘link‘ tag in the <head> portion of your page’s html.
There are lots of websites which help generate a favicon for your website…but my favourite is Flavor Studio Tools and Resources. Note that the size of an iPad Home Screen icon is 72×72 pixels, so you may need to re-size the downloaded images.
This icon is also compatible with the iPhone and iPod Touch. The size of the icons on those displays is 57×57, but you do not have to create an alternate version. Those mobile devices will shrink down your 72×72 icon automatically. (Of Zen and Computing)
2. Upload the icon to your blog/website
- Upload the completed icon to your site as a transparent PNG named apple-touch-icon.png .
- It is recommended that you place the file in the root public accessible directory…but I didn’t know what that was, so uploaded as a media file and copied the file url to complete the final stage.
3. Add some code
- To allow the iPhone/iPod Touch/iPad to know where to find you icon you need to add the following tag code in the <head> section of your HTML header:
<link rel="apple-touch-icon" href="http://www.website.com/apple-touch-icon.png"/>
- Change the url value of the
hrefattribute to reflect the location of your site’s icon and change webiste.com to your own domain name.
Go wild with free icon design...
You can bookmark them onto your home screen and do it with a custom icon from the page itself.