How to Create a Favicon for Blogger

A Customising Blogger tutorial; Editing the Favicon.

I recently followed a guide for this but it was frustratingly long winded with, this is the only guide you will need.

Step 1. What is a favicon?

If you didn't know what a favicon is then I don't know why you were searching for it. But just to humor you I will briefly outline what one is, you can skip to the next step if you already know.

If you have ever wondered what that little icon was for in the address bar or the little image next to the URL, that is a favicon. A little image that you probably use to help you visually differentiate between your (if you're like me) millions of currently open tabs in your browser. That's all it is. 

Why change it?

Professionalism;

You should change your favicon so that your website better matches your business branding. You might think it's a tiny change but your customers will be left with a more complete feeling website.

Remove another companies branding;

This is the reason I change my favicon. There are alot of websites based on blogger at the moment and you would be able to spot them quickly if they didn't change their favicon. Leading back to professionalism.

Step 2. Getting Started

Creating favicons for Blogger is easy and can be done in minutes.

The hard part has always been trying to map your logo or symbol into small and perfectly square dimensions.

What we will need:

A paint program

Iconifier (icon conversion online)

Tip: keep your design simple. It will be tiny.

Step 3: Draw Your Favicon Template

Your image size should be 144x144 pixels. Below should be a sample image that you can save and open in any image editor. You can delete the entire image if you like or just alter it. Its the dimensions 144x144 that are the most important. perfectly square. 

Why 144x144? I don't care. You can google that later.

save this image and open in a paint program for an instantly sized image.




Do what you like with it. The image above shows a 'y' on the square. Like i said the size 144x144 is the only thing you need to get exact for an .ico file.

Save you icon as a .png

Tip: you can probably save to other formats but png is the only format that keeps any transparency if you have used it.

Step 3: Converting Your Blogger Favicon Template

This will convert it to a 16x16 pixel image.

Use Iconifier.

All you need to do is select your image and press the 'Iconify' button like this:





After a few seconds plenty of file sizes will be created for you:



Look for 'favicon.ico' - this will be the one you'll use for blogger. 

You can either right-click and download (Save Image As...) the zip file with all icons or just right-click the one I've circled and save it to your system.

Step 4: Installing the Favicon into Blogger

Nearly done. Add your downloaded file, 'favicon.ico', to Blogger. Use the Blogger main menu. Go to your Blogger Layout menu item and find the Favicon gadget in the layout:





Select 'Edit' > 'Choose File' button to find the downloaded 'favicon.ico' and then press 'Save'

The favicon is now added to your Blogger blog.

Don't worry - you can modify this any time.






Much more professional don't you think?