otsukare Thoughts after a day of work

Optimize Favicon, Save Bandwidth

A few days ago, I tested what it meant to not have a favicon. Here are a few rules, that you should follow with regards to your favicon.

give it a URI

A file and a URI are too different things. So give your favicon a generic URI.You will be able to change the format of the file at will. Let’s say your Web site domain name is example.org and you decide to call your favicon whiz. The URI will be:

http://example.org/whiz

Then on the server side you can associate this to a specific content, be a file or a call in a DB. For example

% curl -sI http://example.org/whiz

HTTP/1.1 200 OK
Date: Thu, 11 Aug 2011 19:29:57 GMT
Server: Apache
Content-Location: favicon.png
Last-Modified: Sun, 29 Mar 2009 01:02:08 GMT
Accept-Ranges: bytes
Content-Length: 658
Content-Type: image/png

Nothing forces you to use the magical name favicon.ico for the name of your icons. You can use anything. Really. You just have to name it in your template.

<link rel="shortcut icon" href="/whiz" />

You do not want to create a favicon icon

It’s fine, you do not have to, but you absolutely need to have something return for the URI you created and send 0 bytes for it. You can for example in your filesystem, create a 0 bytes favicon file with the unix command:

touch favicon.ico

Do not forget to define the link in your template. Or you might want to configure Apache with

Redirect 404 /favicon.ico
<Location /favicon.ico>
    ErrorDocument 404 ""
</Location>

Minimize the size of your favicon

Did you try to save your favicon file as a PNG or JPG file instead of the traditional ICO. Optimize it. Even if your file is 2Ko, maybe you can get it down to 600 bytes. Just try. You will save a bit of bandwidth

Expiration date in the future

Often the server will send an Expires HTTP header, that says to the browser try again to download this resource at this date because there might be a fresher document. Well I bet you change your favicon… like never. Give it an expiry date far in the future do not be afraid to give it one or more years. We are setting it to 10 years here.

<Location /favicon.ico>
    ExpiresDefault "access plus 10 years"
</Location>