Django favicon

Wednesday 19 September 2007

A recent thread on Django Users, Visual recognition of Django website is about the need for a favicon for the Django web site. The thread follows a typical path, starting with a reasonable request, followed by a smattering of debate about whether it is in fact a good idea. A few people posted proposed favicon files based on the d in the Django logo (including one with a Makefile!)

Making a good 16×16 pixel icon is tough. Here's how I made one that avoids some of the smearing. I started with the Django logo, took the Dj (in honor of DJ Ango!) from it, and placed them in a square. The color is a very dark green that would look black at such small sizes, so I lightened it to a green borrowed from one of the Django badges:

Dj from Django

If I simply scale this image down to 16×16, it looks like this:

Dj from Django

The letters here are blurred, and we can do better. To see why the letters are blurred, go back to the full-size square, and turn on the grid, setting it to one-sixteenth the width of the square. The grid now represents the 16×16 pixels of the final actual-size icon:

Dj square with grid overlaid

Most of the edges of the letters don't fall neatly onto the pixels defined by the grid. As a result, when the image is scaled down, the edges are blurred. To prevent this, we have to move the letters' edges so that they line up better with the grid. This is what font renderers do for you, and a great deal of work has gone into type hinting that can automatically adjust the curves of letters to align with whatever pixel grid they are being rendered onto.

To improve the icon, I did this by hand. Using the grid as a guide, I used the lasso tool to select parts of letters and move them until they fit better onto the grid:

Dj adjusted to the grid.

This changed all sorts of details of the letters, including the height, the thickness of the stems, and so on, but kept the overall feel of the logo. (here it is if you want it.) Generally, I haven't worried too much about the curvy parts: remember we're going to be scaling down to 16×16 at the end anyway, so all the mistakes will be fuzzed away. I added the white dots in the corner pixels to get a slight rounded look to the corners when they get rendered down. The final icon:

Finished favicon

The two favicons side-by-side, old and new:

Naive faviconFinished favicon

Is it better? I think so.


Paul Downs 9:37 AM on 20 Sep 2007

Why not move the "d" one grid space to the left, so that the letters are balanced in the square?

mikey 10:20 AM on 20 Sep 2007

I would remove three pixel from each corner to show the rounded edge more. This will work visually because the letter forms nicely rounded as well, in sympathy.

Ned Batchelder 6:57 PM on 20 Sep 2007

@Paul: I tried it that way also, and I think I like it better like this. It centers the pair in the square, and the d deserves more prominence as the initial letter anyway.

@Mikey: you are right, my attempt at rounded corners doesn't quite work.

Paul Downs 1:03 PM on 21 Sep 2007

They are not centered on the square, only a rectangle bounding their horizontal perimeters is centered on the square. That's what bothers me. If you look at the amount of white, it's clearly biased to the right of the square. But if you consider the icon to be an element of a construction including the url, then the right bias makes more sense - it leads your eyes to the right, to the payoff.


Christos Trochalakis 5:18 PM on 21 Sep 2007

Nice work Ned!

I 'd like to play a little bit with the colors so we can make an icon for the greek Django website! Could you upload the second picture?

Thanks :)

Ned Batchelder 8:10 PM on 21 Sep 2007

@Christos: I've added a link to the warped image file. Enjoy!

Christos Trochalakis 1:51 AM on 22 Sep 2007

You can see the result here
Looks nice!

Add a comment:

Ignore this:
not displayed and no spam.
Leave this empty:
not searched.
Name and either email or www are required.
Don't put anything here:
Leave this empty:
URLs auto-link and some tags are allowed: <a><b><i><p><br><pre>.