What can you do to have a web site that attracts people to it? Having your web site designed in attractive colors, stylish and apt designs that speak about your business, easy and intuitive navigation between pages, fast loading of pages and an impressive logo are without doubt the main areas to focus on.
You can also make your web site stand out from the rest of the web sites that are in a web browser’s favourite list, by adding a small and attractive image to your web site’s URL. This image is called a favicon which is short for favorite icon, web address icon or bookmark icon.
Although most modern browsers support favicon, there are small differences in the way these browsers display a favicon. For example, Firefox 1+ (Mozilla-based) displays the favicon on the address bar and browser tab whereas Internet Explorer (7+ version) displays it on the Favorites menu as well.
How to Create a Favicon in Windows
There are two steps involved in making a favicon. 1) Designing the favicon and 2) Converting it to an icon resource file.
Designing the Favicon
- You can use any graphic program to design your favicon. However, do ensure that your graphic program is able to save files in PNG format.
- Create an image in 16X16 pixels size. This is the ideal size for most browsers. You can start by designing on a larger size and then reducing it to 16×16 pixels size. Limit your color to standard Windows 16 colors.
- Once your design is complete, save the file in PNG format (example, yourfavicon.png).
Convert to Icon File
- You now need to covert your PNG file to a Windows icon resource file. This means you will need to change your icon’s file extension from .png to .ico. Here’s a web site that can help you make the conversion
- Now copy your favicon graphic saved in PNG format to the same directory where you saved png2ico.
- Open an MS-DOS (Command Prompt) window to run the png2ico program.
- Navigate to the directory where you saved the png2ico program and your favicon file.
- At the command prompt, enter png2ico favicon.ico logo.png.
- Use png2ico’s color switch to keep the number of colors below 16.
- The resulting icon may be created against background colors. If you do not want your icon to appear inside a box, use binary transparency instead of solid background colors.
- Once the program is run, your favicon.ico file would be created in the same directory.
- Upload your favicon.ico file to the root web directory of your web site using an FTP software.
- You can also add the HTML code to your web pages between the <head></head> (x)HTML tags which will read as follows:
<link rel=”shortcut icon” href=http://www.yourwebsite.com/favicon.ico mce_href=”http://www.yourwebsite.com/favicon.ico”/>
Your browser may not immediately show the favicon you uploaded. If you are using Internet Explorer, don’t forget to bookmark your web site first. Only bookmarked web sites will display a favicon in Internet Explorer. If you have already bookmarked, remove the old bookmark and bookmark it again. You could also try cleaning your browser’s cache. Either of these actions usually helps.
Here’s a last piece of advice – Design a favicon based on your existing business logo. This gives it instant recognition from existing customers. Using a recognizable favicon also makes your web site more professional and with many people bookmarking thousands of web sites, it’s smart to have a distinct favicon that can give you a cutting edge by standing out among others.
