karlcow

Opening The Web one bug at a time

Subscribe to RSS feed

Posts tagged with "favicon"

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:

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>

2 comments

favicon testing and HTTP 404 missing page

Monday, August 8, 2011 4:13:59 PM

, , ,

Surprised by a comment from Pascale about an article about favicon creating more traffic on web sites by downloading the 404 resource answer, when it is not defined, I wanted to test. To do that, I have decided to test it locally on my own laptop. It is quite easy and it helps to really control all aspects of the experiment. I have created a local Web server with the favicon.test.site domain name for testing a few things about favicons and browsers.

Setup

Create a directory favicon

mkdir -p ~/Sites/favicon
cd ~/Sites/favicon

Edit the serveur configuration. We put a Error 404 directive and an index file. 

mate /private/etc/apache2/extra/httpd-vhosts.conf

Note that the path is dependent of my system here. 

<VirtualHost *:80>
    DocumentRoot "/Users/karl/Sites/favicon"
    ServerName favicon.test.site
    ErrorLog "/Users/karl/Sites/favicon/favicon-error_log"
    CustomLog "/Users/karl/Sites/favicon/favicon-access_log" combined
    ErrorDocument 404 /missing.html
    DirectoryIndex index.html
</VirtualHost>

We need to add the domain name for resolving locally.

mate /etc/hosts

127.0.0.1   favicon.test.site

We can start the Apache server

% sudo apachectl start
Password:

if your server was already running, you can do 

% sudo apachectl graceful
Password:


% ls -l .
total 0
-rw-r--r--  1 root  karl     0B  8 aoû 10:55:52 2011 favicon-access_log
-rw-r--r--  1 root  karl     0B  8 aoû 10:55:52 2011 favicon-error_log

We can create a simple index file

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>A simple page</title>
</head>
<body>
    <h1>Hello</h1>
</body>
</html>

Testing Access to favicons

Let’s access the http://favicon.test.site/ with Opera Next 12.00 pre-alpha Révision 1020. We got in the logs

Access

127.0.0.1 - - [08/Aug/2011:11:33:36 -0400] "GET / HTTP/1.1" 200 140 "-" "Opera/9.80 (Macintosh; Intel Mac OS X 10.6.8; U; Edition Next; fr) Presto/2.9.181 Version/12.00"
127.0.0.1 - - [08/Aug/2011:11:33:36 -0400] "GET /favicon.ico HTTP/1.1" 404 - "http://favicon.test.site/" "Opera/9.80 (Macintosh; Intel Mac OS X 10.6.8; U; Edition Next; fr) Presto/2.9.181 Version/12.00"

Error

[Mon Aug 08 11:33:36 2011] [error] [client 127.0.0.1] File does not exist: /Users/karl/Sites/favicon/favicon.ico, referer: http://favicon.test.site/
[Mon Aug 08 11:33:36 2011] [error] [client 127.0.0.1] File does not exist: /Users/karl/Sites/favicon/missing.html, referer: http://favicon.test.site/

In between each test, I erase the log files and restart the server

% sudo apachectl stop
% rm -rf favicon*log
% sudo apachectl start

With Safari (WebKit) Version 5.0.5 (6533.21.1)

Access 

127.0.0.1 - - [08/Aug/2011:11:14:31 -0400] "GET / HTTP/1.1" 200 900 "-" "Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; fr-fr) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1"
127.0.0.1 - - [08/Aug/2011:11:14:32 -0400] "GET /favicon.ico HTTP/1.1" 404 - "http://favicon.test.site/" "Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; fr-fr) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1"

Error

[Mon Aug 08 11:14:32 2011] [error] [client 127.0.0.1] File does not exist: /Users/karl/Sites/favicon/favicon.ico, referer: http://favicon.test.site/
[Mon Aug 08 11:14:32 2011] [error] [client 127.0.0.1] File does not exist: /Users/karl/Sites/favicon/missing.html, referer: http://favicon.test.site/

With firefox 4.0.1

Access

127.0.0.1 - - [08/Aug/2011:11:20:15 -0400] "GET / HTTP/1.1" 200 900 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:2.0.1) Gecko/20100101 Firefox/4.0.1"

Error

No error - no request of favicon

