How to showcase every project you've ever shipped (favicons as a portfolio)

A favicon is the smallest complete brand. Ten of them in a row is a portfolio that fits in a tweet.

The fastest way to showcase every project you have ever shipped is to stop describing them and start showing their favicons: a favicon is the smallest complete brand a project has, it already exists for anything with a domain, and a row of them reads as a portfolio at a glance. Put the same set of icons in four places — your portfolio page, your GitHub README, your OG image, and one $1 square each on Square Town (square.pov.town), a live favicon wall — and you have a visual index that costs almost nothing to maintain.

TL;DR — four places to show every favicon

Place	Cost	Who sees it	Maintenance
Portfolio page grid	$0	people who already found you	edit an HTML list
GitHub README table	$0	people who found your code	edit Markdown
OG / social image	$0	anyone who sees your link shared	regenerate one PNG
One $1 square per project on Square Town	$1 each, one-time	strangers browsing a live wall	none — but kiss your icons

Why favicons, not screenshots or logos#

A screenshot needs cropping, ages the moment you redesign, and looks bad at thumbnail size. A logo needs to exist as a file, and half your side projects never got one. A favicon is different in three practical ways:

1. It already exists. Anything with a domain and a <link rel="icon"> has one. Google's favicon service and most browsers will fetch it for you by URL. Zero design work per project.
2. It is designed to be tiny. A favicon has to work at 16 px, so it survives being tiled 40 across. That is exactly the constraint a portfolio index needs.
3. It is a brand, not a description. People remember the shape and colour long after they forget the tagline. Ten favicons in a row say "this person ships" faster than ten paragraphs.

The obvious weakness: if a project's favicon is a default framework icon or missing, the index shows that too. On Square Town that literally gets you a clown emoji and a place in the Hall of Clowns until you fix it. Read 16 px favicon design tips first if any of yours are ropey.

Step 1: build the list once#

Everything below is generated from one list. Make a small JSON or YAML file — projects.json — with, per project: name, URL, one-line description, year, status (live / archived / sold), and optionally a manual icon URL if you don't trust auto-fetch. Keep it in the repo of your portfolio site. Every other surface reads from it, so adding project #23 is one line, not four edits.

Two rules that make it a portfolio rather than a dump:

• Include the dead ones. Archived projects show range and honesty. Mark them "archived" and let the icon go grey (a CSS filter: grayscale(1) does the job — the same visual convention Square Town uses for un-kissed icons).
• Sort by something. Newest first is fine. "Most used" is better if you have any numbers.

Step 2: the portfolio page grid#

A grid of favicons at 32–48 px, each linked to the project, with the name on hover or underneath. Twelve to sixty icons fits comfortably on one screen. Practical notes:

• Serve the icon from your own repo, not from the live site — a project you sold or let lapse will otherwise show someone else's icon, or nothing.
• Put the description in a title attribute and visible text for keyboard and screen-reader users; hover-only is not enough.
• Group by status if you have more than ~20: Live, Archived, Sold. Grey out archived.
• If you want it to feel alive, add the launch year in small text. A wall of icons spanning 2016–2026 tells the story on its own.

If your portfolio is a static site, generate this from projects.json at build time. If it's a single HTML file, a 30-line script that turns the JSON into <a><img></a> pairs is plenty.

Step 3: the GitHub README table#

Your GitHub profile README is read by a different audience — people who found your code, not your site. A table with the favicon in the first column works well there because GitHub renders images inline and keeps them small:

