Installing a FavIcon to your Blogger Blog isn’t difficult, just a bit tricky. The reason for the "tricky" nature of deploying a FavIcon on a Blogger blog is because you don’t have direct access to the files or directory structure. 

There are a number of sites out there giving a good way to perform this task, they utilize Google Pages to hold the favicon externally.  Unfortunatly Google has decided to phase out Google Pages and is no longer taking new signups.  The good news is that they are replacing it with Google Sites.  This has rendered many tutorials out there obsolete.  Luckily you have come to the right place.  I will walk you through the process of hosting the favicon.ico file on this new offering by Google.

My earlier post on FavIcon Installation Basics spoke about using a FTP program (Filezilla) to place the favicon.ico file into the root directory of your hosting server.    Well, this option is not available to you. Actually if coded properly you don’t even need to have your favicon.ico file located on your server.  You could actually have it located somewhere else on the internet. 

Do you remember this bit of code?

 —  —  —  —  — Start Code Example —  —  —  —  —  – 

<link rel=”icon” href=”http://yourwebsite/favicon.ico” type=”image/x-icon” /> <link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon” />

 —  —  —  —  — End Code Example —  —  —  —  —  — 

Please take notice of the part in red.  It is actually a web address using the href= code.  Sure the favicon.ico file is on your server, but it doesn’t have to be.  href= can point to any webserver anywhere.  This is the first part of our Blogger.com favicon deployment.

So because Blogger.com won’t let you store files on the server, you will need to put your favicon.ico file on a server somewhere in cyberspace and point to it.  There are a number of ways you can do this, but the easiest is already at hand.  Because you are using Blogger.com you already have access to the many applications that Google has to offer.

Using Google Sites – 

As mentioned earlier you cannot use Google Pages anymore.  I even tried uploading my favicon.ico file there, and it did NOT work for me.  So On to Google Sites!  Your first step is to register and get your free account at Google Sites.  You will then use this account to store your favicon.ico file. 

Just to remind you…the purpose of the Google Sites account is to have a place to put your favicon.ico file that you can point to from your Blogger.com template file. 

Once you have logged on to your Google Sites account you will need to create a new site.  Just click the button to create a new site.  Once you have done this the only required field is the Site Name, all others are optional.  When you type in the site name, note the web address that is created directly below.  You will need to remember this exact address, because it will be the location of your favicon.ico file once you have uploaded it. 

The address will look something like: http://sites.google.com/site/YOURSITE

Finish up by typing in the anti-spam code on the bottom of the page and click Create Site.

Now you are in the "homepage" of your Google Site.  The only thing we need to do is upload your favicon.ico file.  Click on Attachments and you will get a button to browse to your local favicon.ico file.  You will see the successful upload of the file.  Now your file is hosted.  You just need to understand the path to the file.  Google Sites places a /Home/ in the path, therefore pay attention.  I noticed that you can even test the location by typing in the full path into your web browser. 

Remember: the address of your favicon will be:  http://sites.google.com/site/YOURSITE/Home/favicon.ico

Back to your Blogger.com Account -

Now return to your Blogger.com account and log in.  Go to the Layout Tab and click on Edit HTML.

Next you need to locate the </head> tag in the Edit Template window.  This is the closing tag for the header, you will have to scroll way down in the window to find it.  Right before the </head> tag you need to insert the following lines of code:

<link href=’http://sites.google.com/site/YOURSITE/Home/favicon.ico’ rel=’shortcut icon’/>
<link href=’http://sites.google.com/site/YOURSITE/Home/favicon.ico’ rel=’icon’/>

Remember to replace the "YOURSITE" in the address above with your actual account URL as you saw when you checked the properties of your uploaded favicon.ico file in Google Sites. 

The most important part of this is to make sure you place your lines of code just before the closing of the header right before the </head> tag.  Some of the older tutorials say you can put it at the beginning, but this no longer works, because Blogger.com changed the format of their header code to install their own Blogger favicon.  You place the code at the very end, so the last thing the program sees is YOUR Favicon code and points to YOUR favicon.ico file. 

Finally just click save template and you are set.  Remember from the other tutorials on FavIconBlog.com that your custom Favicon may not show up right away.  You may need to refresh your browser or possibly clear your cache before it appears.  Do remember that if you change your Blogger.com template you will need to re-insert your favicon code to the new header area.  Also if you ever want to change your favicon you can just delete and upload a new file to your Google Site (no change necessary to your Blogger Template).

One final note:  Some people use favicons with a .png or .jpg extension.  I have found this practice to be questionable at best.  Sometimes it works just fine, and other times it doesn’t.  I have heard reports that the latest version of Internet Explorer will only understand .ico files.  So to be safe, I would stick with the "old school"  favicon.ico file name.  If your file has a .png extension you can just rename it with the .ico extension.

Summary -

So to summarize, this tutorial discussed the concept of pointing to a favicon.ico file located outside your hosting server.  We then utilized Google Sites to upload and store your favicon.ico file.  Finally we placed the correct code into your Blogger.com template in order to point to your favicon.ico file. 

I hope you found this tutorial helpful, please leave some feedback on how this worked for you, or any tips you may have found.  Now go on to the FavIcon Generator and create your own Custom FavIcon.

-Loren

P.S. Just to prove to everyone that I did all the work in this tutorial, and it actually works, you can see my Custom Favicon test here:  http://lorensblog-loren.blogspot.com/