All you need to add a Favicon to your site is a Windows Icon (.ico) file usually called favicon.ico that you upload to the main directory of your website. Nowadays, most browsers besides Internet Explorer can use a GIF (including animated ones) or PNG (including full transparency) instead. But since all browsers including IE understand the .ico format, and because it’s got a lot of intriguing features that GIFs and PNGs don’t, read on to find out how to make one.

Download the Photoshop Plugin

You’ll need the Windows Icon (ICO) file format Photoshop Plugin to export to the .ico file format. You can download the plugin from Telegraphics. The plugin reads and writes ICO files in 1, 4 and 8-bit Indexed and 24-bit RGB modes, and also reads and writes 32-bit “XP” icons (with 8-bit alpha channel). Make sure to install the plugin before you begin this tutorial.

Let’s Begin

Because 16 x 16 is such a small canvas area, it can be very difficult to be creative. So instead start your project with a canvas set at 64 x 64 (always use even multiples when you plan on resizing files). Do this by selecting:
File > New, and opening a new canvas that is 64 x 64 pixels in size.

The Design

If you already have a logo you should reduce it to the 16 x 16 size to see if it holds up. If it doesn’t look good at this size, work with the 64 x 64 canvas and try creating a simple design that incorporates colors from your website’s palette.

When you’re ready to test the design select Image > Image Size menu and enter 16 x 16. Click on Resample Image and choose “Bicubic Sharper” from the drop-down menu (CS only for this step). This is the best setting for making sure that an image doesn’t blur as it’s being resized. If it’s still not sharp enough, go back and oversharpen, oversaturate and/or heighten the contrast of the original image and then resize it again.

If you feel the icon is not quite what you wanted, just keep tweaking it until it is perfect. At this tiny size it can take a few tries before you get it right.

Saving your custom icon

Go to File > Save As and make sure you name the file favicon.ico. Under Format you must choose Windows Icon (ICO) from the pulldown menu. This format will only be available in Photoshop after you download and install the plugin. In the next step you’ll need to upload this new file to the root folder of your website, so it’s a good idea to navigate and save it to that location on your hard drive now.

Uploading the Favicon.ico file

Connect to your server and upload your Favicon.ico file to your website. You must place it into the same directory as your home (index) page, and leave it loose, making sure not to put it in an images directory or other folder. The standard location is the “root” folder of your site, which is same directory as your home (index) page, not inside an images directory or other folder. If you put it there (and name it favicon.ico), most browsers will find it automatically.

Some browsers will look for a direct link in the HTML source code to your site’s favicon.ico file. You can help these browsers by adding this link in the head section of each page on which you want the Favicon.ico to appear.

Here is the link codes to include:

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

Once you’ve added this code, upload all of your modified pages.

(Some people suggest that the following is actually more correct:

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

You can use both if you want!)

If you want to use a GIF or PNG instead, use this format instead (just remember that it won’t work in IE):

<link rel="icon" href="/favicon.png" type="image/png"> or
<link rel="icon" href="/favicon.gif" type="image/gif">

Testing if it works

If your new Favicon does not show up right away, try refreshing the page or clearing your cache – or put a ‘?’ at the end of the url, which will trick a browser into thinking the page is new and not cached.

Troubleshooting

Browser Issues: Microsoft IE 6 for Windows will not display the favicon until the URL has been added to the favorites. Or try this trick: go up to the address bar, click on the existing (usually the IE default) favicon, then “jiggle” it a bit and let go. That will reload the page and should get the new favicon to show up.

Safari for the MAC will not display an updated favicon until the browser cache has been cleared. But choosing "empty cache" from the menu won’t help because Safari stores favicons in a separate cache. Go to Edit > Reset Safari, and check “Remove all website icons”. If you can’t find that, you must empty the icon cache yourself. Look for it in User > Library > Safari > Icons. On the Windows version of Safari, find C:\Documents and Settings\YourUserName\Local Settings\Application Data\Apple Computer\Safari\WebpageIcons.db. Quit Safari, delete the file, restart Safari. (Sometimes you need to restart the computer too.)

In Firefox, clear the cache and restart the browser. In Opera, just refresh.

Windows can actually be the most beligerent about not updating favicons for Internet shortcuts (on your desktop, for instance). This tip from www.vistax64.com/tutorials:

1. Right-click on the Desktop.
2. Select Personalize and select (Display) Settings.
3. Change the Color from 32 bit to 16 bit and click Apply.
4. Change the Color back to 32 bit and click Apply.

What to do if I do not have Photoshop?

If you don’t have Photoshop but have the images then you could always use some of the online tools out there. These are some of my personal favourites:
http://www.favicon.cc
http://www.degraeve.com/favicon
http://www.favicongenerator.com
http://tools.dynamicdrive.com/favicon

Original image

Then I go to Filter / Other / Offset and enter half the width and half the height of the image. In my case horizontal: 200px and vertical: 200px.

Next I choose the Clone stamp tool (just press “s” or locate it in your toolbox). Choose a brush without any sharp edges and make the size of it around 45px. Then hold down the Alt key and click somewhere in the image except on the edges made by the offset action. Next you have to draw horizontal from left to right, along the edges made by the offset action, and then vertical from bottom to top.
Using the clone stamp tool

If you made everything correct you should have the seamless image looking something like this

To see how it looks in action please have a look at this page.

What to do if I do not have Photoshop?

If you don’t have Photoshop you can still get hold of some pretty cool seamless background images. These are some of my personal favourite sites:
http://www.patterncooler.com
http://patterns.ava7.com
http://www.stripegenerator.com
http://www.stripemania.com