How to quickly add a web shortcut icon to your iPhone or Android phone

Posted by Sarah Bainbridge

Your phone's home-screen isn't just for apps, you can also add shortcut icons to websites. This way you will be able to access your favourite sites with a quick tap just as you would with an app icon.

For your desktop or laptop computer you will probably be satisfied using browser toolbar bookmarks, which will display the icons of your favourite sites. But for phones it's useful to have a dedicated icon, just like the ones you are used to seeing.

For instance, on your desktop, laptop or tablet browser, take a look at the icon that appears on the tab at the top of the Obooko homepage. See that small orange square with a white 'O' in the centre? It's called a Favicon and is the brand symbol that's usually used for bookmarking and saving to your social profiles. Now you can have a larger version of this symbol to display on your phone's home-screen: it will look just like regular native app icons and will take you straight to the Obooko homepage to pick up some great free reads. The methods we'll show you will also work for any website that has a favicon.

Under the hood, in the Obooko website's html code, there is a set of links to these 'touch icons' at different sizes ready to be accessed and downloaded to your particular phone or browser. While each browser has its own steps for performing this task, we have selected the most popular, Safari and Chrome.

The following steps are for adding a website shortcut icon to the home-screen of your Apple iPhone (or iPad) or Android phone. We've included some screenshots to assist you. The first image shows you where to look to check if a website has a favicon, which is usually located in the tab above the address-bar.

Creating a shortcut for your iPhone or iPad using Safari

1. Open your Safari browser and enter the url (web address) for the page you would like to create a shortcut; in this case the homepage of www.obooko.com

2. Next, go to the foot of your iPhone screen and tap the 'Share' button, which is the square icon with an arrow pointing upwards.

3. You will now see a panel where you will find, bottom right, a plus-sign with the words 'Add to Home Screen'. Tap this to bring up the next screen.

4. The Obooko icon and the title of the webpage will now be displayed. The title is a short description of the website, which can be changed to a single word or a couple of short ones. We could use Free Ebooks or, as in this case, the brand name OBOOKO.

5. Finally, move to top right and tap the word 'Add'. This will place the icon, which will be styled just like native app shortcuts, to your home-screen. As you would usually do, simply hold down and drag the icon to wherever you want it to appear on the home-screen.

 

Adding a shortcut to your Android phone using Google Chrome

1. Open your Chrome browser at the website homepage (or internal page) of your choice. As for iPhone above we will demonstrate using the Obooko homepage.

2. The first step is to tap the three vertical dots positioned to the right of the address bar. This will display the browser’s dropdown menu.

3. Next, tap the words 'Add to Home screen'.

4. A white panel will now appear. Here you can give the shortcut a name that will allow you to quickly recognise the website.

5. Tap 'Add' and you'll see the icon appear on your home-screen. Hold down and drag to the position of your choice.

 

We hope this has been helpful and you enjoy having a quick link to Obooko on your phone. If there are instructions for any other browsers you would like us to include, please send us a message via the contact form and we'll add them here.