Step 1: Photoshop does not come with the ability to save Window's icon (.ico) file formats as standard, so you need to download a plug-in before you can proceed. Telegraphics have exactly what you need, so you should fetch the plug-in from them and install it before proceeding any further. It's a free download, capable of supporting 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). Suffice it to say that I consider this plug-in useful for more than just this tutorial - if you are considering starting a career in icon design, then this is an essential plug-in too!

Step 2: Favicons have a standard size of 16x16 pixels. Many people find it exceptionally difficult to design in such a small canvas area, so this leaves you with a choice - You can either stick to a 16x16px format and carefully design each icon pixel-by-pixel with the Pencil Tool (100% opacity, 1px thickness), or you can design with a canvas of 64x64 pixels and resize it later. If you choose the latter option, remember that you'll need to stick to bold designs - excessive detail will just be lost when you scale the image down.

Step 3: When you have finished designing your icon you need to save it in an appropriate format. Go to File > Save As, select the format as Windows Icon (ICO) (this will only be available once you have installed the plug-in and restarted Photoshop), and save your image as Favicon.ico. Now upload this file into the base HTML directory of your website, together with your index/home page.
 

Step 4: Some browsers automatically look for a file called Favicon.ico or favicon.ico (note the type case) on your website and display your icon. Others, however, prefer a direct link in your HTML in the HEAD section on each page telling the browser where to look for the file. To maintain maximum compatibility, therefore, you should insert this code into all your HTML pages:

If you run a Linux system, you MUST ensure that the casing of your file and the <link> reference are the same. Yes, I know its a pain, but that's Linux.

NB. Please note that not all new browsers have flawless support for the favicon feature! Microsoft IE6 for Windows, for example, does not display the favicon until the URL has been added to favourites. Safari for the MAC caches favicons, so if you change it you'll need to empty your cache before the new one will show.

Footnote: Well... that's it for Favicons! By definition they may be mere fluff, but they do make a site stand out in a browser's URL history, and they add virtually no overhead to your web server, so there is little reason not to use them! If you need some inspiration, try looking at this collection... or just browse around and see what pops up. Who knows... your imagination could be fired up in all sorts of ways...

view entire thread

Sweet, I'm starting up a website and I wanted to know how to do this, many many thanks for this tute, I've added it to my favs!

Reply to this post

Quote from KaiRock Int;41436: I would like second everyone else's compliments with a resounding "Here Here!" (In my best English accent anyway) I recently completed a contract where I was made a Volvo Relay - in excess of 172 icons ranging in size from 32x32 down to 8x8. WHAT A LEARNING EXPERIENCE! You can stress enough the importance to KEEP IT CLEAN AND SIMPLE! I am a big fan of the Glass and Metal effect...this is almost and utterly pointless when creating icons. You put in all of this time and effort to come up with original and professional looking icons only to watch your work emerge or "disolve" into this blob of pixelation. Great tutorial that beats learnign like I did!

Had also a great time in learning this tutorial... I love it... Plain and simple but still it rocks... :biorust:

Reply to this post

Quote from Man1c M0g;16632: Thanks for the praise! :D And yes... I have already submitted the links to all the relevant tutorial sites. I think we may be seeing them accepted this weekend...

I would like second everyone else's compliments with a resounding "Here Here!" (In my best English accent anyway)

I recently completed a contract where I was tod esign in excess of 172 icons ranging in size from 32x32 down to 8x8. WHAT A LEARNING EXPERIENCE! You can stress enough the importance to KEEP IT CLEAN AND SIMPLE! I am a big fan of the Glass and Metal effect...this is almost and utterly pointless when creating icons. You put in all of this time and effort to come up with original and professional looking icons only to watch your work emerge or "disolve" into this blob of pixelation.

Great tutorial that beats learnign like I did!

Reply to this post

I always wondered how sites did that, this is an awsome tutorial. :) thanks for writing it. :)

Reply to this post

hey mog, great tutorial, i've used this many times. in particular the link to download the photoshop plugin.

keep it up.

Reply to this post

view all