Uploading a custom favicon to Blogger (Updating my Blogger Template)

Blogger Buster Favicon

Back in June last year, the Blogger team enabled Blogger users to upload their own favicon to replace the default Blogger icon.

Initially favicons could only be uploaded if they had been converted into .ico format, though it's now possible to upload a square-shaped favicon in .png.gif or .jpg format as long as the file size is below 100kb.

I prefer to use this built-in feature instead of the methods I'd previously used to add favicons to my Blogger sites, particularly as the icon is hosted on the root of our domain (*.blogspot.com/favicon.ico or custom-domain.com/favicon.ico).

Since I have updated my icon as part of updating my Blogger template, I've documented my method (and troubleshooting) for others who are updating their Blogger templates.

Creating your favicon

To replace the default Blogger favicon with your own, you will need a square image (or favicon) which is at least 16x16px and under 100kb in size.

I opted for a 100x100px .png image of the Blogger Buster logo so that a larger version of my favicon is available for devices which support it.

How to upload your custom favicon to Blogger

Whether you are using an older "layouts" template or the updated Blogger interface, go to the Layout section of your Blogger dashboard which will display the "Page Elements" interface:

In the top left of the Page Elements section, you will see a section titled "Favicon" which displays a preview of the default Blogger favicon.

Click the "Edit" link in this section to bring up a window like this:

Click "Browse" and locate the image/favicon file on your computer. Once your file is uploaded, you'll see a preview of how your favicon will appear in the pop-up. Click "save" to replace the default icon with your own.

Can't see your new favicon?

Many bloggers using the built-in favicon upload have reported that they can't see their new icon appear in place of the default one.

Most find this problem is resolved by closing any browser tabs/windows in which your blog is displayed, clearing the browser cache and reloading the page (this happened when I first updated my own favicons).

I hope this documentation will have been useful for anyone wishing to update their Blogger site with a fresh new favicon. Feel free to leave your thoughts on this post in the comments section below.