Add Favicon To Blogger

A favicon (short for favorites icon), also known as a website icon, shortcut icon, url icon, or bookmark icon is a 16×16, 32×32 or 64×64 pixel square icon associated with a particular website or webpage. Blogger uses it's own favicon for every blog you create. But you can change it to any favicon you like.

Follow these steps to add a favicon to your Blogger or Blogspot blog.

 


Step 1 :

Use this site http://www.genfavicon.com/ to create favicons. It enables you to select a portion of the uploaded and create a favicon for the selected area. Set the size ( 16 x 16 ) capture, preview and download the favicon.ico file. Otherwise you can also do a Google search for free favion generators.


Step 2 :

Blogger won't let you upload .ico files. So you need to find some free image hosting service to use and of course that service should let you upload .ico files. Or you can use Google Sites which lets you upload .ico files. After you create a site in Google Sites just go to More Actions > Manage Site > Attachments and upload the .ico file. And your "Favicon URL" (url of your icon file) will be like SITE-URL/FAVICON.ICO

As an example the site url is https://sites.google.com/site/demo/

So the favicon url will be http://sites.google.com/site/demo/favicon.ico (Note: change https to http)

Save the "Favicon URL" in any test editor like notepad.


Step 3 :
 
Now log in to Blogger, go to Design / Layout > Edit HTML and tick the "Expand Widget Templates" checkbox.






Step 4 :

Now find (CTRL+F) this in the code:

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

And paste the following code just below/after it.

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

Change the FAVICON-URL with the url of your icon file and save the template.

Categories: web