Monday, July 4, 2011

How To Add Or Change Favicon URL Address In Blogger


Hi all, have you ever notice when you come into other blog, there have an image next to the web address which is called “Favicon” means Favourit Icons. It is usually suppose to be “Blog icon” right, can we change the icon with our own image? How to change it? Today post I am going to share and tell you how to change blog icon with your own icon. Furthermore, this can make your Blog look professional and of course looks better than original Blog icon.
Actually, you can create the icon in many ways like using photoshop, using favicon generator, download any software like imagicon, Dynamicdrive site or even using Google page creator. The most important are these sites must be able to convert the image into “.ico” format, because most of them always use ico format. Moreover, the best size is to create 16x16 or 32x32.


All you have to do is to follow my simple steps below:

  • Firstly you must have or change image to .ico format or it is possible to have other image .png,.jpeg,.gif format as well. I use gif format.
  • To get any format above, you can use favicongenerator visit here http://www.favicongenerator.com.
  • Click at the Browse button to insert any image you want to use it.
  • Click at Generate Favicon button.
  • After the process is complete, click at "Click Here to Download your favicon".
  • Save into your hardisk
  • Next is you must upload your Favicon to free image hosting, I choose picasa because belong to google and support Blogspot as well (read article here how to upload photo in Picasa).
  • To get URL address (Note: make sure you set to public when you upload the image), simply click your image that you have been downloaded from favicon generator then on the right side tick “Image only (No Link)” and copy URL “embedded image” see screenshot below:



  • Then copy the URL address like below screenshot:

  • Now, Login to your blogger acccount
  • Choose Layout > Edit HTML  
  • Make sure you Download full template (Important Note: this is important in case of anything goes wrong).
  • You need to find the code:   <title><data:blog.pageTitle/></title> click Ctrl+F to find it.
  • Place the code below just after above code (change and paste code the URL address in the red color).
          <link href='YOUR URL ADDRESS' rel='shortcut icon'/>

  • Click "Save Template" button.
While you can see the Favicon in Mozilla Firefox, many have problems seeing the Favicon in Internet Explorer. This is a known problem and has been a sore point with many IE users. In some versions of IE, bookmarking the site will display the Favicon. This is not necessarily so in IE7 that we are using. In fact, when we bookmarked the highly popular search engine sites, their Favicons don't show in our IE bookmarks too although they show well in Firefox. Perhaps this is one more reason to download Mozilla Firefox if you have not already done so. Good luck see you on the next post. Happy Blogging

1 comment:

Related Posts Plugin for WordPress, Blogger...

Subscribe via email

SIGN UP now if you feel useful information as well as receive other site updates!