Giving Your Page a Favicon

You may have noticed that on many pages you visit there is a little icon to the left of the address line in your browser which is unique to that page. For example, this page has a little color decorative initial of an “S” in that spot. This is what’s called a favicon, and it’s a way of identifying your website which not only shows at the top of the browser, but also makes it stand out in a user’s browser history and bookmarks or favorites list, where it will show up on any listing of your site. Favicons aren’t essential, but it’s a clever little gimmick to make your site stand out to users.

Making a Favicon is relaly pretty simple, but despite that many find the process bewildering. For example, child-prodigy WordPress developer Matt Mullenweig wrote a comprehensive article on the subject which successfully makes the process so confusing and intimidating that he apparently scared himself into not putting a favicon on his own web page. I may be twice Matt’s age, but I think I can explain the process a little more clearly.

The Technical Stuff

A favicon is basically just a little tiny image. The trick is putting it in the right format and in the right location. The rest is aesthetics and there is some skill required in making an image that small which is still visually appealing. Here’s the basic procedure:

    1. Start with a larger image and shrink it down to 16 pixels by 16 pixels using the graphics program of your choice.

    2. Take your image, flatten any layers and save it as a Windows ICO file or a PNG file. Photoshop and Paintshop Pro both support these formats and Mac users can also use GraphicConverter, a powerful image manipulation tool from LemkeSoft which can even do the job in demo mode.

    3. Upload the file you just created to the main directory which hosts your web page. If you put it in the top level directory of your site and host multiple pages it will show up on all of those pages. If you want separate pages to have separate favicons put them in individual directories with a different favicon in each one.

    4. Add this code to the HEAD section of your page’s index.html or index.php file: <link REL=”SHORTCUT ICON” HREF=”/favicon.ico” type=”image/x-icon”>. Or if you’re using a PNG file use: <link REL=”SHORTCUT ICON” HREF=”/favicon.png” type=”image/png”>. PNGs have the advantage of being able to have a transparent background. The favicon does not actually have to be named favicon, so it is also theoretically possible to host your favicons in a separate directory and access different ones for different pages using code like: <link REL=”SHORTCUT ICON” HREF=”/absolute-path-to-favicon-directory/your-favicon-name.ico” type=”image/x-icon”>.

    5. Don’t be dismayed when your favicon doesn’t show up in your browser right away, or occasionally disappears when you change pages. At the very least you’ll need to quit your browser and you may need to clear out your cache before it appears. You may also notice that if your page stores some sub-pages in separate directories or uses a separate template for those pages you may need to add the favicon code in more than one location for it to show up on all pages.

That’s not too complicated. But like a lot of things, the technical aspects are easy and the artistic element may take years to master. It’s not at all easy to make an image which is only 16×16 pixels and is clearly recognizable for what you want it to be.

The Artsy Part

Now, I’d recommend starting with a source image which is at least four times the size of your final favicon. It’s just difficult to work on an image which is smaller than about 64×64 pixels. But remember that most of the detail you could put into a larger image will at best be wasted or at worst be confusing and muddying at 16×16 pixels. What works best in that small size is usually one or two very clear letters from a bold, distinct font, or a clear silhouette or outline image. In fact, the decorative initial favicon on this page is a good negative example, because it’s just too complex and has too many shapes and colors. It does give the impression of a decorative initial, but it’s hard to tell what letter it is. Strangely, Google made a recent change from a nice clear “G” character favicon to a muddled multi-color image, perhaps because it’s more unique.

You’re much better off with a clear, bold font like Aventine or a clean and stylized art deco style font like Falmouth or for something more quirky I’ve had good luck with Squiffy. For an image-style favicon nothing works better than the kind of outlines and silhouette shapes which also work well as printers ornaments as you can find in fonts like Caswallon Ornament, Sangrael or medtilesMedieval Tiles. The process required to make an image work as a font also makes it simple enough to work well as a favicon. It’s key to use bold colors, sharp contrasts and make sure that you don’t use lines so thin that they blur when reduced to small size. If you use letters you may even want to consider not using certain letters like A or R because the small spaces inside them don’t work well. You may even want to play around with plugins if you have Photoshop which enhance the outlines or contrast of the image.

Here are some sample favicons to critique:

First is the new Google favicon, which has nice bold colors, but I really can’t figure out what it’s supposed to be. Second is the favicon from this page made with a colorized version of the Morris Initials font. It’s too busy, but the colors come through nicely and you can tell it’s a decorative initial. Third is a favicon made with a character from the Caswallon Ornament font. It’s simple and attractive and you can tell it’s a leaf. The next two are made with Falmouth and Aventine. Both work well because the characters are so bold and have such clean lines. But the more letters you add the less clear they are. There’s just not much room in 16 pixels. The 6th example with two characters from Falmouth works fairly well, but I don’t think it would be possible to add anything more to it. As you can see the letters had to be made smaller overall to preserve their proportions with the greater width required for two characters. Last is a favicon using the chalice character from Sangrael, and it’s a good negative example because it’s just too small and too detailed to work well.

So the technical aspects of setting up a favicon are fairly easy. It’s the aesthetics which are most challenging, and you probably won’t get the hang of making a really great favicon until you’ve practiced and experimented a lot on your own. I know I’m far from perfect with it, and I’ve gone so far as to go in and edit them pixel by pixel in bitmap format.

in: Articles, Review · tagged: , , ,

Leave a Reply