Favicon - Branding A Favorites Link
Published: Monday, February 23, 2004
What is a favicon?
Favicon (also known as a shortcut icon or favorites icon) is a small Windows icon image file that is displayed next to a website shortcut or next to the website address in Internet Explorer 5 or later, Netscape 7 or later and Opera 7 or later versions. Favicon allows a website shortcut stored in favorites menu or links menu to standout from the rest of the websites on a user's computer by showing a logo next to the link.
How to create a favicon?
A favicon can be created from an existing image or it can be created from scratch using an icon editor. The image size of the favicon has to be exactly 16x16 pixels. The name of the image file has to end with .ico extension. The default name of the icon file is favicon.ico, however, the file can be named anything else as well.
Renaming an existing image file (.jpg or .gif) to favicon.ico will not serve as a windows icon file. The icon file has to be created using an icon editor or similar tool. However, an existing image file can be used as a starting point for creating the icon image. Among the few free icon editors available, PixelToolbox from AxiomX is one of the best. Start with a windows icon image of 16x16 pixel size. The tool editor has a lot of formatting choices. It can also import an existing image of bmp, jpg, png, tga or tif formats. The output is a windows icon with an extension of .ico.
Associate a favicon to a webpage
After creating the icon, you must associate it with your Web page. One way is to save the icon with the default file name of favicon.ico in the root directory of your domain — for example, http://www.websitegear.com/favicon.ico. Each time your web page is added to a user's favorites, the browser automatically searches for this file and places the icon next to all the favorites and quick links originating from your site.
If you choose to name the icon file other than the default or have multiple icons for different portions of your website, you can also associate the icon with your Web page by saving the icon with a file name other than favicon.ico and adding a line of HTML code in the head section of your Web document. The line of code includes a link tag that specifies the location and name of the file. You can include this link tag on a per-page basis.
<head>
<link rel="shortcut icon"
href="http://www.domain.com/iconfile.ico">
</head>
Add a favorites link to a webpage
The favicon appears on a user's browser when the user adds the page to the favorites list, adds the page to the links list, or even drags the icon in the address bar of Internet Explorer outside and releases it. In all these events, the browser displays the favicon if one is available instead of the default IE icon.
You can display a link on your web page to allow the user to add it to the favorites menu by clicking on the link. Use the code below.
<script language="JavaScript" type="text/javascript"> function addBookmark() { if (document.all) { window.external.AddFavorite(location.href, document.title); }else if (window.sidebar){ window.sidebar.addPanel(document.title, location.href, "");} } </script> <a href="JavaScript:addBookmark();" onclick="addBookmark();">Add to your favorites</a>
|
