Favicon

This is a personal site, for logging the various projects and such that I do. Since it came online last month, I've been working to brand the site to bring it away from default Drupal. Creating a theme helped, but I'm still using default icons. I want some sort of logo to identify things I make as my work, but I'm not sure what. In short: branding a site takes time.

In the meantime, I wrote a short Processing sketch to generate a cool looking favicon, which I may replace after deciding on a logo. The sketch draws a throbber (like the one that YouTube shows as it loads), which is pushed to the left as its drawn. The result is a fading helix.

A static version of the favicon on the left, and the animated version should show on the left side of the address bar or tab.

EDIT: The original looks great against itself, but a black square on a gray tab is terrible. Editing the processing sketch to yield transparency was fruitless, so I went back into GIMP and gave each layer a mask that was a greyscale copy of itself, then inverted all colors. Now the favicon is a black throbber with a transparent background. I much prefer it.

Here's the code.

//Another throbber idea.
//A dot traces a circle,
//while the background and its trace move to the left
int HEIGHT = 32; //Width and height of palete
int WIDTH = 32;
int RADIUS = 10; //Radius of large circle
int THICKNESS = 3; //Thickness of marker
int SPEED = 45; //Number of frames per revolution
float DX = .2; //Speed that the canvas moves at
color OPACITY = color(0, 0, 0, 5);  //Color overlaid each step to fade
color PEN = color(255, 255, 255);

void setup(){
  size(WIDTH, HEIGHT);
  smooth();
  noStroke();
  fill(PEN);
  background(0);
  frameRate(30);
}

void draw(){
  background(0);
  float stop = abs(WIDTH/DX);
  //Move the cursor to the proper side of the screen
  translate(-WIDTH*(DX/abs(DX)), 0);
  for (int i = 0; i<stop; i++) {
    translate(DX, 0);
    blit(i+frameCount);
  }
  if (frameCount > 45) noLoop();
  saveFrame("f##.png");
}
void blit(int state){  
  float x = HEIGHT/2+RADIUS*sin(2*PI*state/SPEED);
  float y = HEIGHT/2+RADIUS*cos(2*PI*state/SPEED);
  fill(OPACITY);
  rect(0, 0, WIDTH, HEIGHT);
  fill(PEN);
  ellipse(x, y, THICKNESS, THICKNESS);
 
}