Icon Studio — Build a Logo & Favicon in the Browser, Without a CDN

TL;DR — Icon Studio combines a background shape (rounded square, circle, square), an icon from one of four bundled open-source libraries (Font Awesome, Lucide, Simple Icons, Tabler), and two colors into a finished logo/favicon. Rendering runs on the Canvas API, the icons live in the JavaScript bundle from build time, and there's no CDN request at runtime. The export delivers a ZIP with all common favicon and PWA sizes plus a manifest-snippet.json. If you need a complete platform bundle (iOS AppIcon.appiconset, Android mipmap), chain the result into the PWA Generator.

Why browser-local icon generation finally makes sense in 2026

For ten years, the standard answer to "I need a favicon" was either Photoshop (too heavy, account required), Figma (cloud, account required), or one of the online favicon tools. The latter are usually great to use — but from login to export they load hundreds of external tracking and asset pixels. If you try five favicon iterations on the couch over the weekend, you transmit your session behavior five times to three different analytics providers. That was still acceptable in 2016, because no alternative existed. In 2026 it no longer is.

Three browser technologies have matured over the past few years to the point where a fully-fledged icon workshop can run entirely locally: the Canvas API for pixel-perfect rendering up to 512 × 512 (and beyond), WebAssembly for highly compressed PNG encoders, and above all powerful tree shaking in modern bundlers like Webpack and Turbopack. The last one is the unsung hero of this story: it lets you add an npm package like react-icons — 30,000 icons — to your project and end up with only the 154 explicitly imported icons in the production bundle. Ten years ago that would have crashed any browser.

"The browser is now powerful enough to be a real design environment for small, well-scoped tasks. We just have to stop pretending we need the cloud for everything."
— Surma, web platform engineer (DotJS 2024)

The three building blocks of a good app icon

Before we get into the tech, a quick design detour. A good app icon — whether it's a favicon, a PWA icon, or a native iOS touch icon — consists of three layers in 95% of cases:

Background shape (container): a geometric silhouette that separates the icon from whatever it sits on. Common choices: rounded square (squircle), circle, sharp square.
Symbol (glyph): the actual carrier of meaning. For big brands a logo or a letter; for smaller apps often a generic symbol icon.
Color contrast: background and symbol color should differ in brightness by at least WCAG AA level (contrast ratio ≥ 4.5:1) so the icon stays recognizable even at 16 × 16.

Susan Kare perfected this for the Macintosh back in 1983 (see the post PWA & app icons — the history). All three principles hold just as true in 2026 — and they are exactly the three variables Icon Studio makes configurable.

The architecture — how the studio renders

If you want to know what happens under the hood, here's the render pipeline in five stages:

Stage	What happens	Where in the code
1. State capture	UI state (shape, colors, icon slug, icon size) is held in React hooks	components/tools/IconStudio.tsx
2. Icon → SVG string	`renderToStaticMarkup` builds an SVG string from the react-icons component, in which `fill="currentColor"` is replaced with the chosen icon color	react-dom/server
3. SVG → blob URL	`new Blob([svg], {type:"image/svg+xml"})` and `URL.createObjectURL` create a browser-internal URL — no network	useEffect with cleanup
4. Canvas composite	First the background path (squircle/circle/rect), then the icon drawn centered on top via `drawImage()`	drawTo() callback
5. Export → PNG blob	`canvas.toBlob(callback, "image/png")` per selected size, bundled with jszip	exportZip()

The decisive step is stage 2. Most browser tools that want to draw icons on a canvas either have to hand-type path data or load an external SVG file. renderToStaticMarkup is a more elegant solution: react-icons exposes a full component API that gets rendered SSR-style into static SVG markup. This works for EVERY react-icons component, without having to program special cases per icon.

Here's a simplified example from the implementation:

import { renderToStaticMarkup } from "react-dom/server";
import { LuStar } from "react-icons/lu";

const svgMarkup = renderToStaticMarkup(
  <LuStar color="currentColor" />
);

const wrapped = svgMarkup.replace(
  /<svg/, '<svg xmlns="http://www.w3.org/2000/svg" fill="#d4a017"'
);

const blob = new Blob([wrapped], { type: "image/svg+xml" });
const url = URL.createObjectURL(blob);

const img = new Image();
img.onload = () => ctx.drawImage(img, 50, 50, 200, 200);
img.src = url;

The four bundled icon libraries and their personalities

Icon libraries are not interchangeable. Each has its own visual character and covers different use cases. Icon Studio bundles four complementary collections:

Font Awesome Solid (CC-BY 4.0)

