Creating Favicons

Gary L. Simmons

rev 11/07/03

webwonks.org/WebBuilding/Favicons.html

Home

Creating Favicons

Favicons are the little icons that appear in the "Location" text box that contains the URL of the site you are visiting. If you have the correct browser and version, you can see a spider icon in the location box of this web page. Look up on this page, see the little spider by my URL? That's one. Favicons will also appear by the names in your browsers Favorites or Bookmarks menu, hence the name, "favicon", or favorites icon.

Most likely you've seen them around and you thought to yourself, "Gee what a puss looking icon... how the heck did it get there?". Then most likely you thought to yourself, "My butt itches again". Then your mind wandered to sex, then to food then to sex again, then food, then sex and finally while munching a sandwich and fantasizing about Kristin Kreuk with a can of whip cream your busy little brain once again came around full circle and you thought to yourself, "How do I do that?" or "I bet I could

do a better icon" or "I bet I can get chicks if I had one of those thingys" or "What's with my itchy butt? Do I have a zit or a fungus or what going on down there?".

This tutorial will only address that first question, "How do I do that". You are left on your own to figure out the rest of your life. I can only do so much. OK OK OK damn it, maybe you should smear some Desenex on your butt. The rest of the advice you need is out of the scope of this tutorial... wait a sec... Criminy... itchy butts are IN the scope of this tutorial? You people always do this to me! Gadzooks I hate you all!!

Give me a minute... OK... This tutorial will take you through the process of creating your own favicon that will personally reflect your web site. From drawing the art to creating the icon to embedding it on your web page, we will walk through it all.

What you need:

...A web page... duh. You need to be the author of a web page. However if you have no idea what a favicon is or what it is for and you are only here because you are accidentally following a link in a google search or you are only 2 years old and wetting your pants while sucking on a rubber nipple being babysat by big sisters computer randomly hitting links and you don't author a web page then you should consider not reading any further. If you don't have a web site but are genuinely curious about favicons then I suppose you can stay but sit in the back. Unless you are an extremely light sleeper, try not to hit me with a spit wad or I will pay you a visit tonight.

...A browser capable of viewing favicons as well as an audience with browsers capable of viewing favicons. Most recent versions of modern browsers are capable of seeing favicons.
These include:
Internet Explorer 5 and above,
Safari any version,
Netscape 7 (or other recent Mozilla licenced spin off) or Opera 7 will display favicons not only in the URL text box and bookmarks menu but in the tabs also!

...A Graphics program that will create bitmapped graphics such as .bmp or .gif files. You can use the paint program that comes with Windows or AppleWorks, both typically ship bundled with the respective platforms. Both of these will produce excellent bitmapped graphics. There are lots of free graphics programs that will create bitmapped graphics. Visit Version Tracker, select your OS platform, and search for "ico" (without the quotes). I used AppleWorks paint to draw, and Fireworks MX to shrink to size.

...An icon creation program or any program that will save a file as an .ico file. An ico file is a Windows standard for icon files. You can find tons of freeware that will convert bitmapped files to ico files. Again, visit Version Tracker, select your OS platform, and search for "ico" without the quotes. I had very good results using GraphicConverter. Irfran View is a free Windows program that should suffice, if you know of a better one then please email me.

Check Tucows also for graphics and icon programs. You can also find free online favicon editors, do a google search.
Getting Started:

Favicons are 16 pixels wide by 16 pixels high and have 16 colors (4 bit graphics). To be meaningful and helpful as a favicon, you need to create a design that will be a logo for your site if you do not already have one. Some logos whittle down to a totally unrecognizable glob when displayed at 16X16 pixels so most likely you will need to experiment some. I chose a spider to represent "web building", the name of this grouping of tutorials. Trust me, I had to go through a LOT of spider designs before I found one that looked good at 16X16. It either looked like a mite or a tick or a cockroach!
Creating your graphic image:

You can do this two different ways. You can work at 16X16 pixels at 16 colors and fill in each individual pixel like a Swiss watch maker or you can create a larger image and then shrink it to size. The technique you choose should reflect the kind of favicon you are creating. If you have a simple image like initials or a couple of blocky shapes then you will probably want to fill in the pixels by hand. I did this on my home page. If you have a complex image like the spider image I used for Web Building, you need to create a large image then shrink it down.

If you decide you need to use the latter technique then here is the optimal way to proceed. First draw your image, it can be a complex shape but keep in mind that it will lose almost all of its detail when shrunk to size. I used a 72 BPI, 600 by 600 pixel blank canvas with millions of colors (32bit graphic) for the original image. Note that it is quite blocky in this form. I shrunk it to size using Fireworks but you can use Photoshop or GraphicConverter or other image resizing software. Only after reducing the size do you want to reduce the colors. This is very important if you want a good clean image with accurate colors after such a drastic size reduction. The more data you give your graphics software to work with the nicer the reduced image will be. Only after it is reduced to 16X16 pixels should you reduce the colors to 16. Got it? Don't make me come over there.
Creating your icon :

Creating your icon is as simple as opening your 16X16 4 bit graphic in your icon creation software and saving it as an ico file. I used GraphicConverter, it was a snap, in fact I could have done the entire creation and reduction process in GraphicConverter but I like to play with all my toys and something's are just easier to do in some programs than others. The important thing to remember in this stage is that your favicon file must be of the Windows ico file type and it must have the file extension of ".ico".
The HTML:

In a perfect world you need only put your favicon.ico file in the root directory of your web site sans HTML but there are many servers and browsers and operating systems so you should bite the bullet and do the grunt work.

The favicon HTML goes in the <head> tag just before you close the tag. It is recommended that you put the HTML under the more important meta data. For those of us without our own servers this must go one each page you want to have your favicon appear on. You can have any number of favicons on your web site, I have several myself. Here is the HTML that will tell the various browsers where and what your favicon is:

<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

Like I said, the favicon itself goes into the root directory of your web site by default. You don't have to have it there but unless you tell your browser specifically where to look for it as the example shows, it will not find your favicon unless it is in the root.

With HTTPS (secure HTTP) hard code the entire URL into the href of the link rel tag. EX: href="http://webwonks.org/WebBuilding/favicon.ico" You will need to do the same if you have the favicon stored in a folder buried in your site and you want all the far flung pages of your site to reference it. You can even reference somebody else's favicon but don't do it without the expressed permission of the owner or you will visit the "room" when you die and go to hell. You do not want to visit the "room". Trust me on this.

Mozilla is capable of viewing png file types for favicons. The HTML to clarify this file type is in the TYPE value of the link rel tag.
Ex: <link rel="shortcut icon" href="favicon.png" type="image/png">
Alsos:

If your OS is UNIX, you will want to look here for directions.
Look out fors:

Some Internet providers do not allow favicons because there were initial worries about security risks. If you are doing everything right and you still don't see any favicons, it's time to give your web site IP a call and see if they allow them.

To test a favicon a second time, you may have to go to extremes to erase it from some browsers memory. IE is especially retentive. You might have to first kill the bookmark, then dump it's cache and erase it's history and finally restart IE. Have a friend hold the browsers arms behind it's back while you punch it in the guts. In extreme cases you may have to pants the browser with a side benefit of sometimes getting it's lunch money. A friend once told me he had to go to such extremes as uninstalling IE, reformatting his hard drive, turning off the power main in his house for a minute, then rebooting the entire internet by setting off an atomic electromagnetic pulse bomb over the North Pole. Ok no, not really, but you do need to kill the bookmark, dump the cache, erase the history and restart IE. It's your fault you make me say these things.