| | Project | What it is | Since |
|---|---|---|---|
| ![](https://example.com/favicon.ico) | [Example](https://example.com) | one-line description | 2024 |

Same JSON, second output. Add a "status" column if you keep archived projects. Pin the README; it is the one page on GitHub that everyone visiting your profile sees.

Step 4: one OG image with all of them#

When someone shares your portfolio URL, the social card is the whole pitch. Render an OG image (1200×630) that is your favicon grid on a plain background with your name. It's the same list a third time, rasterised. Regenerate it whenever projects.json changes. This is the surface people underrate: a card with 30 recognisable little icons gets clicked more than a card with your face and a tagline, and it costs nothing.

Step 5: a $1 square per project on Square Town, as a live public index#

The three surfaces above are all yours, and they get the traffic your pages get. The fourth surface is somebody else's: a public favicon wall where each project gets its own square.

On Square Town, a square is 1×1, costs $1 one-time (Stripe, card), and shows the favicon of whatever URL you paste — no account, no upload, no subscription. You click an empty cell to pick your spot. So the mechanic is: for each project, paste the URL, pick a cell, pay $1. Ten projects, ten dollars, ten squares. Full rules are on How Square Town works — the complete rulebook.

What makes it an index rather than ten scattered ads is where you put them.

Adjacent cells are a neighbourhood#

Because you pick the exact cell, you can put your projects next to each other: a 2×5 block, an L-shape, a row along one edge of the live area. Visually that reads as one owner's neighbourhood — a portfolio on the wall. Anyone who clicks one of your icons and looks around sees the others.

Two honest caveats. First, any square can be evicted by someone paying double what you paid ($2 for a $1 square). Your block is not guaranteed to stay intact; someone can buy a cell out of the middle of it. Second, the wall grows outward from the centre in rings as it fills (16×16 live at launch, +8 cells each side every time it's 70 % full), so a spot at the edge today is not at the edge next month. How to pick a good square covers the trade-offs; the summary is cluster, but don't over-plan.

Each square is a separate counted link#

Every square has its own deed page showing views (someone opened its card), clicks (someone clicked through — via /go/:id, so it's counted server-side) and kisses. Outbound clicks are tagged utm_source=square.pov.town, so each project's own analytics sees the wall as a source. For $5 one-time per square you get per-day view and click charts on that deed. Which brings us to the interesting bit.

The click-tower angle: your portfolio, ranked by real interest#

Square Town's wall is a three.js scene. Top-down it's a flat 2D wall; ctrl+drag (two-finger drag on touch) tilts it into 3D, and in 3D every favicon is a box whose height is its click count, tinted with the icon's dominant colour. Square Town calls these click towers.

For a multi-project index this is genuinely useful, not just decorative: tilt the wall and your neighbourhood becomes a bar chart of which projects strangers actually clicked. A project with zero clicks is a flat tile; a project people keep hitting is a tower. That's a piece of information none of your own surfaces give you — your portfolio page can't tell you which of your projects a stranger would pick, because strangers mostly don't visit it. Ten squares on a wall that other people browse is a cheap, permanent A/B test of your project icons and names. See why the wall is 3D for how the towers work.

The plain-language warning: this is a niche audience — people who look at favicon walls — and there are no guaranteed traffic numbers. It is not an SEO play; the wall is a canvas and clicks are redirects, so no link equity, no "dofollow", nothing to put in a backlink report. What you get is visibility to that niche, a showcase, and per-project counts.

Step 6: keep the index alive#

An index that decays is worse than no index. Three habits:

1. One source file. projects.json feeds the page, the README and the OG image. If you edit anything else by hand you will drift within a month.
2. Re-check favicons quarterly. Sites you archived may now 404 their icon. Store a copy.
3. Kiss your squares. On Square Town, an icon not kissed for 90 days fades to grayscale (still yours, still linked, just 💔). Anyone can kiss any icon for free — click it, press 💋 — and kisses are counted publicly. Open the wall now and then, kiss your row, glance at the towers. That's the whole maintenance. Kiss the icon, explained has the reasoning behind the mechanic.

A worked example, twelve projects#

Say you have twelve: eight live, three archived, one sold. projects.json has twelve entries. Your portfolio page shows a 6×2 grid, archived ones grey. Your README table has twelve rows with icons. Your OG image is the same 6×2 grid on a plain background. On Square Town you buy a 4×3 block of $1 squares for the eight live ones plus the four you're proudest of that are archived (the sold one keeps its own owner's icon — leave it out). Total: $12, once. Then you tilt the wall next month and discover the tiny CLI tool you never promoted is the tallest tower in your block. That is the kind of thing this is for.

More on the "many projects, one dollar each" audience at Square Town for developers with many side projects: $1 per favicon, and a longer list of surfaces in how to promote 10 side projects at once.

FAQ#

Why use favicons instead of screenshots to showcase projects?#

Favicons already exist for anything with a domain, are designed to work at 16 px, and read as a brand rather than a description. Screenshots age, need cropping and look bad as thumbnails; logos often don't exist for side projects.

How do I show all my side projects in one place for free?#

Keep one projects.json, and generate three surfaces from it: a favicon grid on your portfolio page, a table with icons in your GitHub profile README, and an OG image of the same grid so shared links show the whole set.

What does it cost to put every project on Square Town?#

$1 per square, one-time, one project per square, paid via Stripe. Ten projects cost $10. There are no accounts or subscriptions; a deed URL is your proof of ownership per square, and $5 one-time per square unlocks per-day view and click charts.

Can I put my projects next to each other on Square Town?#

Yes. You pick the exact empty cell for each square, so adjacent cells form a visible neighbourhood. Any square can be evicted by someone paying double what you paid, so a block isn't guaranteed to stay intact.

What is a click tower?#

On Square Town's 3D view (ctrl+drag, or two-finger drag on touch), each favicon is a box whose height equals its click count, tinted with the icon's dominant colour. Zero clicks is a flat tile. For a portfolio block it works as a bar chart of which projects strangers actually clicked.

Does a square on Square Town help my SEO or give backlinks?#

No. The wall is a WebGL canvas and clicks go through a /go/:id redirect. There is no link equity. The value is visibility to a niche audience, the showcase, the game and the per-square click counts.

What happens to my squares if I stop paying attention?#

They stay yours; there's no expiry or renewal. But an icon not kissed for 90 days fades to grayscale, and anyone can evict any square by paying double. Kissing is free and takes one click.