Add Favicon in Blogger and Wordpress

Thursday, April 28, 2011

Have you ever wondered how some sites add those little custom graphics to the address bar, at the top of the browser? For example, Google adds the letter G, and Adobe adds its logo. You too can add any image to your site - you just have to get it in the right format.
Fortunately, turning a graphic into a favicon (or shortcut icon) is easy and free with Favicon from Pics (www.htmlkit.com/services/favicon). Just upload any graphic of your own, and this online tools automatically converts it into a favicon that you can use on your site. After your image is saved in the ICO format, you simply upload it to the main root folder of your Web site, and your image is automatically displayed on the address bar in a browser.
Favicons also appear in the list of bookmarks, or favorites (which is where the name comes from) when a visitor saves your Web sites in a browser. Thus, including a favicon can make your site stand out from a list of saved Web addresses and can help build and strengten your brand.
Sample of a favicon site : http://www.rnvmarketing.blogspot.com , you will able to see a favicon with greem leaf display, that my favicon ;D

If you are using Blogger.com, follow the below steps
  • Choose an image that you need to use as favicon, resize it to 16 x 16 pixels.
  • Upload the image to image hosting website, you must open and register an account with them. Personally I'm using imageshack.com or photobucket.com to hosting my image.
  • After uploaded the image, copy down the image URL.
  • Now go to blogger.com and log in your account, click Design and select Edit HTML and search for "title" , this should be inside the header tags.You should find something like mentioned below.
<title><data:blog.pageTitle/></title>
  • Just after that line add the following line and enjoy the nice icon showing up before your url.
    <link href='your url' rel='shortcut icon' type='image/x-icon'/>
    Change your url to the URL copied from the image hosting site.
  • Click Save and you will be able to view your website with a nice looking favicon.
If you are using Wordpress.com, follow the below steps
  • Wordpress.com will be mush more easy and straight forward, just go into your dashboard. Select Setting and Click General.
  • At the right hand side there is Blog Picture / Icon, that's the favicon, just upload and adjust the image and click Save, you have done the setting for the favicon


Exabytes - Your Excellent Hosting Partner!

No comments:

Post a Comment