Monday, October 23, 2023

Added a favicon, drawn in Pyxel Edit.

Today's Plan

Linking a site icon

I've seen a lot of automatic favicon generator tools online, which generate a variety of sizes for different browsers and mobile devices. I wanted something really simple: just one 16 x 16 pixel image.

I had to ignore the generators and find the linking documentation on my own. I've put the following snippet into my HTML header:

<link rel="icon" href="styles/favicon.png" />

Drawing a site icon

I used Pyxel Edit to draw my icon. I've used this paint program before when working on designing Bitsy games, because it has a good tile painting mode. I wanted a paint program that was simple and optimized for small color palettes.

I had no idea what to do, so I just did a hand-drawn green Q (Q for my name, green for my favorite color). A added a fun fade/trail effect to make it more visible from a distance. I think overall it looks okay.

My icon ended up being 137 bytes.

Task Ideas