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.
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.)
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…
For nearly instant recognition, embed the following code between the <head> tags of your index page. (After <title></title> is a good place.)
<link rel=”icon” href=”favicon.ico” type=”image/x-icon” />
<link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon” />
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.
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 it’s 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.
Helpful links relating to this subject:
Wikipedia article on Favicons.
Cross-Platform download source for the .ico plug-in.