My Friends Call Me Farha
← WRITING INDEX
WRITING / FIELD NOTE / W-010

What the Favicon Revealed

A full wordmark became unreadable in a browser tab. The original identity system already contained the answer: a compact F_ mark.

The site was using its full wordmark as a favicon.

At header size, the mark has room for its lettering and the line above it. In a browser tab, the same composition has to fit into a few pixels. The file still loads, but much of what makes the identity recognizable disappears.

That was the problem with the favicon: the wrong version of the identity was doing the job.

The answer was already in the system

The original SYSTEM BOOT identity package included a compact F_ mark: phosphor green on a near-black square.

It had the right amount of information for the space. A letter and an underscore could remain recognizable where the full name could not.

Finding it again was a useful reminder that an identity system needs more than its primary lockup. A compact mark has a job of its own. It should be assessed at the size and in the context where it will be used.

Enlarging a favicon in a presentation makes it easier to discuss the shape. Looking at it at actual size tells you whether it works.

SCALE / ACTUAL CSS PIXELS

FULL WORDMARK

16 × 16px
32 × 32px
48 × 48px

COMPACT F_

16 × 16px
32 × 32px
48 × 48px

Both marks occupy the same square at each size. Browser zoom and display density affect their physical size.

Small files still have dependencies

The original compact SVG used live text. That makes the drawing dependent on a font being available when the file is rendered.

The updated favicon converts the lettering to vector outlines using the site's bundled bold font. It keeps the original composition and colors while removing that rendering dependency.

An SVG serves browsers that support it. A multi-size ICO provides a fallback. Matching touch and app icons keep the compact identity consistent when the site appears outside a tab.

There is also a less visible part of the change: updating the declarations across the site and accounting for cached copies. A correct new asset is only useful if the browser actually requests it.

Check the smallest version

This was a small correction, but a precise one. The site did not need a new visual direction. It needed an existing part of its identity applied in the right place.

I want to carry that check into other design decisions: inspect the thing where it will actually appear. Read the label on a phone. Look at the image in its container. Test the mark in the tab.

The smallest version often makes the decision clearest.

ESC LAUNCHER · / COMMANDCapture. Process. Repeat. · v0.9.0-rc.22