Creating Your Own Favicon

Creating Your Own Favicon If you're trying to entice people return to your site from the Explorer's Favorites menu, it helps to prompt them with a special logo of some kind. If you're in Explorer right now and pull down that menu, you'll probably find some of those logos lined up next to the selections in the Channels item. For very little effort, you can have the same thing next to your own site's name.

This little icon is called a "favicon", and it works only in Explorer 5 and above. If your visitors are running Netscape or an older version of Explorer, the browser will just ignore your little icon.

When an Explorer 5 user bookmarks your page, Explorer searches for a special icon with the name "favicon.ico". If it finds one, it replaces the default Microsoft icon with your special little icon next to your name in the favorites menu and in the location bar. The user can also put your icon on the desktop and the taskbar, though few are likely to bother.

The icon you create has to be exactly 16 pixels by 16 pixels. There are some alternative larger sizes, but only use these if you've investigated favicon use very thoroughly. The safest route is definitely 16x16. Try to fool the browser with a larger or smaller size and it will usually ignore you. You should also stick with 16 Windows colors. Again, more colors can be used in sophisticated icons, but 16 is your safest bet.

There are two routes to creating your icon. You can take an existing graphic, maybe a BMP or a GIF, and convert it using graphics software. Unfortunately, some icon converters don't do a good job of transforming bitmaps into .ico files.

The alternative is to use a dedicated icon editor. There's one included in Mocrosoft Visual Studio, and an online Java editor you can try at www.favicon.com. In the long run, you'll probably find it faster to use an icon editor to create your graphic from scratch, rather than converting an existing graphic and ironing out the inevitable bugs.

When you save the .ico, name it "favicon.ico". That's the default icon that Explorer looks for. If you want other pages to have different icons, you can do that too. Name each icon differently, but make sure they all have .ico extensions.

To have Explorer pick up the default favicon.ico, copy it into the root directory - the main directory that holds your HTML pages. If all you want is favicon.ico to be associated with your site, you're done. Every time a visitor bookmark your site with Explorer, favicon.ico is copied to the visitor's cache, where it waits to be displayed. You don't even need to alter your HTML.

However, there are some other tricks you might want to play. If you want a different icon associated with special pages, use the LINK tag on those pages like this:

When visitors bookmark this page, instead of favicon.ico they'll get mypage.ico. You can direct the browser to any absolute location you want using:

Of course, there are weirdnesses to take into account. If you test the favicon on your own site, you may get only one shot at it. Once a site is bookmarked, it's hard to flush out that listing completely. Even if you delete the pages from your cache, delete the listings from the Favorites menu, and reboot, re-bookmarking a previously bookmarked site may not cause the new icon to "take". If this happens, enlist the help of somebody who hasn't previously bookmarked your page.

One other potential snag is that some Web hosts don't support .ico files. If you use one of these, contact the company and politely ask them to start supporting .ico files.

If you follow these guidelines you should find it all relatively straightforward. The only time-consuming parts are getting used to an icon editor and then creating your icon or fixing the problems with your converted graphic. For relatively little effort, you too can give your site that customized cutting-edge look in IE5.

I hope this came in useful!

Creating Your Own Favicon
You crave attention but lack distinction? Consider using a personalized favicon to draw people to your website from Internet Explorers Favorites menu.
What Is FAVICON
What is favicon (or the Icon in general)? It is the little thing you see on your Location bar (History/Address bar) when you visit a web site, on the left of http://. For example, if you view a site through Internet Explorer, you see an e superimposed over a blank white paper sheet. The icon also...
50 Surefire Web Design Tips
Tips to brand your website:
Creating Personal Web Sites
This is a two-part article about creating a web site on the web and the tools that you need to do that.
Search Engine Optimization (SEO) - Fix Your OffPage!
Search Engine Optimization (SEO) is something you should be aware of before creating a site. Make sure youve done careful researches on the best keywords to use. Using the wrong keywords would eliminate your site from search engines forever!...
Banner Advertising
Everyone is using them now and if youre planning on creating your own banner ad then there are some things that you should know.
Creating Alerts
A simple guide to using alerts (and annoying your visitors)
Chasing The Spider - Simple RSS Tactics That Can Give Your Site The Edge
The advent of RSS brought a better way for moving content around the web. It may have simultaneously also introduced the best means of chasing the spiders.
Banner Rotation Using PHP
Creating a simple ad-rotator, the ads are stored in a text file and picked randomly by this PHP code. Most of the webmaster use banner ads, we will be creating a very simple banner rotator, which picks up randomly one ad from the banner file and displays it, this file can be called in any other page...
9 Steps To Generating Traffic
The one nagging question that is on every new webmasters mind is how do I get traffic to my website? The truth is that unless youre going to spend a lot of money advertising youre going to need to work creating quality content and tracking every stat.