Tutorial: Build a custom “favicon” for your site

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…

Step 1
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.

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 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.

Good luck!

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

Technorati Tags: , ,

6 thoughts on “Tutorial: Build a custom “favicon” for your site”

  1. You are my new hero. You are a goddess of web-technology. favicon, duh, I should have figured that out. I’ll even admit that I have learned many tidbits of technology from females, you, I’ve learn four things already.

    Hugs, and thank you so much!

  2. Whoa! * gleeful grin beaming bright *
    I’m so pleased to help! Glad my own learning process can help others. As always, look for more weird stuff and geekery to leak out of my brain onto this site. (Best enjoyed with red wine or a glass of absinthe; 🙂 ) Cheers brian for the lovely thanks!

  3. If you for some reason do not have the ability to place a file in the root of your webserver (I don’t under Blogsome, for instance), then you can still set up a custom favicon:

    <link rel="shortcut icon" href="/images/favicon.png" />

    Here, I’ve uploaded a (16 by 16) file to my /images directory (the only place I can), called favicon.png, and this works well too. I’m not sure if every browser will respect this, but Camino does, so does Firefox Mac. And they are the only ones I could be bothered testing right now!

    If your file is in the root directory, you shouldn’t need the code, IIRC.

  4. Excellent additional tip Matt! 🙂 I’ve always had access to the root for my site, but there are plenty that don’t due to a variety of reasons.

    “If your file is in the root directory, you shouldn‚Äö?Ñ?¥t need the code”Yup- that’s what I found for my own blog, however I still suggest for ultimate compatibility and speed of integration to include the code if possible. It can take ages for the damn thing to show otherwise…

    Love your geekin’ site, btw! You’re in my RSS. 😉

  5. Oh – one more note:

    Take care on using .png format for stuff as Win IE doesn’t reliably handle the format. There is still a complete lack of alpha transparency support there- i.e. the alpha transparency that stomps all over .gifs binary method, is ignored by IE. (like so many other things, eh? 😉 ) IE can handle some methods of transparency, but not for alpha.

    Granted, this likely won’t be an issue of note with a tiny 16 x 16 favicon, but I thought I’d mention the bug. 🙂

    Check out the ever faithful wikipedia.org for more info on browser compatibility.

    Cheers~ 🙂

Comments are closed.