How to Add Favicon in Blogger

add favicon to bloggerToday we will learn how to add favicon to blogger. "Favicon" is the short name for favorites icon, also known as a website icon and is a recognition tool for your readers to identify your blog. Browsers displays it within address bar and/or next to the blog and pages' name or in the list of saved bookmarks. For blogs on blogger platform, you will see blogger's default orange favicon. This can be overridden with your own favicon.

To add favicon in blogger, make yourself a blog logo image in "16x16" or "32x32" pixels in ".png", ".gif", or ".ico" format. Upload it in any image hosting site and get it's direct URL.

Go to Design > Edit HTML and add the below code after <head>:

<link rel="shortcut icon" type="image/x-icon" href="http://image URL"/>

Replace the image URL with your hosted image and save your template. Now view your blog, you will find out that the default favicon of blogger is replaced by yours custom favicon.

Displaying Custom Blogger Favicon in Internet Explorer

Some of you may have experienced that IE (Internet Explorer) is not showing your custom favicon in blogger blogs. IE basically will not display favicons that are in PNG or GIF formats. To view your blog's favicon in Internet Explorer, make an image in ICON (.ico) format. Upload it to an image hosting service and copy it's URL to your clipboard.

Go to Design > Edit HTML and add the following codes before </head>:

<link href='http://image URL' rel='shortcut icon' type='image/x-icon'/>

<link href='http://image URL' rel='icon' type='image/x-icon'/>

Don't forget to replace image URL with the URL of your icon file.

A nice free service is Iconj. It not only helps you to create a favicon in icon file format but also allows you to host your icon file.

Popular posts from this blog

Add Google Web Fonts to Blogger

How to Add Extra Gadget/Widget Section to Blogger Header

Add Open Graph Protocol Meta Tags to Blogger