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.