Creating a Favicon

Jun 28, 2007 by Matt | Posted in Design 4 Comments

A Favicon, as you may already know, is that tiny icon that sits to the left of a web site’s URL in modern browsers (and in your bookmarks menu). Usually they’re 16×16 pixels in dimensions. Want to learn how to make one for your website?

1. First of all, create a new document in Photoshop. You want a resolution of 72dpi. I’d suggest 150×150 pixels for your dimensions. It’s easier to work with a larger image, and you can always reduce the size later.

2. Now, you want to get started creating the icon. That’s the part I can’t help you with. How you make it is totally up to you. Smashing Magazine has some tips (and examples), which you may find useful. Here’s a (not very good) example:

3. Now, lets try scaling the image down to 16×16 pixels. Choose Image > ImageSize. Just change the pixel dimensions from 150×150 to 16×16. The rest of the settings will update accordingly.

4. You should end up with a puny 16×16 icon. How does it look? If you don’t like it, try again. Thick, bold lines tend to work better. More often than not, you won’t be able to totally convert your logo into a favicon. In that case, you should do as Smashing Magazine suggests. Look at your logo for elements that could work in a favicon. Take Google for example. They’re favicon is a big “G,” not their whole logo.

5. Okay, you have an image. Now what? Moder browsers (like Mozilla Firefox) can use GIFs, PNGs, and JPGs for favicons. Unfortunately, some browsers (yeah, I’m talking to you, Internet Explorer!) require the “ICO” format. I suggest using Dynamic Drive’s Favicon Generator to convert your GIF or PNG into the ICO format (which works with just about every favicon-capable browser).

6. Once you have your favicon, it’s time to add it to your website. How? Upload it to your website, preferably in the root (the same folder as your index file), as IE5 expects it to be there. Then, you add the following code snippet to the HEAD section of your pages:

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

Now load your site. Did the favicon show up? Most likely it’ll load (assuming you put the HTML in correctly). However, if you’re using Internet Explorer, it may not for a couple of days for some reason.

Well, that’s the end. I hope you found this tutorial useful.

  • Pingback: a strangled duck

  • http://www.cathetel.com/favicon.htm Healing the Body

    Finally someone who tells the students to create a bigger image, because it is easier to work with, and can be reduced later.  Good job.  A sensitive addendum to Favicon creation, is the creation on the animated Favicon – keep it subtle and not flashy.  Special Head section code is required for two files, the animated Favicon that will activate on Firefox and Netscape, and the ico file for poor old boring Internet Explorer.  You can find a tutorial and the code at http://www.cathetel.com/favicon.htm .

  • http://www.webmaster-source.com Matt

    @Healing the Body, Nice tutorial. Subtle animation can really draw attention to a favicon.

  • Lawrence Gross

    Very nicely and easily explained. I usually make them like this: http://www.coreldraw.com/en/pages/ico-file/ but your way works perfectly too! Thanks for sharing :)