Webmastering pop quiz time:

• Raise your hand if you’ve ever seen the word “favicon”.
• Keep your hand up if you actually know what it refers to.
• Now keep your hand up if you already know how to produce one and add it to your own website.

… OK, you awesome folks with your hands still raised can go grab a coffee. The rest of you, read on!

What is a favicon?

Go to your Bookmarks or Favorites menu in your web browser. Right now. (Readers who aren’t well acquainted with bookmarking can probably go grab a coffee too and skip the rest of this post… but let me know and I’ll do a separate post on that, seriously. It is the key to managing your Internet life.)

See those little icons next to every item in the menu? Some of them are plain “blank page” document icons, but the majority of them are colorful little images that tell you at a glance exactly what site they’re referencing. This is a favicon, short for “favorites icon” (because it shows up in your Favorites list, get it?). It’s your site’s brand identity boiled down into 16×16 pixels (or 32×32 or more, depending on your operating system). And since it’s the only piece of your visual identity that gets stored along with a user’s bookmark, neglecting to supply one is like leaving your business cards in your other pants.

How do I make one?

There’s a special file type called “.ico” reserved for just such uses as these (also, say, desktop icons for Windows application files). Most browsers will also accept a PNG file as your favicon image, but not all. (For the technical specs, I commend to your attention this excellent 2013 article, “Understanding the Favicon” by Jonathan T. Neal.) So it’s best to use a dedicated .ico file.

Here’s the trick: for some reason, image editors do not include “.ico” in their repertoire of file types. So to convert your desired image (PNG, GIF, JPEG, even BMP) to .ico, you have to use one of the many online file converters. Here are a few:

• http://realfavicongenerator.net/ – If you want heavy-duty performance, this site will take a 260×260 file and produce a single icon that correctly embeds all the different sizes any modern icon set requires, then check your usage once you’ve installed it.
• http://favicon-generator.org/ – Quick and dirty for 16×16 pixels.
• http://tools.dynamicdrive.com/favicon/ – As a happy medium, this one will embed 32×32 and 48×48 versions of your image, as well as 16×16, into a single .ico file.

You can certainly use a solid square image, but if your logo is natively any shape other than square, your favicon will look more slick and professional if you use a transparent background.

Once I have the image, how do I set it as the favicon for my website?

If you have named your file “favicon.ico”, all you really need to do is place it in the root directory of your site. Browsers are hard-wired to look there and do the right thing with it. Presto!

You can also place it in another directory (such as /images) or use a different filename, but then you have to place a little extra code in the headers of your pages. Just add these two lines for your .ico file.

<link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon">
<link rel="icon" href="/images/favicon.ico" type="image/x-icon">

(Of course, use the actual path to your own image filename, if /images/favicon.ico above isn’t it.)

If you’re using a PNG file, the code is similar, but you also have to change the specified type:

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

Good news for this WordPress.com blog and everyone else’s: you can now set a custom favicon here, too. Go to your blog dashboard (you can type in /wp-admin after your blog’s wordpress.com URL) and click the “Settings > General” tab. On that page, you’ll see a box in the right-hand column for “Blog Picture / Icon”. Upload something here, crop and save, and it will automatically be set as your “blog image” (avatar), which WordPress will also use as your favicon.

Bonus question: How is it pronounced??

Unsurprisingly, opinions do differ. The top contenders seem to be:

• FAV-ih-kahn (short a, short i)
• FAVE-ih-kahn (long a, short i)
• FAVE–EYE-kahn (long a, long i)

Whatever your preference, happy fav(e)-ing!