How to Change the Default Blogger Icon to a Custom One

Don´t like the default Blogger icon in your template?

Then you need a new one! You can create your own image in whatever image editor you are comfortable with (Paint Shop, Inkscape, MS-Paint, etc…). There are just two things to keep in mind: make the image 16x16 pixels and save as a .png image.

Alternatively you can search Google for a 16x16 pixel.png image that’s already finished. Just type in png icons and you should find a huge variety of ready-made icons.

How to change the default Blogger icon

1. First you need to convert your .png image into an .ico file (icon image). Go to the Dynamic-Drive website (there are others available as well) and use their online converter to upload you .png image and create your new .ico file (icon image). After the icon is created, download the new icon to your PC/laptop desktop.

2. Now that you have your new icon, you need to upload it to the internet. Unfortunately, Blogger will not let you host your own .ico file. Therefore you need to use Google Sites or some other option as your host. If you opt for Google Sites you can follow a recent blog post of mine entitled „How to Host Javascript Files for Your Blogger Blog for Free“. By following this link you will learn how to host your own files online for FREE. If you chose to host it at Google Sites, your icon URL should look something like this:

http://sites.google.com/site/YOUR_GOOGLE_SITE/PAGE1/YOURICON.ico

3. Paste the following code into your Blogger template just below the <HEAD> tag:

<!-- Favicon -->
<link href='http://sites.google.com/site/YOUR_GOOGLE_SITE/PAGE1/YOURICON.ico'
rel='shortcut icon'/>
<link href='http://sites.google.com/site/YOUR_GOOGLE_SITE/PAGE1/YOURICON.ico'/>
<!-- end Favicon –>

4. Save the changes

5. Visit your blog and you should see your new FAV icon at the top of your browser window.

IMPORTANT: Make sure to change both of the URLs to your own links from your Google Sites webpage. When you paste the code into your Blogger template, make sure that you have four individual lines of code. If the lines are broken you will see an error message in the Blogger editor.

That’s all!

Good luck!