Favicons—demystified

Klaus — Tue, 07 Oct 2008 20:45:34 +0000

One of the few things you only come across once in a while is creating a favicon. It only needs to be done once, doesn’t need any ongoing maintenance or debugging. Do it once, done. That’s the reason, at least in my case, that every time I get to the task “Create a favicon for the page”, I try to remember how exactly they need to be created and what to pay attention to. So this is another “remember for next time” article.

There are three ways to generate a favicon:

Photoshop (or any other graphics editing program)
Online tools
On the fly

Photoshop

I say Photoshop here, because that is what I am used to, but essentially you could use any graphics editing program out there. Essentially, when you have your graphic ready, you could just simply save it as a PNG or GIF. Well, you can do that, but that won’t work in Internet Explorer.

To make your favicon display in every browser, you need to create an ICO file. To do that with Photoshop, you can install a plugin that helps you do so.

Installing the plugin

First you need to download the plugin from Telegraphics for whichever version of Photoshop you are using. Extract the ZIP file and move the plugin file into the “File Formats” folder inside your Photoshop Plugins folder:

On Windows, ICOFormat.8bi (the path should be similar to: C:\Program Files\Adobe\Adobe Photoshop CS2\Plug-Ins\File Formats\)
On OS X/Classic, icoformat (CS2/Mac version is ICOFormat_cs2.plugin)

After you have done that quit and relaunch Photoshop, if it’s already running. To check if the plugin is installed correctly, go to Help > About Plug-ins. In this list, the ICO plugin should appear.

Saving your graphic in ICO format

There are some constraints as to which images are eligible to be saved in ICO format:

The ICO format does not allow images more than 255 pixels high or wide.
Only Bitmap, Grey Scale, Indexed and RGB mode images, no more than 8 bits per channel, can be saved as ICO.

If the graphic you created meets those requirements, you can go to “Save” or “Save As…” and select “ICO (Windows Icon) *.ICO” from the list of available file formats. The size of the final image should either be 16×16 or 32×32 pixels, larger images would just need to be scaled down by the browser.

Online tools

Following is a list of tools on the web that make it even easier to create favicons. In principle, you can upload an image file that you already have to the service, which will create a favicon file from that image.

On the fly

Using the data URI scheme, it is possible to include data items, such as an image, inline on a webpage, without actually referencing it as an external resource. The format for that URI scheme is:

data:[][;base64],

The W3C Validator for example makes use of this. If your markup validation fails, the red square displayed in the address bar is referenced as:

In the example from the W3C Validator, the data for the favicon is represented using ASCII encoding, but could also be encoded as base64, which would then look like this in the HTML source:

Referencing it in HTML

When you have your favicon file, place it somewhere on your webspace of your site (it does not have to be the root directory) and then reference the file in HTML (in the head of the document) like so:

If you now go to your site and refresh the browser, you should see your icon showing up in the address bar.

On a sidenote: if you ever wanted to play Defender displayed in a 16×16 pixels favicon, you can do so now. Not necessarily useful for everyday websites, but a great demo of what can be done with favicons.

Resources

Font-families a Web Developer can trust

Klaus — Tue, 18 Mar 2008 19:07:10 +0000

I have worked with designers in the past who come from a very print-centric background. When it comes to print, designers can pick from a sheer endless variety of fonts. But when you want to pick a font for your Web site design, well, the collection gets considerably small. But which font-families are regarded as “safe to use” these days?

Luckily, with CSS, you have the ability to put in some sort of fallback mechanism that comes into play when the first font-family you mention is not available, the user agent picks the next one in the list, and so on. But especially people coming from a print background, they tend to ask which fonts they can use and be almost hundred percent sure that what they see on their screen will look the same to what their users are going to see. Well, what is a hundred percent certain these days…

It is always hard to answer such a question, but thanks to some people out there, there is some statistical data out there to back up whatever your answer might be. The guys at Code Style conducted a survey (which is still ongoing I think) and came up with the following results, nicely broken up into categories:

VisiBone is another provider of a font survey, conducted amongst 800 systems. Their results can be viewed on one big page on their site. WebSiteWorks combines these two surveys and provides conclusions regarding those findings. In a different article, the are talking in more detail about what they consider the 31 of the most commonly encountered fonts from all operating systems. Vivien also provides a nice summary of fonts which are popular with web designers these days.

Conclusion

Taking a look at these results, it becomes quite obvious that if you really want to make sure that you are only using web safe fonts, you are down to a handful number of fonts (with a focus on Windows and Mac).

Font	Windows (in %)	Mac (in %)
Arial	96.5	96.4
Arial Black	97.6	96.1
Comic Sans MS	96.3	92.1
Courier New	96.2	92.2
Georgia	91.3	93.3
Trebuchet MS	95.1	92.5
Verdana	97.0	93.9

If you consider using fonts that are below 90% in the surveys – which is a number that I came up with and I would consider everything above that figure to be web-safe – on any system, you need to provide a “fallback font-family” in your CSS.

So, for example, you are a designer who works on a Mac and really wants to use Monaco as your font of choice on a web project, you need to mention a fallback font in your CSS. Why? If you have a look at the surveys done by Code Style, you can see that almost 97% of Mac users have Monaco installed, but the font is not even listed in the font survey for Windows machines. So, lets say, you choose Tahoma as your second font of choice, you could note that in your CSS as follows:

body {
  font-family: Monaco, Tahoma, sans-serif;
  font-size:12px;
}

So, I guess, when you come from a print background and are used to the luxury of being able to choose every font you want for your design…well, as a Web designer, you need to show a little bit of flexibility when it comes to fonts. That said, of course you can still use your favorite font of choice, if you are inclined to do so, but only if you convert your whole text into a graphic or Flash (which is used for image replacement techniques). Apart from headings (which only get replaced by nicer graphical headings), any part of your body text should never ever be a graphic.

klauskomenda.com » Design