The OG. The web's de facto standard icon set since 2012. Solid means: every icon is fully filled — which keeps them equally recognizable at every size (16 px to 1024 px). In the studio it's the safe starting point: if you don't know what you need, look here first. Included in the studio: Home, User, Cog, Heart, Star, Search, Camera, Image, Music, Play, Pause, Bookmark, Envelope, Phone, MapMarker, Calendar, Clock, ShoppingCart, CreditCard, Shield, Lock, Key, Bolt, Fire, Trophy, Gem, Code, Terminal, Cloud, Sun, Moon, Leaf, Tree, Car, Plane, Bicycle, Coffee, Pizza, Utensils, Gamepad, PaintBrush, Palette, Briefcase, ChartLine, ChartBar, Rocket, PaperPlane.

Lucide (ISC)

The modernization step. Originally started as a fork of Feather Icons, now with more than 1,000 icons. Visually: thin strokes, a consistent 24 px grid, very "designerly". If your brand should feel modern and minimal — Lucide. As of 2026, arguably the most widely used icon set in newer React and Svelte projects.

Simple Icons (CC0)

This is where the brand glyphs live. GitHub, Apple, Google, Vercel, Next.js, React, TypeScript, Python, Docker, Figma, Notion, Slack, Discord — all in their official brand colors (overridden in the studio by your icon color choice). Important legal note: the CC0 license covers only the glyph itself. The owners' trademark rights remain untouched. If you put a GitHub icon in your app icon and thereby suggest you're authorized by GitHub, you have a legal problem — regardless of where the artwork came from.

Tabler (MIT)

A consistent stroke style, 1.5 px line weight across the entire collection. Tabler is particularly strong for UI symbols (check, X, alert, info), device icons (mobile, laptop, desktop), and API/tech symbols (server, database, cloud upload). If your branding has anything to do with software and data — Tabler.

Shape strategy: which shape when?

The three built-in shapes are not arbitrarily interchangeable. They carry meaning:

Rounded square (squircle). The de facto standard in 2026. iOS, macOS, and Windows 11 display app icons as squircles. The corner radius of roughly 22% matches Apple's spec. If you only want to build ONE icon that works on as many platforms as possible — squircle.
Circle. Visually "friendlier", but less room for the icon (effectively about 78% of the square area is usable). Good for profile-picture-style icons, audio apps, lifestyle brands. On Android the icon is often rendered round anyway, depending on the launcher mask.
Sharp-cornered square. Feels the most professional and "grown-up". Good for B2B apps, finance apps, tools. Careful: if the icon lands on iOS, the system will still clip it to a squircle — and you'll lose some content at the corners.

If you need it stricter: for Android I recommend running the Icon Studio export through the PWA Generator. It automatically turns the squircle into a maskable icon with a 10% safe zone — see the glossary entry Maskable Icon for the background.

Workflow: from blank canvas to production asset in under three minutes

Here's an honest step-by-step guide. Actually measured on a Wednesday evening: 2 min 41 s from opening the tool to the unzipped ZIP on the desktop. Use case: a favicon for a side-project blog.

Open the tool. Open Icon Studio at /tools/icon-studio in your browser.
Pick a shape. Choose a background shape: rounded square (squircle), circle, or square.
Set the colors. Set the background and icon color via the color picker or a hex code.
Choose an icon. Switch between the icon libraries (Font Awesome, Lucide, Simple Icons, Tabler), use the live search, and click the icon you want.
Select the sizes. Enable the export sizes you need — the defaults are 16, 32, 48, 96 for favicons, 180 for Apple touch, 192 and 512 for PWA.
Export the ZIP. Click 'Export sizes'. You get a ZIP with all the PNG files, a manifest-snippet.json, and a README. Nothing was uploaded.

If you don't believe it, measure it yourself: open jnrt.online/en/tools/icon-studio and start a stopwatch.

What's actually inside the exported ZIP

The ZIP bundle is deliberately minimalist — no marketing PDFs, no hidden tracking pixels, no extra sizes for platforms you don't need. You get exactly this:

icon-studio.zip
├── icons/
│   ├── favicon-16x16.png   ← browser tab
│   ├── favicon-32x32.png   ← browser tab, high-res
│   ├── favicon-48x48.png   ← Windows site tile, legacy
│   ├── favicon-96x96.png   ← Android Chrome, default
│   ├── apple-touch-icon.png ← iOS home screen (180×180)
│   ├── icon-192.png        ← PWA manifest, standard
│   └── icon-512.png        ← PWA manifest, splash screen
├── manifest-snippet.json   ← copy into your manifest.json
└── README.txt              ← setup notes

The manifest snippet is deliberately only a partial JSON — Icon Studio doesn't know your app name, your theme color, or your start URL. If you want the full manifest wizard, head to the PWA Generator.

Where Icon Studio stops and other tools take over

Tools are at their best when they do one thing well and play nicely with other tools for everything else. Three tool handoffs that make sense in practice:

Icon Studio → PWA Generator

If you need native app bundles (iOS AppIcon.appiconset for Xcode, Android mipmap densities for Android Studio), this is the royal road. Icon Studio gives you the 512×512 source; the PWA Generator turns it into 18 iOS sizes plus the complete mipmap buckets plus the adaptive-icon XMLs. Combined, the two form a complete branding workflow.

