How to Make a Favicon for Your Blogger Blog

I decided to add a cute little favicon to my web page. As with the other HTML aspects I have added to my page it took more than a few tries to get it right. I decided it was time to write another HTML lesson to help you guys out if you've been wanting to add a favicon but didn't know how to. Having a favicon for your blog isn't just cute. It will definetly make your blog stand out among others. A lot of people don't have them and don't know how to put one on their page. This is good for us because our sites will stand out in a list of bookmarked sites. It will also help to keep 404 errors out of your log because the favicon can't be found.

I've found that there is a problem if you are using Blogger though. There is no way to upload files and images in Blogger. To solve this problem you will need to make a free webpage in order to have somewhere to upload your files to. I like to use Bravenet web hosting. I just set up my free website with the same name as my blog. This is very useful because now you can make additional pages to link to from your blog if you ever need them and you can upload images and files that you need but are unable to upload to Bogger. Once you register your new site you do not have to actually set up the webpage since you are only using this new site for storage.

In order to make your favicon the first thing you need to do is get yoursef an image. There are a few different ways to do this. A favicon is a 16x16 image. You can crop a tiny piece of an image using Photobucket or Flickr or you can go to, http://www.favicon.co.uk/gallery.php and save one of the favicons featured on the site. You can also use an image no larger than 150px or a small icon. Another option is to download a free icon maker program from cnet.com. Once you have your image go to http://tools.dynamicdrive.com/favicon/ and upload whatever image you want to use as your favicon. Once you click on "create" you will need to download your image to your computer. It will be saved as a .ico file.

Now you will need to use your new free webpage that you set up. Log into bravehost.com and click on the name of your website located under "free website" in the "Web Hosting Section." Next you will click on, "File Manager." Click on, "Upload File" and find the favicon image that you saved to your computer as a .ico type file. Once the file is uploaded simply copy the url where it is located by right clicking the file name and saving the shortcut.

Here is the HTML code for your favicon: 

<link href='icon file url ' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

You will need to insert the URL to your favicon that you just copied into the code above between the two ' ' where it says 'icon file url'

Next you need to put the code into the html of your blog. You need to look around the top of the code in the head section and find where your title is located. It will look something like this: <title><data:blog.pagetitle/></title>

Insert your favicon code after the </title> code.

After you save your file it may take a few minutes for the favicon code to take effect. That's it - now you have your very own cute, custom little favicon for your blog.