Favicon for your Web site By Kiel Figgins, www.3dfiggins.com

How to do a Favicon for your website - By Kiel Figgins

Seen those small icons by web addresses? They're called 'favicons' and heres how to make one of your own.

Download Tutorial as MS Word Doc.

::Logo property of Marco Capparelli www.marcocapparelli.com::

1. Download the Photoshop Plugin (Here)

2. Close Photoshop if open

3. Install the plugin

put 'icoformat.8bi' in 'C:\Program Files\Adobe\Photoshop 7.0\Plug-Ins\File Formats' (or whatever your photoshop directory is)

4. Open Photoshop

5. Create new canvas that is 16x16 pixels

File > New... (ctrl+n)

6. Create a New Layer

Layer > New > Layer... (shift+ctrl+n)

7. Create your icon

:: Tips ::

You can scale an existing image to 16x16, but it will probably be pixelated, but still good for a starting off point
To zoom in on your image, use the Zoom Tool ('z' will activate this tool)
Using the 'Pencil' Tool (shift+b toggles from Brush' and 'Pencil'), thats only 1 pixel wide ('[' and ']' will increase and decrease the size of a brush), is useful for exact detail and clean up
Because of the size, you'll probably want to over exaggrate the lights and dark to add more contrast, using the 'Dodge' and 'Burn' Tool (shift+o toggles between these tools) does this well
Be prepared to simply your icon, 16 pixel just isn't much...

8. Save your image as .ICO format

File > Save as... >
File Name: favicon
Format: ICO (Windows Icon) (*.ICO)

9. Putting onto your website

Upload this icon onto your sites FTP (works best if placed in the root directory, ex. http://www.mysite.com/favicon.ico)

10. Making it show up

On each page of your site (least each page you want it to show up on), you need this text in the header of your html code

http://www.mysite.com would be changed to whatever your site is

11. Verifying your icon

Your icon will not show up until your cache has cleared
Internet Explorer will not display it until you've added that site to your favorites directory
Safari for the Mac will not display them until you've emptied the icon cache 'User > Library > Safari > Icons'

12. And your Done...