Tutorial : How to add a Favicon in Blogger

What is a Favicon?

A Favicon is a small square icon (most commonly 16x16 pixels) associated with a website. For example, Blogger’s Favicon is a white B on an orange background. If you don’t add your own Favicon, your blog’s Favicon will be the default Blogger Favicon.

In most browsers that provide Favicon support (like Firefox, Internet Explorer or Safari), the Favicons will show in the browser’s address bar, next to the page’s name if you have several tabs open, and next to the website’s name in a list of bookmarks.

Note : If you use Internet Explorer 6 or older, your favicon will not appear unless you have bookmarked your blog.

Why use a Favicon?

A Favicon is a small detail, but it plays a role in building your brand and it brings uniqueness to your blog. We often notice the images before the text, and Favicons thus make the process of identifying a website easier. If your visitors have many open tabs or are looking for your blog in their list of bookmarks, it will be far more easier for them to find your blog at its Favicon. Favicons provide a visual identification to the website they represent, and thus improve the recognition and recall – exactly what branding is about.

I bet you can recognize these websites at their Favicons – if you can, then you understand how a tiny icon can portray a brand.

{ from left to right : Wikipedia, Google, Youtube, Apple, Twitter and Amazon }

Plus it's super easy and quick to make a Favicon and upload it !

How do I create a Favicon?

As the purpose of your Favicon is to make your blog easily recognizable, the image needs to be something that represents your blog. Use colors that match your blog template, or use the first letter of your blog’s name, or use your logo if you have one. Whatever you decide to use, remember the Favicon is super small, so make sure it’s clear and simple.

There are several ways to create a favicon, but I think the easiest is to use a Favicons generator, like http://www.favicon.cc/

You can either create a new icon, or upload an image, or use a premade icon.

To create an icon, click on “Create New Favicon”, pick a color (on the right) and create your icon by filling the yellow square area with your choice of colors and design.

While you are working on your icon, you can preview what it will look like. For example, I “created” a white square on a blue background.
 

When you're done, download your icon.

You can also upload your own image, and http://www.favicon.cc will change it into an icon.

For example, I uploaded an image of a flower.

You can also edit the Favicon created from the image you uploaded, and preview the result in the address bar.

When you're happy with the result, download your icon and save it on your computer.

You can also use a premade Favicon. You can find some here or here or on many other websites - a Google search will give you plenty results of free Favicons to choose from.

Adding your Favicon in Blogger

1. You now have a .ico file, but you need it to be .jpg or .png

Go to a free online image converter (like http://www.converthub.com), upload your icon, convert it into a .png or .jpg file, and download the converted file.

2. Upload your icon to Photobucket. It should work with Flickr as well, but it tends to work better with Photobucket. Copy the direct link and save it for later. 

3. In your blogger account, go to Design / Edit Html

Don't be afraid - it's super easy!  

4. Using you browser’s search function, find the closing </head> tag in your template. 
 

Right before the </head>, paste the following section of code, substituting “YourFaviconURL” by the URL where your favicon is hosted (we found this URL in step 2).

<link href='YOUR-FAVICON-URL' rel='shortcut icon'/> <link href='YOUR-FAVICON-URL' rel='icon'/>  

Remember to add this code immediately before the </head> and not earlier in the template. 

5. Now save your template. You're done! Try to view your blog – you should see your favicon appear in the address bar!  

Note : Unfortunately, in the Blogger’s feed and the Blogger’s “Blog List” gadget, the default Blogger favicon will appear, and not your custom favicon.  

I hope this was clear, and I hope you’ll try it to see how easy it is! If you have any technical problem, leave a comment and I’ll try my best to help you. 

Author : Clemence Herbillon - galejade