Tuesday, April 10, 2012

What are Favicons?

A favicon (short for favourites icon), also known as a shortcut icon, Web site icon, URL icon, or bookmark icon, is a file containing one or more small icons, most commonly 16×16 pixels, associated with a particular Web site or Web page. A web designer can create such an icon and install it into a Web site (or Web page) by several means, and graphical web browsers will then make use of it. Browsers that provide favicon support typically display a page's favicon in the browser's address bar and next to the page's name in a list of bookmarks. Browsers that support a tabbed document interface typically show a page's favicon next to the page's title on the tab, and site-specific browsers use the favicon as desktop icon.

We need to understand that all the old browsers and new browsers support the .icon image format for adding a favicon to the website. Formats like .png, .gif and .jpeg may not be supported by old browsers like IE 6.

Simplest Way To Download Favicon From Website:

Step 1: Go to the target website. Lets say Blogger.com.

Step 2: Just enter /favicon.ico in front of that website's URL as shown below:


Click and check it out.

Step 3: Right click on the favicon and save the image to your hard disk.
As easy as that :-)

UPDATE:
What if the file is not in the root directory of the website?
This indicates that the file is placed somewhere else on the webserver and they have linked the image.
EG:

Then what to do?
Step 1: Go to the target site.

Step 2: View the page source (Right click on the page and click on "View Page source".)

Step 3: Search(Ctrl+F) for "shortcut icon"

Step 4: You should see something like this:
Eg:
<link rel="shortcut icon" href="http://www.sitename.com/images/favicon.ico"/>

Step 5: Right click on the link http://www.sitename.com/images/favicon.ico and save the icon.
You can copy the link if it doesn't allow you to right click and save. Open a new tab in your browser and go to the target favicon image to save it.

NOTE:
The favicon may be placed in any directory with any name for the image.
Exampls:
http://www.sitename.com/images/logo/sitename.ico
http://www.sitename.com/ximgs/myname.ico