A favicon is the small icon that appears in your browser tab, bookmarks, and on your phone’s home screen when you save a site. It’s tiny — often just 16×16 pixels — but it’s the most repeated piece of visual identity your site has. Every open tab is a mini billboard.
My favicon was a blurry headshot. I finally replaced it — and used Claude Code to do it, treating it less like an autocomplete tool and more like a collaborator I could think out loud with.
My old process was: design something in Figma, export a PNG, drop it into favicon.io to generate all the sizes and the webmanifest, done. It works fine. But I wanted to try doing the whole thing in code — design included.
Here’s the full process.
Round 1
I asked for a mockup page showing six different concepts, each rendered at 128px, 48px, 32px, and 16px with a browser tab simulation. The size range mattered — favicons that look good at 128px often fall apart at 16px.
Round 1 — First concepts
Close — but none of them felt like mine.
Nothing landed. The monogram was too safe, the node graph too abstract, the rest too generic. Good for scoping the space, not much else.
The headshot detour
What if it was just my face? Claude flagged that photos go muddy at 16px, but we built it anyway to see.
What about a photo?
The 64px versions look great. At 16px — where a favicon actually lives — they're unrecognizable blobs. Strike three.
The larger sizes are fine. At 16px it’s unreadable. Confirmed and moved on.
Round 2
I suggested stacking my name as a 2×2 letter block — AD over AM. We built it, then ran through four color treatments.
Iterating on the ADAM block
All white was flat. Both A’s in indigo was too busy. Top row indigo was close. First A only in indigo was right — one accent, not two.
We also tried stretching both rows to the same width using SVG’s textLength. It looked distorted. Reverted immediately.
Shipping it
Once the direction was set, Claude wrote a Puppeteer script that loaded the actual font, rendered the mark at five sizes, and wrote the PNGs to public/. We also generated an SVG for modern browsers and fixed a broken webmanifest in the process.
On working this way
I didn’t hand off a brief and wait. I reacted to output, redirected, changed my mind. Claude surfaced things I hadn’t thought to ask for (the browser tab simulation, the 16px photo problem) and ran the failed experiment fast enough that it cost nothing.
What I still had to do was know when something was right. That part didn’t change.