otsukare Thoughts after a day of work

favicon testing and HTTP 404 missing page

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.