Adding A Custom Bookmark Icon To Your Site For Apple Devices (Even On Blogger!)

Some time ago, Apple introduced icon bookmarking to their devices, which allowed website owners to place a custom icon within their site structure so that anyone bookmarking their page using an apple device such as an iPod touch, iPhone or iPad would be able to have a little visual indicator of that site that mimicked the style of app icons and could sit alongside them on the user’s phone screen.

If you don’t currently have one of these icons and a user adds your site as a bookmark on their homepage they will instead see a tiny image of your front webpage, which at such a small scale can look pretty indistinct. It’s very easy to add a custom icon to your site if you are on a self hosted blog or other website. Simply create a 144×144 image of whatever you want your icon to be and save it as a .png file with the file name apple-touch-icon.png and upload it to your home directory.
However, if you aren’t self hosted and so cannot access your home directory, things become a little trickier. However, after a bit of playing around I think I have found a way to get around this. If you create an image as before: 144×144 pixels in size, saved as a .png file, and upload it to somewhere that will host your pictures for you (I chose Flickr, because I always use Flickr) and upload it there. Now, after uploading, find the URL of your picture. You’ll need to make sure that the file extension of your picture is still .png and that the program hasn’t converted it to a .jpg or similar. If you are using Flickr, click on the picture you have just uploaded and then click Actions > view all sizes and select ‘original’. Right click that image and copy the image URL. Paste it back into your browser address bar to make sure it ends in .png and keep that window open.
Next, open up Blogger and go to Template > Edit HTML. Click in teh window that opens up and scroll down to the closing head tag, which looks like this: .

Once you have found that tag, type the following into a line directly above it:

(Blogger kicks out a stink if you don’t include that closing link tag.) Next you must save your template. If you already have a web screenshot icon of your site on your phone/device’s home screen you will need to delete and re-save the bookmark for your icon to show.

To save a website icon to your home screen as a bookmark, simply visit that website in your device, select the icon that looks like an arrow escaping from a box and select the ‘add to home screen’ option.

PS: You don’t ned to worry about rounding off the corners of your icon or making it look all shiny as Apple Magic will do that work for you.

7 thoughts on “Adding A Custom Bookmark Icon To Your Site For Apple Devices (Even On Blogger!)

  1. This is awesome! I assume it only works with Safari? I use Chrome on my mobile devices and can’t seem to find a way to bookmark to my home screen.

  2. Bit of an afterthought comment, if you put apple-touch-icon-precomposed instead, the highlights are removed. My icon is quite white so it washed it out a bit and looks better without the shine.

  3. In so many ways you are like a tutor and a guide and a definite inspiration to other women encouraging us all to take something by the horns and go with it! You are definitely a cheerleader and motivator and your little ‘tidbits’ of advice like this post are actually just the opposite — they impact–they are not ‘tidbits’ at all! 😉 Thank you!

    This tip was so interesting as it’s stuff that one may not even think we have control of or much more have even thought about!

    I have been wondering during this KCB Week how absolutely adorable your graphics are and if you do them yourself? You are so talented. Maybe this can be your next ‘tidbit’ of advice???

    Enjoying your blog and inspiration.

    Most kindly,
    Aruna

Leave a Reply

Your email address will not be published.