How to add a Favicon.ico to your Blogger powered Website

If you have created a website that is powered by googles blogger interface and you have moved it from the blogspot domain to a custom domain you might want to remove the blogger favicon from the search tab.

Here are several tutorials showing the easiest way to do it.

First you might want to backup your existing template either do this using the export or copy and paste it to notepad, this also gives you a great way of searching the template for the correct place to add the new HTML.

Upload favicon to an external web host, such as your Picasa album (which is automatically created for you when you upload pictures to your Blogspot). you will only be able to upload the animated GIF file not the ICO file.

If you've uploaded your favicon to Picasa, then click on the uploaded image. Click on "Link to this photo" (currently on the right side of the screen). Under "Embed Image", check "Image Only (no link"). Copy the embedded image URL. This is the location (URL) of your favicon.

Visit your Blogger dashboard or Blogspot account. Click on "Layout", then "Edit HTML". You should now be presented with a screen allowing you to edit the HTML of your blog template.

Within the HTML, near the top, you should see:

[title][data:blog.pageTitle/][/title]

Immediately beneath that line of code, paste the following line

OR you can just use this line of code if the template wont save due to an XML error.

Replace this asterisk (URL) with the link for your favicon image on Picasa, you must make sure that the image sharing is set to public

Save your Blogger template, then click on "View Blog". If the favicon does not appear in your address bar, then try refreshing your browser. If you still do not see it, clear your browser's cache file and restart the browser. Renavigate to your blog.

Favicon Creator: Free from HTML Kit



Secondly you CAN host the favicon to a hosting website that will allow favicons, NOTE: neither of the main sites PenguinPic, Photobucket nor Imageshack do this one of the easiest ways to host it and get the HTML code is to use

http://www.iconj.com

They have an simple to use upload service that will generate the HTML code that you need to add to your blogger template

Finally you need to copy and paste the code that the website generated to the blogger template. The best place to add the code is directly after the code shown belows if you are using firefox you can use the CRTL + F to search it when found it will be highlighted green



or use the notepad copy and paste the entire code and search as normal

]]>

then paste the code surrounded by the comments that will allow you to find it more easily





EXAMPLE



When you save the template you will see that the favicon has changed from the default blogger for the one you created.

If you are using the old Blogger template instead of the New Blogger xml template,and paste the favicon codes immediately after this line of code:

<$BlogMetaData$>




If you are using your own Webserver

Is another cool site that will allow you to resize and create your favicon.jpg is http://www.genfavicon.com there you can then upload the resulting JPG to another hosting site if you choose to or your own web server root folder then insert this HTML to the head of your webpage

• 1

Read more tips from Owen Stephen Dawson