Add a Favorites Icon to Your Website

What is Favorites Icon or FavIcon? Favorites icon is also referred as Shortcut icon, Website icon or Bookmark icon. It's an icon associates with the blog or website to represent the site. You may have seen this icon respective to blogs or websites on your browser tab, address bar or when you bookmark a website on your web browser. It is another way of showing off identity of the website. Seems interesting? If you don't have a favorites icon for your blog or website, you can add your own favicon to your website in few simple steps. Wanna try it out?

Initially, you will see a default favorite icon for your blog or website. But as a webmaster, that's not you wanna show off for your visitors. isn't it? You would like to show your own favorites icon representing your site for people who view or bookmark your site. However your favorites icon should not bound to web browsers used in computers and you can show it off at mobile browsers too. Here you can learn how to implement a favorite icon to be displayed on almost all browsers.


Before You Go:

If you are a Blogger user, you can easily add favorites icon for your blog without editing your template. Read Easily Customize Your Favorites Icon in Blogger.

Steps:

1. First of all you may need an Icon to be used as a FavIcon. You can use icon which you might have already in your Hard Drive or you can generate FavIcon from Genfavicon.

2. Upload your icon to a free hosting enabled site like Google Site or Photo hosting site like Picasa and copy link/URL of uploaded icon.

3. Now search your template for </head> tag.

Note: If you are a Blogger user and don't know how to edit your template, read How to Edit Your Blogger Template.

4. Copy and paste following code just above </head> tag.

<link href='[Link/URL of Icon]' rel='shortcut icon'/>
<link href='[Link/URL of Icon]' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
<link href='[Link/URL of Icon]' rel='icon'/>
<link href='[Link/URL of Icon]' rel='icon' type='image/vnd.microsoft.icon'/>

Color Indication Information

   - URL of Icon

Add URL of your favorites icon here.


5. Now save your template.

Note: It may doesn't display your favorites icon, right after implementation of code. Try refreshing of your website/blog or clearing cache of your Web Browser.

Enjoy :-)