Create Favicons and iPhone Bookmarks

Webmonkey's bitmapped favicon

Favicons, the little icons you see in the browser toolbar, are an often overlooked element of web design, but they're yet another opportunity to help develop your site's brand. To a certain degree the favicon flies below most visitors' radar, and yet we tend to recognize them when we see them.

Like other subtle forms of advertising, favicons have a way of creeping into your consciousness without your consent. Which is exactly why your site needs one -- how often do you get brand recognition in a 16 pixel square?

And as long as we're building favicons, why not trick out your site with a iPhone/iPod Touch icon? The process is almost identical to favicons, and reaps the same rewards. True, most people probably won't use it, but the few who do will appreciate the effort.

This page is a wiki. Know something we don't? Log in and add it.

Favicons

The term favicon is simply a mashup of "favorites icon" since they were originally intended to make your browser bookmarks easier to navigate. Favicons use an obscure, legacy Windows icon resource file format. A .ico file is a 16x16 pixel bitmap that dates back to early versions of Windows.

Today, modern browsers like Firefox, Safari, Opera and more recent versions of Internet Explorer can handle other image formats like .gif or .png, but for the broadest possible cross-browser compatibility, .ico is still the best option. However, thanks to metatags, it's not hard to serve multiple favicons -- so the file format is up to you.

It used to be that creating a favicon required image editors like Photoshop or GIMP and some plug-ins and command line tools. Thankfully, that's not the case anymore. There are a multitude of applications that convert ordinary images into favicons.

Most use ImageMagick, which comes with many Linux distrobutions. If you're familiar with ImageMagick, you can create the file yourself. Otherwise, online services like degraeve.com and Favicon.cc make it easy.

Creating Favicons

The quality of the image generated by ImageMagick depends on the quality of the image you feed it. For best results start with a lossless format like .png. When you're creating your favicon, keep the graphics simple. Your logo might look clean and simple at full size, but by the time you get it down to a 16 x16 pixels, it may well be a muddled mess.

Try to isolate the dominate element of your brand -- for instance Google's favicon is just a "g," Flickr uses uses simple pink and blue dots and Facebook opts for the ubiquitous "F" on a blue background.

The point is: simplify, but feel free to make your initial graphic a bit bigger. I tend to start with a 32x32 pixel image, bearing in mind that the finished product will inevitably lose some detail.

Using Favicons

Once you've got your 16 x 16 pixel image and are happy with the look, upload the file to the root directory of your web server. It's true that modern browsers can find a favicon just about anywhere you put it, but older versions may have trouble. If supporting older browsers isn't a priority feel free to stick the file wherever you want.

Now we just need to add a metatag to our HTML documents so the browser will know where to find it. Note that this isn't always necessary. Some browsers look for favicon.ico even if you don't tell them too, which is why you may have noticed error messages in your server logs.

The head tag looks like this:

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

You may need to clear your browser's cache to get the new favicon to show up. That's all you need to do.

If you'd like to serve a different image format to more modern browsers, say .png, just add this line below the last one:

<link rel="icon" href="http://yoursite.com/favicon.png" type="image/png">

iPhone icons

As long as we're messing with tiny icons, why not drop in an iPhone icon in case users want to bookmark your page on their iPhone menu? It's just about as easy as creating a favicon and the head tag looks nearly identical.

Apple has instructions on their site for creating a Web Clip icon and specifying an icon for Web Clip, but we have you covered.

Apple recommends using a 57x57 pixel icon, however curious designers who've played with the format discovered that best results seem to come from 60x60 pixel icons at 72dpi. The iPhone will automatically downscale the image, so the size will still be 57 pixels, but you'll get a little bit sharper image starting with the larger dimensions.

Once you've created your 60x60 pixel iPhone icon, upload it to the root directory on your website, just as we did with the favicon file.

The iPhone may discover your image without you needing to tell it where it is it you name the file apple-touch-icon.png, but just to be on the safe side, add this tag to your HTML documents, somewhere in the <head> tag:

<link rel="apple-touch-icon" href="/whatever.jpg"/>

And there you have it. All the tiny icons you can eat.

• This page was last modified 12:43, 19 October 2008.