System Tools

Favicon

What is a favicon ?



"A favicon /ˈfævɪkɒn/ (short for Favorite icon), also known as a shortcut icon, Website 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."

            Wikipedia excerpt

File Format


This file is generally a bitmap format (BMP) with 256 colors and ended by a .ICO extension. The bitmap size is 16x16 or 32x32 pixels. This format is very common and will be compatible even with old browsers.

However, you can use recent image format as PNG, JPEG or GIF (with animation). Pixel size of the icon can be 16x16, 32x32, 48x48 and 64x64.

It's highly recommended to create a transparent background for the icon. You'll avoid displaying the image inside a white square.

Delcare the icon in the HTML code


Firstly, you have to place you favicon file in the root directory of your website.
Then, insert the following code between <HEAD> and </HEAD> tags.

If your are using a .ICO file format, please use this code :
<link rel="shortcut icon" href="/favicon.ico" />

If your are using a classic file format, please use this code :
<link rel="icon" type="image/png" href="/logo.png" />
 

Favicon File Edition


There is a lot of tools to create or modify that type of image. My advice is to use an on-line tool.
You just have to upload you file (even if the size is not the right one).
It will be automatically re-sized. Then you'll be able to change colors, make the background transparent and see the result in live and export it in the wished format.

Here is a good editor :

Favicon.cc
- Image Import 
- Transparent background
- Animation 
- A wide range of colors 
- Preview mode 
 
Some other comparable tools :
Favicon HTMLKit
Favicon Generator
 
               
 
 

You have no rights to post comments

Select your language :

Newsletter

Contact