Skip over navigation

Faviconography

By on Aug 4, 2008 in Brand and Identity Design, Web Design, Web Engineering

What are favicons? Why should you use them? How do you make them? Where do they go? What is the meaning of life? Read on, as I gamely tackle these vexing questions. Well, the last one I can answer now. It is of course, forty two.

What are they?

Favicons are those little, teensy icons that show up in the address bar of your browser, like ours:
Loud Dog's favicon

Why use them?

You should use them to give your website that extra bit of spit and polish. It’s also helpful to have something that visually stands out and reminds your visitors just how remarkable your website is when they add it to their bookmarks or favorites.

Designing your favicon.

A favicon is tiny, only 16×16 pixels square, so depending upon the design and complexity of your logo, you may need to recreate, crop, abstract or pixel push your existing artwork to make sure it’s legible.

Remember while you’re designing that your goal is to convey your website’s brand. There are many different paths — I’ve seen organizations use their entire logo, an abstracted part of their logo, or just a design element from the website.

For our website, the Dog mark was the obvious choice, though it needed a little help to fit within 16 pixels and still be legible.

As another example, let’s take a look at the EM-Assist website. We started with their logo:

EM-Assist logo

Their entire logo is far to wide to fit into the 16×16 pixel area and retain any sense of legibility, so we had to come up with a different solution. We explored two basic paths: a two-color “flag” based on their website design, and a modified version of their logotype. The flag was just not very satisfying, but by removing “Assist” and extending the M all the way down, we developed a nice solution. Additionally, we explored different heights (here’s a tall version, zoomed in 1600%):

EMAssist icon pixel level

But ended up going with a more traditional, proportional icon:

EMAssist final favicon

Creating your favicon.

As with most things web-related, you need to jump through multiple hoops to make your favicon display correctly on all browsers and platforms, and the first hoop is making the icon itself. Microsoft first developed the idea of a favicon, and naturally used their existing file format, a raster format used for all Windows icons. When the standards community took over the idea, they specified that it should use format, which works across all browsers and platforms. Though most browsers and platforms now support the format, our recommendation is to make both.

There are a variety of ways to make an file, and if you’re familiar with Photoshop or Paint Shop Pro here’s one of the easiest methods.

One. Create your icon as a .

Two. Download and install the free ICO (Windows Icon) Format plug-in for Photoshop.

Three. Open Photoshop and create a new document with the following settings (I’m using a preset named “Favicon” I’ve saved in Photoshop):

Width: 16px
Height: 16px
Resolution: 72dpi
Color Mode: RGB 8bit
Background Contents: Transparent
Color Profile: Adobe RGB (1998) or equivalent
Pixel Aspect Ratio: Square

Photoshop favicon settings

Four. Import your icon.

Five. Change to indexed color (see the screenshot): Image > Mode > Indexed Color:

Favicon Indexed Color

Six. Save As… ICO (Windows Icon). Name the file either favicon.ico for a generic site wide favicon, or a custom name, like myawesomeicon.ico if you’d like to have discrete favicons for different sections or pages of your site.

Transparency

It can also be hip to use transparent favicons rather than the plain ole, vanilla, white matte favicons of yore. Here’s how to do it in Photoshop with the plug in:

Follow the steps above
Export your icon using the Gif89a plu-in or Photoshop’s “Save for Web” and make the background color your “knockout”, or transparent color
Save the file as a GIF
Re-open the file in Photoshop and simply “Save As” an ICO and, that’s it. Your favicon is now transparent. Abracapocus!

Installing your favicon.

Now that you have two icons — a PNG version and an ICO version — it’s time to install them on your website.

One. Use whatever FTP client or web wizard you prefer to upload the favicons to the root level of your website, the main directory in which your site’s index page (homepage) resides.

Two. Include the icon in your webpages.

As usual, we need multiple versions to cover IE and other browsers. IE uses the following code:

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

This code won’t work on standards-compliant browsers (two words in the attribute are a no-no). Instead, use:

<link rel="icon" type="image/png" href="/path/image.png">

or, if you’re only using an file:

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

If your favicon has a custom name, it helps to include the full path to your domain:

<link rel="icon" href="http://www.my-domain.com/myawesomeicon.ico" type="image/x-icon" />

Still More Favicon Info

There are other methods for creating favicons ranging from web based wizards to professional icon development tools like IconBuilder. You may also decide it necessary to create a favicon package which bundles the standard 16×16 icon with 8, 16 and 32 bit versions of itself and/or 8, 16 and 32 bit 32x32pixel versions. The advantage of making these packages with the larger sized icons is that your favicon will render with more detail if your users decide to drag it to their desktop to use as a shortcut. Of course, this increases the file size to upwards of 9.9kb a package which will add a few more seconds of download time for dial-up users and negligible fractions of a second for broadband users.

That’s it! Happy fun-time favicons for everyone!

Hey! This wasn't written by a herd of yaks! It was written by , who does awesome work at Loud Dog, a digital branding firm in San Francisco that helps businesses express themselves authentically via identities, websites, and marketing collateral.

If you want us to do awesome work for you, if you have a question, or if you're just feeling lonely and want to chat, we want to hear from you!

Get in touch

Leave a Reply

Your email address will not be published. Required fields are marked *