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.