How to Create a Custom Icon for iOS Bookmarks

So, you’ve made a great website to show off your photography or artwork, and you want people to revisit the site as often as possible. Ideally they’ll save it as a favourite or a bookmark in their browser and pop by from time to time to check your new content.

Chances are, you’ll already have created a favicon for your site as a way of keeping your brand/logo visible in the address of the browser and favourites bar, and this works in a similar way.

custom icon for bookmarks on an iphone or ipad homescreen

For visitors to your site on an iPhone or iPad, they’re faced with the option when saving a URL (in iOS5) to save it to their iOS bookmarks or add the link to the homepage on the device. In iOS6, there are more options to share the link, but the central choice is still ‘add to homepage’. If they choose this option, an icon is created automatically on the device homepage by cropping a small area of the current page and then they can choose their own name for the new bookmark.

If you’re forward thinking enough to have created your own app then you’ll already have created a custom icon for the homepage of the various iOS devices, but to get that professional look of an app in only a few minutes, follow these simple instructions:

  • In your editing software, create a square icon of at least 57px x 57px and save as a .png file. (The device will round the corners when saving to the homepage)
  • Upload the icon (e.g to the images or icons folder on your site).
  • Insert this code into the header of your site;

<link rel=”apple-touch-icon” href=”/the_path_to_your_icon.png” />

That’s pretty much it. You’ll see if you try this, that the Apple device rounds the corners of the icon, and applies some styling (a relective gloss effect), if you don’t want this styling applied to your icon, substitute the line of code above with;

<link rel=”apple-touch-icon-precomposed” href=”/the_path_to_your_icon.png” />

 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.