Most developer portfolios have a generic favicon. That grey browser icon that appears when you put nothing. It's the first symptom that someone didn't finish thinking about their identity — and clients notice before reading a single line of your work.
Sixteen by sixteen pixels. It seems insignificant. It isn't.
Less is more — and three brands prove it
Netflix started in 2010 with the full name in red on a red square. In 2013 they refined it. In 2014 they put it on white. In 2016 they made the right call: they threw everything out and kept the "N". One letter, black and red, absolute high contrast. It works at 16px, it works at 512px, it works in any context.
Instagram took the opposite path and then corrected it. In 2010, a Polaroid camera with flash, lens, plastic details and a rainbow. Beautiful as an illustration, useless as an icon at 16px. In 2016 they threw out all that realism and kept a camera silhouette on a gradient. The rainbow disappeared. The public reaction was immediate rejection — and yet the decision was right. What worked in 2010 didn't work in 2016. What works in 2016 may not work in 2026.
The lesson Netflix and Instagram share is the same: the icon design process is an elimination process. You start with too much and remove until you can't remove anything else without losing recognition.
Audiences don't like abrupt changes. We saw it with Instagram when they replaced the detailed camera with the gradient — people protested for weeks. But they adapted, because the new icon was objectively better for the context it lived in. The mistake isn't changing. The mistake is changing without criteria.
The decisions nobody tells you about
Before opening any tool, there are three questions worth asking:
What shape?
Straight square, rounded square, circle. At 16px each communicates something different. The straight square is more technical, more serious. The rounded one is friendlier, more product-like. The circle is the hardest to use well — the content has to work within that geometric constraint. Don't choose the shape for aesthetics but for what you want to communicate.
What content?
An initial works when it's distinctive enough. A monogram works when the letters combine well visually. A symbol works when you already have one that represents you. A full logotype never works at 16px — it becomes noise. The rule is simple: if you can't recognize it at 16px, it doesn't work.
What colors?
Your favicon will appear on both light and dark browser tabs. What works on a white background can completely disappear in dark mode. The simplest solution is absolute high contrast — black and white. The more complete solution is designing two versions and declaring them in the HTML with the media attribute. If you're only going to make one, make it dark on light or light on dark, no intermediate greys.
The tools I actually use
realfavicongenerator.net — the only one that matters
Every other tool on the internet generates a single .ico file and calls it a day. This one generates the full set — .ico, Apple Touch Icon for iOS, Android Chrome manifest, Windows tile, Safari pinned tab — and shows you a live preview of how your favicon looks on every platform before downloading anything. It also writes the HTML tags for you. Use this, ignore the rest.
favicon.io — for typographic concepts
If your favicon is a letter, a monogram or an emoji, this is the fastest path. Upload a letter, pick a font and colors, and in thirty seconds you have a proper .ico ready. No Photoshop, no plugins.
Photoshop + Telegraphics plugin — for full control
Photoshop doesn't support .ico natively. The Telegraphics plugin (telegraphics.com.au/sw) adds that export option. Design at 512×512, export as .ico with multiple sizes embedded (16, 32, 48px). This is the professional path — slower, but the result is entirely yours.
Figma — for designing before exporting
If you don't use Photoshop, Figma is the best alternative. Frame at 512×512, export as PNG and then convert with realfavicongenerator. The advantage is you can make variants quickly and compare before committing to one.
IconKitchen — for Android and iOS specifically
icon.kitchen by Google generates adaptive icons for Android and iOS with the exact specifications each operating system requires. Useful if your site works as a PWA or if you want the icon to look right when someone adds it to their phone's home screen.
In Next.js the implementation is three files
No FTP, no editing HTML by hand. Drop these in /public:
favicon.ico
apple-touch-icon.png (180×180)
favicon-32x32.pngAnd in the metadata object in your layout.tsx:
ts
icons: { icon: "/favicon-32x32.png", apple: "/apple-touch-icon.png", }Next.js handles the rest.