How To Create A Favicon In Photoshop
by Gabi SolomonA favicon is a small icon that appears next to the website adress in the browser bar. To be more precise the icon is 16 by 16 pixels. This is why the design for the favicon is not a walk in the park. The format to wich the favicon is saved is a Windows Icon (.ico) file called favicon.ico that you upload to the main directory of your website, and then have to put the link to it on every page to signal to the browser the location of the favicon.
Download The Plugin
Photosop does not normaly support this format ( ICO ) but fortunate for you the guys at Telegraphics have developed a plugin for photoshop so you can export to the .ico file format. 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). You must have this plugin installed before you start working on the favicon.
Where do I put the plugin file?
After you extract the ZIP archive on Windows, or the SIT on Mac, you copy the file to the ‘Plug-ins’ folder, inside Photoshop’s application folder. On Windows, look under My Computer->C:->Program Files->Adobe->(your Photoshop version). On Mac, look in the Applications folder for Photoshop.
How do I check it’s properly installed?
Quit and re-launch Photoshop. Go to Photoshop’s “About Plug-ins” menu. If the plugin is listed, it’s correctly installed. Or look for the “Telegraphics” submenu of your Filters menu (for a filter), or the Save/Open formats menu (for a File Format).
Let’s Begin
As i told you the favicon is a very small icon that doesnt live you to much room to be creative. What i recomend to do is to first do you’re design on a 64 by 64 pixels canvas and when you are happy with you’re design resize it to 16 x 16 pixels. When you do the design keep in mind that the final size is going to be 16 x 16, so use as less elements as you can, and without to many effects ( borders, shadows ). Also the color palette used need’s to be cut back to a max of 2 colors ( it’s only a recomandation, the main thing is to make it look nice and clean ).
After you have spin you’re head around the problem enough and think you are happy with the result, you do the main test and resize it to the final size of 16 x 16 pixels. On the resize i would recomend to use “Bicubic Sharper” from the drop-down menu (CS only ). This insures that the images stays sharp and doesn’t blur as it’s being resized.
If you don’t like how it looks, then a quick CTRL+Z and keep trying until you are happy.
Saving The Favicon
Select the Save as Option in the File menu, and enter the name favicon.ico. Also you need to select the format Windows Icon (ICO) from the dropdown menu. This format is now available because you installed the plugin.
Uploading The Favicon.ico File
Conect to your server and upload your favicon file to your http root, in the same directory as you’re index page.
Now all you need to do is add to all you’re pages the code that helps you’re browsers to find the favicon.
Here is the link code to include:
<link rel="shortcut icon" href="/favicon.ico">
Once you’ve added this code, upload all of your modified pages.Testing
If your new Favicon does not show up right away, try refreshing the page.
Inspiration
If you need some inspiration have a look through this nice collection of favicons. Also look at the nice categorized list of 50 remarkable favicons at Smashing Magazine. You might find something that triggers an idea for your own.
Hope you found this helpfull and i wait you’re critics and comments 