It means that IE, WebKit and Opera will create an automatic request for your server. If the favicon doesn’t exist, it will then redirect the request to your configured 404 page. If this page is heavy, for any requests on your Web site you will pay a favicon tax.

Let’s add a favicon link in the markup with a different name ugly

<link rel="icon" href="/ugly">

This time Firefox is trying to get the favicon as we can see in the access log.

127.0.0.1 - - [08/Aug/2011:11:55:37 -0400] "GET /ugly HTTP/1.1" 404 - "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:5.0) Gecko/20100101 Firefox/5.0"

And generates obviously a request to the 404 resource.

[Mon Aug 08 11:55:37 2011] [error] [client 127.0.0.1] File does not exist: /Users/karl/Sites/favicon/ugly
[Mon Aug 08 11:55:37 2011] [error] [client 127.0.0.1] File does not exist: /Users/karl/Sites/favicon/missing.html

All browsers now behave the same. Let’s try to create a 0 byte ugly favicon.

% touch ugly
% ls -l ugly 
-rw-r--r--  1 karl  karl     0B  8 aoû 11:58:54 2011 ugly

Opera 

127.0.0.1 - - [08/Aug/2011:12:01:06 -0400] "GET / HTTP/1.1" 200 175 "-" "Opera/9.80 (Macintosh; Intel Mac OS X 10.6.8; U; Edition Next; fr) Presto/2.9.181 Version/12.00"
127.0.0.1 - - [08/Aug/2011:12:01:06 -0400] "GET /ugly HTTP/1.1" 200 - "http://favicon.test.site/" "Opera/9.80 (Macintosh; Intel Mac OS X 10.6.8; U; Edition Next; fr) Presto/2.9.181 Version/12.00"

Safari

127.0.0.1 - - [08/Aug/2011:12:01:46 -0400] "GET / HTTP/1.1" 200 175 "-" "Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; fr-fr) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1"
127.0.0.1 - - [08/Aug/2011:12:01:46 -0400] "GET /ugly HTTP/1.1" 200 - "http://favicon.test.site/" "Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; fr-fr) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1"

Firefox

127.0.0.1 - - [08/Aug/2011:12:03:40 -0400] "GET / HTTP/1.1" 200 175 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:5.0) Gecko/20100101 Firefox/5.0"
127.0.0.1 - - [08/Aug/2011:12:03:40 -0400] "GET /ugly HTTP/1.1" 200 - "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:5.0) Gecko/20100101 Firefox/5.0"

HTTP headers et Caching

% curl -sI http://favicon.test.site/
HTTP/1.1 200 OK
Date: Mon, 08 Aug 2011 16:04:28 GMT
Server: Apache/2.2.17 (Unix) mod_ssl/2.2.17 OpenSSL/0.9.8r DAV/2
Last-Modified: Mon, 08 Aug 2011 15:55:20 GMT
ETag: "ccd9fb-af-4aa0079618a00"
Accept-Ranges: bytes
Content-Length: 175
Content-Type: text/html

% curl -sI http://favicon.test.site/ugly
HTTP/1.1 200 OK
Date: Mon, 08 Aug 2011 16:05:02 GMT
Server: Apache/2.2.17 (Unix) mod_ssl/2.2.17 OpenSSL/0.9.8r DAV/2
Last-Modified: Mon, 08 Aug 2011 15:58:54 GMT
ETag: "ccda9f-0-4aa008622eb80"
Accept-Ranges: bytes
Content-Type: text/plain

I made sure the ETAG and the dates were not changing at all.

Safari and Opera on a manual reload (toolbar icon) are reloading the two resources URIs and favicon with a 200. (That is bad)

Firefox just tries the index and the server replies with the right information. 304 Not Modified. Firefox doesn’t even try to request the favicon again.

127.0.0.1 - - [08/Aug/2011:12:07:31 -0400] "GET / HTTP/1.1" 304 - "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:5.0) Gecko/20100101 Firefox/5.0"

Conclusions

If you do not want a favicon for your Web site, you are better to create a 0 byte file or to configure your server in a way that will send back minimal HTTP headers.

I haven’t tried to see what would do browsers in face of 410 Gone for this resource. To test in the future.

No comments