Pixel editing a favicon with Pixelmator

I wanted to add a favicon to Datasette, using a PNG image served from /favicon.ico as suggested in this article by Adam Johnson.

Initially I created a 128x128 icon image (using Figma and exporting as PNG) and allowed the browsers to resize it down to 32x32 - but I wasn't satisfied with the result:

Screenshot showing my resized icon in Firefox, Chrome and Safari

I decided to use Pixelmator on my Mac (since I already have a paid license) to hand-edit the icon at 32x32 to see if I could get better results.

Pixelmator's default interface doesn't include a tool for setting individual pixels - even at 1px size the default brushes affect nearby pixels too.

Thanks to Enabling a Pixel Brush in Pixelmator to Draw Pixel Art on Mac on OSXDaily I found the preference pane (in Preferences -> Tools -> Paintig) that lets you drag a pixel editing tool onto the tool palette.

With that added, I could bump up the zoom level on a brand new 32x32 image and start editing pixels.

I used the I keyboard shortcut to switch to the eyedropper to select colours, and the P keyboard shortcut to switch back to the pixel tool to edit the pixels.

I couldn't figure out how to delete individual pixels (in order to achieve a transparent PNG background) so I used the eraser tool to fuzzy-erase areas, then redrew the pixels by hand with the pixel tool.

Screenshot of the Pixelmator interface

I exported the finished image as a PNG, then used https://squoosh.app/ to shrink it down to just 208 bytes.

Screenshot of the Squoosh interface - I used effort=3 and colors=8

The end result, comparing the browser-resized icon to my hand-edited one:

The one I let the browser resize has some fuzzy edges. The hand-edited one does not.

Created 2022-01-20T11:15:41-08:00, updated 2022-01-20T11:20:59-08:00 · History · Edit