Adding a Favicon to Your Website

What’s a Favicon?

A favicon is a special 16×16 pixel image that is used by web browsers to display a unique image in each tab. If, like me, you tend to have over 30 tabs open at a time, the favicon is the item displayed so you know what you have open in each and every tab. Amazon, Google, Facebook, Twitter, and even tiny WordPress sites have the ability to use a unique image.

Where can I get one?

You can either make your own or find one you like online on websites that give the images away for free. Make sure they’re actually free and not lifted from some poor artist’s page. Always verify the license, since some Creative Commons images require you have a link or an attribution somewhere on your website. You can use Google to locate images to find ones that look interesting.

How can I make a custom one?

There are quite a few websites that can make one for you. Use your favorite search engine to look for “favicon generator”. I personally like Favicon Generator.

The important thing to remember is the size of a favicon — 16×16 pixels. If you take a huge Renaissance painting and try to smoosh it down to 16 dots by 16 dots, it won’t look quite as impressive. High contrast simple images work best, but you can always use your author portrait to make a unique favicon. If you look at a favicon with an image viewer, it looks like a bunch of smeared colors. The way I think of it is think of what Salvador Dali would paint if he did your portrait. Up close, it looks weird. Compressed down to a tiny square in your browser tab, it will actually look reasonably accurate.

Using the website I indicated earlier, all one has to do is select an image on a computer, click a button, and viola! you have your own favicon.

Yeah, so, what do I do with it?

Favicons are special files (and they’re named favicon.ico). Websites look for code in the header section of web pages that indicates where your favicon is located. Once they find it, they automatically add it to whatever tab has your page open.

If you’re old-school and you code HTML by hand, you add a couple of lines to your web page. Luckily, the generator that I’m using for my example displays the code so you can cut and paste into your web page.

If you’re using something like WordPress, you have to locate the favicon setting for your theme or find a plugin that displays it for you. You can also edit your header file directly, but hacking PHP code is a bit above what I want to get into here.

As for the favicon.ico file itself, you need to place it at the root of your website. That’s where most browsers look by default.

If you’re using someone else’s tools for your blog, such as Blogger or Tumblr, your favicon will usually be their default. Blogger, for example, is an orange box with a white stylized “B”.