.:. XUBE .:. for FAVICONS .:. How to make a FAVICON.:.

Now there are dozens of places on the net you can find icons to use, but it literally only takes a few minutes to make your own! This is not a how to use a graphics program help.. It is assumed that you will have a basic paint program and will be able to crop and resize an image. you should have taken some time to look at some different sites icons. a quick and easy way to see some favicons, is to run the FavOrg tool. It will refresh the icons you have and then archive them here C:\Program Files\FavOrg\Data ~ Take some time to look at the icons.

favorg icon file

*Note which ones are obviously NOT related to the actual site, but most likely borrowed or gathered from an icon gallery. Also note which ones you like best ~ and think about why. One of the best favicons, I think, is the one for TigerDirect , simple, and powerful.

When you design yours, a good idea is to stick close to your theme. At 16x16 pixels, they will not be the Mona Lisa, but they should be an extension of your site, not a whole new piece of work. ~ You can shrink images you use already on your site and try them. you can use a larger image.. 32x32 or even 50x50 and it will render the correct size in the browser and faves list! Some also recommend you reduce the colors used to 16 for use as a favicon. None of the ones below have been ~ you decide.

What do I do? I make it in a 32x32 size and test it at 16x16, but upload only ONE file of 32x32.

I suggest experimenting with existing images on your website, just crop them in different ways with IrfanView, or try playing in MS paint. No need to download expensive programs you don't already have. IrfanView converts to the ico format, crops and resizes nicely. Pixia is a NICE alternative to PSP, that is free, and FUN!

Start with a larger sized image ~ a good size is 50 pixels by 50 pixels. large enough to work with, small enough it will not lose definition when resized. Any image format is fine, because in the end you will be changing it to .ico . Use a scrap of am image, or fill the space with color in a graphics program.	Then add a letter, initial, image or a symbol to the square ~ you can try adding a border or using the button option for a different effect.	if you WANT, then resize the image to 16 x 16 pixels ~ that's it. you can use a larger image.. 32x32 or 50x50 and it will render the correct size in the browser and faves list! cool huh. and convert them to a .ico file with IrfanView


You could do stripes, or another pattern.	Some options, you may not want to add text. the colors or pattern may be enough for you.	Check for legibility, can you see what it says, is, what it means? Check it at 16x16 even if you will be using a larger image.


Or apply a fade effect	Something like this may look cool, but be careful of legibility	Too light? Too dark? Just right? you might put the artist in you aside and have others check it for you, what you love, may be a miserable favicon.


Want a transparent background? Try an a magenta background 255 red 255 blue zero green, SHOULD result in the magenta space disappearing when bookmarked, and just the image or letter remaining. No good? try an icon editor like MicroAngelo then to make the ico background transparent ~ or try a new design!	Best options? Keep it simple, but be willing to experiment! You may find the perfect image by chance.	But, if it "goes" with your site, that is often the key to a good favicon. The same colors, text font, or familiar image helps identify you.

Don't forget to save a larger version of the image as well. in a 32 x 32/48x48 / or whatever size. Some use them as AIM icons, email sig tags, or as a chat or forum avatar... If you have multiple sites, you can create a bar of images

< like this.....an unobtrusive, but powerful sig tag that helps you promote your sites quickly * some forums only allow 3 images per post.... keep in mind each icon in a sig tag counts as an image, you may want to create one image and map it.

AND they will show someone clicks the upper left corner of the browser, and DRAGS to the desktop. A customized shortcut icon right back to the website! One reason to use a larger icon file size AND to make sure its readable.

Now, how to use a favicon ~