How to Add or Change Favicon on Blogger blog? ~ Daily Blogger Tricks

I know you already notice it or maybe you just ignoring it, for some they maybe amuse because some are static and some are dynamic. I am talking about favicon, what is it? Whether you are using firefox, IE or Opera and when you try surf from diffrent blogs and sites you will notice the icon on the tab beside the blog's name. Favicon (Favorite Icon) is a small icon/picture (usually 16px x 16px in size) shown beside site URL (Universal Resource Locator) in the address bar. In Blogger for example you can see the default orange colored icon for each and every new blogger blog. This is the main reason why most bloggers want to change it immediately because they want to have their own identity. Well, just like me I changed it for simple reason I want to have my own unique favicon that you can't be found in other blogs. This tutorial will guide you to have your own identity through your very own favicon.

Update: Recently, Blogger has a new feature which allows you to change your blog's favicon without HTML coding (manual adding of codes)

How to Add Favicon on Blogger blog?

Log in to your Blogger's Dashboard
Go to the Layout
Click on the favicon Edit link usually present at the top left corner.

Now hit "Choose File" button.

Browse for your own image(should be less than 100 KB) and select it.
Blogger will automatically re-size it,and finally hit the "Save" button.

Check your brand new blog with a customized favicon of your choice beside your blog's name. If you can't see the favicon, delete browsers cookies and caches then refresh your blog.

Other Way to Change Favicon on Blogger Blog

Here is another simple way to change your blog's favicon.

Go to Blogger Template the hit the Edit Html Button

There find the title tag which looks like

<title><data:blog.pageTitle/></title>

<link rel="shortcut icon" href="URL of your icon file"/>

Don't forget to replace the URL of your icon file with your own icon file's URL

Your new favicon should start appearing in some time.

Well, some blogger, have been facing some trouble with their favicons because Blogger wouldn't show them at all or wouldn't update them to the new one.

If the favicon on your Blogger blog does not update, make sure you clear all history from web browser and then check for it.

OR
If you changed your favicon on the Layout section of your blog or used the HTML code and it doesn't work or doesn't show the right favicon, just do the following steps:

Step 1: On the address bar, type http://[your blog url]/favicon.ico and press Enter.
Step 2: Refresh the page.
Step 3: Go back to your blog.

Manual method of Adding Favicon to Blogger blog

First, Always remember to backup your Blogger template because we are dealing with HTML code: Click on ‘Layout’ > ‘Edit HTML’ and then click on ‘download full template’ to save it on your computer. Now perform following steps to a change favicon in your Blogger blog:

1. Click on ‘Layout’ > ‘Edit HTML’
2. Then add following code after <head>

<link href=’http://www.URL.com/favicon.ico’ rel=’shortcut icon’/>
<link href=’http://www.URL.com/favicon.ico’ rel=’icon’/>

Above http://www.URL.com is the web address or location where your favicon is stored (hosted).

‘favicon.ico’ is the name of your favicon file. You can use any name like myfavicon.ico and so on. After adding above code, update the http://www.URL.com and favicon.ico in the code. Then click on save template button. Open your blog and your new favicon should be visible in the address bar.

How to add an animated favicon in Blogger - Awesome

Step 1. Log in to your Blogger account > Template > Edit HTML (if needed, click on Proceed button)

Step 2. Search (CTRL + F) for:

<b:skin>

Step 3. Paste this code just above it:

<link href="your-favicon-links-goes-here" rel="icon" type="image/gif"/>

See the screenshot for more details

Note: replace your-favicon-links-goes-here with your favicon's link location

You can choose from here some cool favicons for your site/blog: http://www.favicon.cc/ (just download the favicon you like - upload it on tinypic or on a blogger's post, then copy the link address/direct link)

Step 4. Save the Template. And that's it! see favicon on the left side.

How things going on? Did you get it?

I encourage you to follow the first tutorial because it is the simplest and the easy steps to implement favicon in blog. Blogger really doing their best to make it a lot easier for us to experience blogging at full potential - Ad Majorem Dei Gloriam