Favicon games & the Smart fortwo

The German advertisement company Jung von Matt loved the concept of DEFENDER of the favicon, and contacted me to develop two more games. Favicon games were a perfect match for their campaign for the Smart fortwo and they gave me carte blanche.

This campaign was articulated around the moto Big fun in small space.

Showcase video of the concept and deployment.

The technique

Since the games were to be delivered by third party content providers, they had to be as self contained as possible and make as little assumption about the page that will host them as possible. Each game uses a single JavaScript file and as little images as possible.

Like Defender of the favicon, the games are rendered using a 16×16 pixels canvas and each frame is exported as a 32bits PNG image and the link tag of the favicon is replaced. Unfortunately only Opera and Firefox have the subtle combination of capabilities that make this feat possible.

Details

Notice that all 3 games have transition screens between the different states :

The controls

All games uses the following controls : N to start a game or fire, and WASD or the arrow keys to move around.

Due to the limited resolution of the favicon these controls are not explained in the display of the games. Therefore they have to be communicated somehow on the page hosting them.

And now the games

(play) DEFENDER of the favicon

Refactored version of DEFENDER of the favicon for the Smart fortwo campaign. Press N to start a game or shoot and WASD or the ARROW KEYS to move your DEFENDER over the humanoid city.

(play) ╜PONG

The mandatory remake of PONG. The game mechanics of PONG are quite suitable for 16×16 pixels.

(play) Fav Race

A simple racing game had to be done in a generated favicon using JavaScript, canvas and data: URIs. Considering the limited estate of a favicon, 16×16 pixels, the gameplay had to be very basic. So here comes FAV race, a simple race game where the goal to stay on track of a sinuous road.