Create a Favicon

**SEE NEW UPDATE WITHIN POST. UPDATED 10 FEBRUARY 2009.

On a previous post, I had a couple of comments regarding the creation of the little site icon next to my URL in the address bar. There are few things in life I won’t share, (chocolate tops that list), so I decided to do a little tutorial here on creating your own custom icon.

Favicon
The terminology for that cute little bit of recognisability is favicon. Short for “Favourites icon,” the graphic needs to be saved in the .ico file format. I have a link to my file sharing folder where you can pick up the Photoshop Plug-in needed to do this. Find it here: icoformat.zip (It’s on my dotmac file sharing page. For all of my dotmac page, go here. For Windows users, see the links at the end of this post.)

**UPDATE: 10 FEBRUARY 2009: A good place to download the Photoshop ICO plugin. This article is a few years old so I thought I’d test the information. Please see this new link for more updated plugin compatibility. (Mac or PC) Newer downloads for ICO.

Or even easier, might be this link I saw on Twitter: Favicon Generator

How to make a favicon
You’ve got the plug-in for Photoshop and now you’re ready to make the art. Most favicons are a tiny 16px x 16px image- so remember that when you think up what you want your recognisable symbol to be. I tend to change the look of my blog a few times a year, so I chose a symbol that would hold up no matter what the style morphed into. The colour I chose actually matched an old iteration of the blog, but is noticeable, so I kept it that rusty red colour. The ‘circled R’ is just a standard character found in your system and I believe I used Helvetica or something similar to render it. Anything clean and simple will do. Remember, this is 16 x 16…

Create your Photoshop document 16px x 16px at 72 dpi. If you create it at 32 x 32, you’ll need to shrink it later to be 16 x 16, but it might help you see and work on the file until that time comes. Legibility and unique identity are the goals here.
Possibly the easiest way to create a favicon is to use a tool like SnapNDrag or ImageWell to capture a little piece of a graphic or logo to start from.

Cool! Now what?
After you have your 16 x 16 art saved into the .ico format, (you installed that plug-in, right?), then getting it into the web page is next. For some reason, I never embedded the .ico link into regularjen, but it seems to come up. With that method, it may take awhile for it to begin generating thanks to the wonders of caching (if it shows up at all), so I recommend doing it the proper way below…

Step 1

There are slight variations on the above code to be found everywhere you search for favicons on the net. I found that these two lines of code work well. And yes, you need them both. (Type the code into your header before the body tags but after the title.)

Step 2
Place the favicon.ico file in the root of your site. Don’t be tempted to put it in the images folder. It belongs along side the page its code appears in. Keep it in the root, kids. Also, keep the file named favicon.ico. It is the standard name for this type of file. That’s the scary bit done. (Not bad, eh?) Now, go dump your browser cache and refresh your little heart out until the damn thing shows up.

Good luck!

Helpful links relating to this subject:
Wikipedia article on Favicons.
Cross-Platform download source for the .ico plug-in.

Addendum:
If you do not have access to the root of your blog/site, as some do not on various blog services, change the procedure slightly, as suggested in a comment on the original post containing this tutorial. (Thanks Matt!)
(I’ve changed the information to fit with the .ico format originally discussed in this tutorial.)
Place your favicon.ico into the /images folder (where all your other pics go) and refer to the graphic with that directory in the link.