Mar 22, 2011

How to Add a Custom Icon to Your Blog

If you look at your URL bar while you're reading this blog, you will notice that the Nanay Notebook does not have the usual orange square icon with the white B, which is characteristic of blogs that are hosted in Blogger.

Instead, we have the pink square with an N, which should also appear in your browser tab.

One of our readers asked how we changed our icon from the generic Blogger icon to the customized one.

Here's how:

  1. You need to make an icon file first. Using your favorite photo manipulation software (Photoshop, MS Paint, etc.), make a square image file, around 150 x 150 pixels in size.
     
  2. Go to http://tools.dynamicdrive.com/favicon/ to turn your image into an icon file (with an ICO extension). Just upload your image to the site, click Create Icon, and download the resulting file.
     
  3. Now you need a place to host your files. I recommend Dropbox.com. It's the one I'm using. You need to download and install Dropbox into your computer. (This may sound tedious, but Dropbox is so useful for so many other things, it's really worth the trouble.)
     
  4. When you've finished installing Dropbox, right-click on the Dropbox icon that appears on your Desktop. Then click Dropbox, then Browse on Dropbox Website.
     
  5. In your Dropbox dashboard which appears on your browser, click the Files tab, then go to the Public folder, and click Upload.
     
  6. Upload your ICO file into the Public folder, then right-click on it, click Copy Public Link, then Copy to Clipboard.
      
  7. Now you need to edit your blog's HTML. In Blogger, you can do this by clicking on the Design tab, then click Edit HTML.
     
  8. Find the </HEAD> tag. Right above it, you need to paste this code: <link href='***' rel='shortcut icon'/> but replace the three asterisks with the public link of the your ICO file in Dropbox.
      
    For instance, for the Nanay Notebook, the code looks like this: <link href='http://dl.dropbox.com/u/9447065/nanaynotebook1.ico' rel='shortcut icon'/>.
      
  9. Save your new HTML template.
      
This should give your blog its own, customized icon. Cool, right?

Did these steps work for you? Any problems? Leave a comment to let us know!