Follow Us on FacebookFollow Us on TwitterRSS Subscribe Follow Us on YouTube

November 7, 2012

How to add a Custom Favicon in Blogger

<img src="bloggerfavicon.jpg" alt="blogger favicon">

This tutorial will show you how to add a custom favicon to your site in Blogger. The word favicon is short for favorite icon and unless you have already customized yours, you will see the above orange and white Blogger logo in the tab on your web browser. That is where the favicon is located. You will also a sites favicon if you add it to your browser bookmarks or if you drag and drop the web address to your desktop.

By adding a favicon to your blog you are doing three things:

1.) Making your website easy to remember
2.) Making your website look professional
3.) Branding your website

You of course need to have an image designed or edited and sized to 16x16 pixels.
Most favicons end in the ICO extension. If you have a GIF, JPG or PNG image, you can use these also but I believe they look more professional in the ICO format. You can use these generators to change the extension to ICO:      or

After you have your image picked out and sized, follow the steps below to complete the task.

How to Upload the favicon in the Layouts section of your Dashboard

Blogger suggests you use a square image that is less than 100kb.

In your Dashboard go to Layouts. In the top left you will see the Favicon box and the Blogger Icon. Click on the word Edit.

<img src="bloggerdashboard.jpg" alt="Add Favicon in Blogger">

A new window will open like the one below. Click on Choose File and locate the favicon on your computer and double click it or select open. Then click Save.

<img src="bloggerdashboard.jpg" alt="Add Favicon in Blogger">

If you have any questions or need help on Option 1, please contact me.