Optimize Favicon, Save Bandwidth
Thursday, August 11, 2011 8:08:04 PM
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:
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
Create a link in your template to the favicon
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:
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>