Wednesday, November 20, 2013

What is Favicons ?

What are favicons?

 

Favicons are small 16x16 icon files that are displayed next to the URL of your site in a browser's address bar. Additionally they're often displayed next to the name of your site in a user's list of open tabs and bookmark listings making it easier for the user to quickly identify amongst other sites.

 

Internet Explorer ("IE") 5.0 and above has a facility where, if someone bookmarks your website (ie puts it in their "Favorites" menu), it associates a particular icon with your website in the bookmark. It tries to obtain that icon by first requesting for "favicon.ico" from the directory of your web page. If it cannot find such a file, it will try to obtain it from the root directory of your website, failing which, it will simply use a default icon for the bookmark.

On the other hand, the favicon.ico file is available, the icon will also be displayed beside your website name in the "Favorites" menu, the location bar in IE, and if the user opens up the "Favorites" folder, it will be the icon used for the link to your site.

Opera and Firefox also have the ability to use the favicon.ico file. In fact, Firefox also accepts the file in other graphics formats, such as the PNG format. These browsers display the "favicon.ico" in the location bar of the browser (the part that shows your website's address or URL). Safari, both the Mac OS X and the Windows versions, also loads the favicon.ico file into the address bar if available.

How to create favicon for your site?

Although many modern web browsers support favicons saved as GIFs, PNGs or other popular file formats all versions of Internet Explorer still require favicons to be saved as ICO files (a Microsoft icon format).There are online tool provides an easy way to convert any GIF, PNG or JPEG to ICO which is supported by all modern web browsers.

http://coolweb.info/

Visit : Free Favicon Generator

 

Or you can create it manually...on your image editor.

  1. Create an image 16X16 pixels in size. Yes, it is really small and you can't really draw much in it. You should also restrict yourself to the standard Windows 16 colours, although I suspect that 256 colours will work fine.
    If you like, you can also create a 32X32 pixel icon, which will be scaled to size for the Favorites menu and the location bar. You can even put both 16X16 and 32X32 pixel icons into the same icon file. Windows will use the former for its menus and the latter when the user opens up a folder that is set to display large icons. It's probably not really necessary to do this if you can't be bothered.
  2. Save the image as an ICO file (named "favicon.ico", of course).
  3. Upload it to your website. You don't need to upload one to every directory of your site if you don't want to waste space - simply put it in your root directory and the web browsers that support favicons will apparently locate it eventually. You can also upload it into your images directory, but you will need to modify your web pages if you do. See later in this article for more information on this.

 

Using a favicon

After generating a favicon with this tool download and save to the root directory of your site. Then include the following code in the head of your HTML document.
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">

No comments:

Post a Comment