Thursday, July 17th, 2008

Defender of the Favicon

Category: Canvas, Games

Defender Favicon Logo

Mathieu Henri saw Scott Schiller’s generated favicons VU meter and wanted to “push the concept of generated favicons further and pack a thrilling retro shooter in 16×16 pixels using JavaScript, canvas and data: URIs.”

Wow. He went and did it. The entire game runs in the favicon!

DEFENDER of the favicon was done in 3 nights, from start to finish. Each frame of the game is generated on the fly in JavaScript into a 16×16 canvas element, then converted to a 32bits PNG image and used in place of the favicon. The core of the game act as a state machine. Notice a few details such as the pause when this window is not focused, and the resuming and game over transitions.

Obviously since this little game makes use of canvas and the toDataURL method, it does not work in Internet Explorer, and Safari does not seem to support PNG favicons. Prefer Opera or FireFox, although FireFox 3 suffers from garbage collection hick ups when playing in the favicon.

The game logic isn’t really complex but remains true to the original Defender and provides enough action for 16×16 pixels. The original game mechanics would make Defender of the favicon insanely difficult. Therefore a few adjustments were done : none of the enemies fire at you, your Defender got upgraded with a shield, and finally the Landers do not mutate into unstoppable war machines after abducting a humanoid but wander in your general direction.

Defender of the Favicon

Posted by Dion Almaer at 8:06 am

4.4 rating from 37 votes


Comments feed TrackBack URI


Comment by genericallyloud — July 17, 2008

great game, To bad javascript games are easy to cheat with :(

Comment by V1 — July 17, 2008

It’s worth noting the JS-generated favicon doesn’t seem to work in Safari, nor IE (versions with broken data: support, anyway.) Perhaps the community here may have some ideas.. ;)
In Safari at least, I can display a favicon using a data: URI in a <link> within the HTML and Safari will pick this up, but won’t apply the data: URIs generated by javascript. (Maybe bad formatting, MIME type, DOM change isn’t quite right, or ?) .. I’m using XBM for what it’s worth, and p01 is using canvas, exporting to PNG as noted. With data: you should be able to provide several base64-encoded formats – PNG, BMP, XBM etc.. it’s possible Safari doesn’t support PNG nor XBM in favicons, but I haven’t really dug into it yet.
 FWIW it appears that this whole process seems to make Firefox churn a bit doing garbage collection (related thread.)

Comment by Schill — July 17, 2008

Schill: Haven’t dug how to get Safari to update the favicon either. Also now, DEFENDER of the favicon falls back to Canvas display if the user agent do not support toDataURL(), like Safari 3.1.2

Unless IE8 behaves funny like Safari, I see no problem to generate a favicon for it … not using Canvas of course.

Per RFC 2397, base64 encoding is not required. A good old escape( String.fromCharCode.apply( String, yourBytesArray ) ); will work and perform well in case one’s rendering approach does not provide native base64 encoding.

Comment by p01 — July 17, 2008

This is just super cool. People have to much time and to little to do but still I love it. :)

Comment by Spocke — July 17, 2008


Comment by Laurent V. — July 18, 2008

Leave a comment

You must be logged in to post a comment.