Tourist information

Welcome to the domain of hatred and evilness happiness and lollipops belonging to me, Cyan, cynic, main propagator for the death of Jeremy Wilken and general evil person who’s very much in love with a neologist. It’s awesome, really.

I write about two main subjects: what's going on in my life (duh, it’s a blog) and web design. I’m regularly chucking out useful stuff, so it is actually worth your time. Promise.

There’s generally a relaxed attitude around here. Stick around, have a cocktail...just don’t touch the candy.

No, really. Don't.

Posted: 4th January 2009

Favicons: You’re Doing Them Wrong

Categorized: common errors, html & css, images, web design, web development.

Favicons have been with us from the start of the Internet as we know it, but the vast majority of web authors are still using them wrong. Why? Our little friend the MIME is here to help.

Mime Types and the Internet

Officially Internet media type nowadays, the Mime type originated as a way of signifying additional files on email served via SMTP. Mime types are made up of two pieces of information: a type and then a subtype. Additionally, a charset parameter may inform of the character set of the file.

You will have used these before: when writing a HTML document, you’ve always written something like this:

<meta http-equiv="Content-Type"
  content="text/html; charset=utf-8"/>

The Mime type is the text/html bit.

Usually, when a web author links to a favicon on his page, he might define it as image/x-icon.

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

While this is strictly correct HTML, it is telling the browser that it is linking to a nonstandard, ICO image.

The problem is that ICO images have been standardized and registered with the IANA for 6 years, and you really have to start paying them their dues.

The correct Mime type for ICO images is image/vnd.microsoft.icon. Thus, a fully correct rendition of a link to a favicon would be something like this:

<link rel="shortcut icon"
  href="/favicon.ico" type="image/vnd.microsoft.icon"/>

Respect to the Mimes, people!