Favicons: A Comprehensive Guide to Making and Installing Them

If I didn’t know any better, I’d have to wager a guess that a favicon was a character in a popular children’s video game. But I do know better, since I create favicons for every website we build. And there’s a chance that you, gentle reader, might be here looking to find out how to do just that.

Now, it’s true that there are already a lot of favicon tutorials out there. I saw them all firsthand when a friend recently asked me how to make a favicon for her personal blog, and instead of taking the time to write out a list of instructions, I went in search of a good tutorial to link to. What I found was less than thrilling. Many are outdated, many didn’t answer all of her questions, and — if I may be allowed to show my bias — I just didn’t like ’em.

Let’s just say I thought it might be time to revisit the topic. So I present to you: a comprehensive guide to making and installing favicons.

But first, a quick explanation for the uninitiated.

Favi-what?

Look up. Right up there, at the top of your browser. See the little picture next to address bar, or floating alongside the title text of this tab? That’s a favicon.

A favicon is short for “favorite icon.” It’s also sometimes referred to as a bookmark icon, a shortcut icon, or a website icon. They’ve been seen in browsers since 1999, when Microsoft released Internet Explorer 5 with favicon support.

Why favicons?

In a word, branding.

…

What, you want more words? Okay. Think of it as an extension of your “look.” It’s an impression that helps your web presence look polished, and it helps underscore your core identity.

Making a favicon

You have two options for making a favicon.

Create a graphic for your favicon and have it converted to a proper format. Simply use whatever photo editing software you have — even MS Paint — and build your image. Save it as a .jpg (or .gif if you need transparency). Then, choose one of the favicon generators available on the internet and upload your image. Remember, an online generator can help you make a favicon, but it’s still up to you to get it installed on your website — read on for more information on that.

Create a graphic for your favicon and save it in the proper format — with the help of a little plugin. If you know your way around Photoshop, Photoshop Elements, or Paint Shop Pro, this may be the option for you. If you go this route, note that you’ll have to download a plugin so that you can properly create .ico (favicon) files. Fortunately, Telegraphics has these plugins available for download — go here and choose the right version for your system (and don’t forget to make a donation for their work).

Installing the plugin after download should be fairly easy — just make sure your photo editing software is closed, and drag it into your photo editing program’s plugins folder.

Designing a favicon

A favicon can be as large as 48×48 pixels, but it’s important to remember that it will most often display at 16×16 pixels. That’s as big as this square is:

Eeek. Tiny, right?

Simplify! Whether you’re designing a favicon for a company or for a personal website or blog, it’s usually a hopeless case to try to fit an entire logo or name into a 16x16px square. In cases like these, try to choose a key graphic element from your overall branding to showcase. For example, we chose a stripped-down, silhouetted version of the Dowitcher for our favicon.

Modify! Throw unnecessary details out the window. Aim for simple shapes and simple colors — the fewer, the better. When you can, aim for straight lines and corners for the sharpest look — curved edges tend to look fuzzy at this size.

When you’re satisfied, simply name your finished product “favicon” and make sure it’s saved in the proper .ico format. Why .ico? Why not .gif, .png, or .jpg? In short, .ico remains the only file type that is universally accepted by browsers. And you want everybody to be able to see the fruit of your hard labor, right?

Installing a favicon

Now it’s time to tell browsers where to find your favicon.

In WordPress:

1. Using an FTP client, navigate to the main folder of your current theme (usually found by choosing “wp-content > themes > ”). If there’s already a favicon.ico file in the folder, delete that. Then, upload your favicon.
2. Go back to the root directory of your website and upload your favicon there, too. If you have a blog, this will make your favicon show up in subscribers’ feed readers.
3. Now, log into your WP admin, and choose “Appearance > Editor.” You should see a list of templates on the righthand side. Select Header (header.php). After the <head> tag, insert this line of code:

   <link rel="shortcut icon" href="<?php bloginfo('stylesheet_directory'); ?>/favicon.ico" />

   Alternatively, you can insert:

   <link rel=”shortcut icon” href=”URL TO YOUR FAVICON”/>

4. Refresh your browser. Be patient if it doesn’t appear immediately — it may take a bit of time to update.

In Joomla:

1. Using an FTP client, navigate to the main folder of your current theme (usually found by choosing “templates > ”). Upload your favicon, making sure to overwrite the existing one.
2. Go back to the root directory of your website and upload your favicon there, too. If you have a blog, this will make your favicon show up in subscribers’ feed readers.
3. Refresh your browser. Be patient if it doesn’t appear immediately — it may take a bit of time to update.

Why be patient? Because browsers don’t usually bother to reload favicons every time you hit refresh — so if you feel impatient and want to see your favicon right now, you’ll have to do a hard refresh. Some notes about hard refreshing your browser:

• Firefox, Safari: hold down shift while clicking reload, or press ctrl-shift-R (cmd-shift-R on a Mac)
• Chrome: press shift-F5
• Internet Explorer: hold ctrl while clicking refresh, or press ctrl-F5
• Opera: if you’re still having trouble, clear your cache in Tools > Preferences.

Happy favicon-ing!