Seen those small images which appear on the address bar when you visit a site? Well, they are called as Favicons. I got the idea to write this post when Kiran asked me her doubt regarding the same. Here’s how you add a favicon for your site.

First decide on an image that you would like to display as your favicon. My site currently has the below image as the favicon.

Favicon_addressbar

Ok, so once you have the image that you want to be displayed on the address bar follow these steps :

1. Convert the image to ".ico " type. You can do this by visiting either of these sites,

favicongenerator.com

html-kit.com/favicon/ (If you need an animated favicon)

2. Upload the favicon to your own webspace or there are free image hosting services which allow you to upload images of type ".ico" like fileden .

3. Next, if you have a Blogger.com blog, follow the steps as below:

a. Go to Settings .

b. Click on Layout .

c. You will notice a tab ‘Edit HTML ‘

d. Find ‘</head> ‘ in the page that is displayed.

e. Add the following line before ‘</head>’  :

<link rel="shortcut icon" href="your-favicon-URL-here " type="image/x-icon" />

f. Preview to see if the favicon appears in the address bar.

4. If you have a wordpress.com hosted blog, then I don’t think you can change the favicon since wordpress.com users do not have access to the files needed to add the favicon.

You can now add favicons to wordpress.com blogs too. Learn how to add favicon to wordpress.com blogs.

5. For self hosted wordpress blogs, follow these steps :

a. Upload the favicon to either this path public_html/wp-content/themes/your-current-theme-name / or you can simply upload the favicon to any folder of your choice if you want to.

b. Login to your wordpress Admin account and click on ‘Design’ -> ‘Theme Editor ‘. On the right hand side you will see a list of files. Click on header.php

c. If you uploaded your favicon to the path( public_html/wp-content/themes/your-current-theme-name / ) as mentioned above then add the following line just before the ‘</head>’ tag

<link rel="shortcut icon" href="<?php bloginfo(’template_url’); ?>/your-image-name-here " type="image/x-icon" />

In the above code do remember to replace ‘your-image-name-here ‘ with the name of your favicon image (along with the ‘.ico ‘ extension)

Note: Before adding the tag as specified above, just make sure that there’s no similar tag in header.php file already. If it is, then delete it.

If you happen to have saved your favicon under some folder other than the one mentioned then add the following code instead of the one above

<link rel="shortcut icon" href="the-complete-icon-url-here " type="image/x-icon" />

d. Save the file and check if the changes are reflected.

That about sums it up. Hope you will now be able to add your own favicon to your blogs and sites. If you have problems or do not understand any point do leave a comment. I’m here to help you ;o)

Random Posts