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
4. Open Photoshop
- put 'icoformat.8bi' in 'C:\Program Files\Adobe\Photoshop 7.0\Plug-Ins\File Formats' (or whatever your photoshop directory is)
5. Create new canvas that is 16x16 pixels
6. Create a New Layer
7. Create your icon
- Layer > New > Layer... (shift+ctrl+n)
:: Tips ::
8. Save your image as .ICO format
- 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...
9. Putting onto your website
- File > Save as... >
- File Name: favicon
- Format: ICO (Windows Icon) (*.ICO)
10. Making it show up
- Upload this icon onto your sites FTP (works best if placed in the root directory, ex. http://www.mysite.com/favicon.ico)
11. Verifying your icon
- 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
<link rel="Shortcut Icon" href="http://www.mysite.com/favicon.ico">
- http://www.mysite.com would be changed to whatever your site is
12. And your Done...
- 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'