Icon Studio → Favicon Generator

The Favicon Generator wraps the 32×32 PNG in a classic .ico container, which some older browsers and CMS systems still require for maximum compatibility. Icon Studio delivers the PNG, the Favicon Generator the ICO.

Color Palette → Icon Studio

The other direction: if you already have a photo or logo and want to extract your brand colors from it, run the image through the Color Palette extraction. It gives you hex codes you can drop one-to-one into Icon Studio. That's how you keep visual consistency between an existing brand and a freshly generated favicon.

Privacy and verifiability

The most important argument for browser-local tools isn't speed or being free — it's structural privacy. With cloud tools you have to trust the provider not to analyze your designs, resell them, or push them through third-party compliance layers. With a tool like Icon Studio you can verify the privacy.

Concretely: open DevTools (F12), switch to the Network tab, reload Icon Studio, and click through your entire workflow once. You will see:

Requests to jnrt.online for the HTML, the CSS, and the JS chunks
With ad consent active: requests to googlesyndication.com for AdSense
With statistics consent active: one GTM request
For the cookie-banner CMP: fundingchoicesmessages.google.com
Nothing during the actual icon building. No requests to CDNs, no pixel trackers, no asset servers

If you want it even stricter: decline all optional categories in the cookie banner. AdSense and GTM then disappear from the network view as well. You can verify this state live at any time on the /consent-status page.

The future: what might come next

Icon Studio is deliberately narrow in its first version. Three extensions are technically realistic and could arrive in the coming months:

A maskable variant directly in the export. Right now you have to chain the PWA Generator for that. A "maskable" checkbox in the export panel would output the 192 and 512 PWA sizes with 10% safe-zone padding.
More shapes. Diamond, hexagon, star — all programmable via Path2D, no architectural effort.
Gradient backgrounds. A linear or radial gradient instead of a single background color. Would look especially good for "premium" apps.

If you need one of these extensions urgently, drop me a quick note via the contact page. It helps with prioritization.

Frequently asked questions

The most common questions from the first week after release — with honest answers:

Why a local icon studio at all when Canva or Figma exist?

Canva and Figma are great tools — but they load hundreds of external assets, track usage behavior, and require an account login. For a favicon iteration with 5 versions on a Sunday evening, that's using a sledgehammer to crack a nut. A browser-local studio needs none of it and still delivers the asset in under 60 seconds.

Are the bundled icon libraries really cleared for commercial use?

Yes. Font Awesome Solid (CC-BY 4.0 — attribution in your credits is enough for most cases), Lucide (ISC — very permissive), Simple Icons (CC0 — no conditions on the brand glyphs themselves, though the owners' trademark protection of course still applies) and Tabler (MIT) — all four are cleared for commercial use. For brand icons (Simple Icons), note: the license lets you use the glyph, but it is no substitute for trademark permission from the brand owner.

Why not just load react-icons at runtime via a script?

That's not how react-icons works at all. The npm package is scanned at build time by tree-shaking-capable bundlers (Webpack, Turbopack), and only the explicitly imported icon components end up in the JavaScript bundle. For JNRT Pixel those are the ~154 icons listed in lib/icon-catalog.tsx. The rest stays on disk — and nothing gets loaded over the network at runtime anyway.

Which shape is best — squircle, circle, or square?

Depends on the platform where the icon will appear most often. iOS, macOS, and Windows 11 display squircles. Android leaves it to the launcher — so maskable icons with a 10% safe zone are the best fit there. On the web anything goes; a squircle feels friendliest, a square most professional, a circle most playful. If you can only build ONE variant, pick the squircle — it works on every platform.

What about maskable icons for Android?

Right now Icon Studio exports standard squares. For clean Android adaptive icons with a 10% safe zone, I recommend running the exported icon through the PWA Generator afterwards — it automatically produces maskable variants (192 and 512 with safety padding). The two tools complement each other.

How can I see that really nothing goes to a CDN while it loads?

Open DevTools (F12), switch to the Network tab, and filter by domain. When you open Icon Studio, the only requests you should see go to the jnrt.online domain (HTML, CSS, JS chunks) — plus possibly ad requests to googlesyndication.com if you've given marketing consent. No requests whatsoever to fonts.googleapis.com, cdn.fontawesome.com, simpleicons.org, or similar domains.

Conclusion

Icon Studio is a deliberately small tool. It doesn't replace a professional branding setup, which calls for a dedicated vector program and an experienced designer. But it covers the 80% of cases where you just need a sharp icon fast — for a side project, an internal service, a job-application portfolio. In three minutes. No account. No CDN. No tracker reading along. If that's what you actually need, this tool was built for you.

Go straight to Icon Studio · PWA Generator for platform bundles · Classic favicon generator with ICO · PWA & app icons — the history

About the author. Jonathan Hedderich is a software engineer and the operator of JNRT Pixel. He has been building browser-local tools since 2022, with a focus on structural privacy and measurable performance. Contact via /contact.