IOS Safari Bookmark Icon for Blogger

Not sure why but once I started sharing idea on Blogger, I also love to browse around Blogger to see other people Blog and idea. Most of the time, I will do that at night time on my IPad and I really like the experience on IPad. I can tell the default settings for Blogger is really nice on IPad. Sometime, I run into some Blogs which are really good and I will bookmark it and save it on the IPad homepage. However, the bookmark icon on the IPad doesn't look good.

When I was playing around the Dashcode, I remembered there is a link reference which you can add to the HTML so that when people try to add the bookmark to the homepage, it will give them a nice icon. Actually, this setting works with Blogger.

Before we change the setting in Blogger, we need to prepare a nice icon PNG file. I'm not really good with Photoshop so I ended up just "google" around and download a nice PNG file. (Actually, I went to iconspedia and download from there.)

Once you have the nice icon, upload it on your host server and you are ready to edit the Blogger template. Log into your Blogger -> Go to Design -> Edit HTML, and you should see the HTML editor. Add the following line just below <header>.

<!-- Add the following code below Header -->
<link href='http://yourhostserver/youricon.png' rel='apple-touch-icon'/>
<!-- End Comment -->

Once you finish editing the template, save it and preview it.

When other people browsing your blog, this addition reference doesn't add or remove anything functionality. However, if the person is browsing your blog on IOS device and try to add bookmark to the home screen, it will use your icon instead of use the screenshot.

I have updated my blog to include a nice icon and you can try it if you have any IOS device.

(ScreenShot)