I know, this is a homeschooling blog. But while redesigning my blog I came across this great tip to create an app icon for your blog page. I was enamoured and thought I’d share. 🙂
Often when you save a bookmark of a webpage to your home screen you’ll get a tiny, scrunched-up picture of the page as an icon. Instead, you can choose your own image to use in place of that scrunched up webpage. (This works on iPhones and iPads. I couldn’t get it to work on my iPod Touch. These instructions are for Blogger since that’s what I use. For WordPress have a look at the instructions at Carrie Loves.) First, you need an image. I used the same image as my blog button. Resize the image to 129×129 pixels. You don’t need to worry about the rounded corners, that will happen automatically. My blog button is round with a transparent background. I left my background transparent when I resized my image, and the black background was added automatically. Save your image as apple-touch-icon.png. Then upload your image to an online hosting service such as Photobucket. This is the image I uploaded, but without the outline, I just added that so you could see that it is square.
Now you’ll need to edit your template to tell it to pull in this image as a bookmark. From your Blogger dashboard choose Template, then Edit HTML. (Always back up your template before making any changes to your HTML!) Find the <head> tag and under it place the following code: <link href=’http://www.photobucket.com/…/apple-touch-icon.png’ rel=’apple-touch-icon’/> You’ll need to edit the link (the part I made pink) to point to the image you’ve uploaded to your hosting service. Now save your template. On your iPad or iPhone add a bookmark of your blog to your Home screen. Marvel at its cuteness. (Okay, that part’s optional!) This is what it looks like when saved to my Home screen:
This little icon makes me so happy! Happy blogging!