In your browser, look above, do you see the purple PaperFlame logo displayed to the left of the URL? It’s small – 16 x 16 pixels. It will also display within the tab of tabbed browsers. Not all web sites have them. I think they are a great touch for any website. Let me take a moment to show you how to make a “favicon” using Photoshop. There are other ways to make them.. but for those of you that consider Photoshop your “best friend” (you know who you are) let’s stay true.

Paperflame favicon Example

First off, Photoshop (mighty as it is) can’t output the .ico (icon) file format. There is a plugin that can do this for us so don’t fret. You will have to install it before we can continue. Get the icon plugin for Photoshop at Telegraphics it’s free, but I am sure they would love a donation if you can spare it. Because of this freebee plugin, I am also listing this tutorial under the “Free Stuff” category.

Done installing the plugin? Let’s get crackin’.

A 16 x 16 image is a very small canvas to be working with. Lets start by creating an image that is 64 x 64. You can work with 32 x 32 if you wish but 64 x 64 is a bit better on the eyes. If you change size remember to stick with even multiples. Create a new image File> New – Set the size to 64 x 64.

You most likely have your own logo already. Put the image you want into the 64 x 64 image we just created. At the 16 x 16 size, not all images look OK. If not… you will have to be a bit more creative and come up with some version of your logo, initials, and/or color palette. Work with something that ends up looking clean at 16 x 16.

To try your design out, choose Image> Image Size then change the image to 16 x 16 and choose to re-sample the image using “Bicubic Sharper” (CS2 and above). After testing, Bicubic Sharper seems to keep the original image looking it’s best when reduced. You may have to experiment a bit until you get something that looks good at such a small size.

This image I made of the asterix looks pretty good at the 16 x 16 size so I will go with it.

Once you have that perfect little image created, to save just go to File> Save As and name the file favicon.ico and be exact. The ICO file format is now available through the use of the previously installed plugin. Sweet!

That’s it! Well almost. You then need to upload the favicon.ico file to the root of you webserver. The root is where your index.html file is or it may be called homepage.html on some servers. The point is, do not put the favicon.ico file in a sub folder of the root (/) directory. Don’t place it in an “images” folder or a “misc” folder. Just drop it wherever your homepage file exists.

Almost there… you are now going to have to add a little snipplet of code on each page that you want the favicon to work (I do all of my pages).

Place the code: everything within the < and > symbols and including the < and > symbols themselves somewhere within the <head></head> section of your webpages.

The one line below this line is the code:
<link rel=”icon” href=”/favicon.ico” type=”image/x-icon”>

 Example of where to place the code in your web page.
————————-
<html>

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

<body>
</body>

</html>
————————-

Done. Upload your modified page(s) and see if the favicon image shows. If not it may help to clear your browsers cash, then reload. Other things that work to get the favicon to appear are to bookmark the page in your browser or close your browser altogether and re-launch your browser, then go to your website again.

Good Luck!