The Icon Maker is 100% client-side. Your icon is represented as a small JavaScript spec — a shape, a background fill, a mark (symbol or monogram), a safe-area padding and a few transforms — that a pure engine serialises to an SVG string; that same SVG drives the live preview and the SVG download, and it is drawn onto an in-memory <canvas> to produce each PNG. Nothing about the spec is transmitted: there is no upload endpoint, no server-side image generation, and no external stock-photo or AI icon service in the loop. The built-in symbols are hand-authored inline SVG, so even they trigger no download. The single, optional network use is loading a Google font you choose for a monogram, purely so the on-screen preview and the exported PNG show that font’s real shapes; only the font family name is requested (as with any webfont), never your design. Prefer zero network? Choose a system font or use a symbol. The tool works offline once cached and discards everything when you close the tab.

The Icon Maker deliberately exports the raw building blocks rather than pretending to emit a finished favicon bundle client-side. You get one scalable SVG and PNGs at the full favicon / PWA / Apple-touch set of sizes — 16, 32, 48, 64, 128, 180, 192, 256, 512 and 1024px — either one at a time or all ten at once. A modern favicon setup typically wants a multi-image favicon.ico (packing 16/32/48), a scalable favicon.svg, a 180px Apple touch icon, and 192px and 512px PNGs referenced from a web-app manifest. The .ico format is a specialised container that bundles several bitmaps into a single file; producing it, and adding the correct <link rel> tags and manifest entries to your site, is a build-time task (many build tools and generators do exactly this from the PNGs). Rather than bake an .ico encoder into a privacy-first browser tool, the Icon Maker gives you clean, correctly-sized PNGs and an SVG to feed into that step.

Icon design is unusual because the final image is often minuscule and its edges are unpredictable: browsers show favicons at 16–32px, and mobile platforms mask app icons into a circle, squircle or rounded square that can clip anything near the corners. Industry guidance uses a small pixel grid (24-unit is the common standard) with a couple of units of outer padding, leaving the artwork in a central safe area — so the Icon Maker gives you an adjustable safe-area inset, a live grid overlay and a mark-scale control to keep everything comfortably inside it. Legibility at size also depends on contrast: WCAG asks for at least 3:1 between a graphical object and its background, and a low-contrast symbol simply disappears at 16px. The tool computes that ratio live (against the first gradient stop when the background is a gradient) and warns you when you drop below 3:1. It also renders actual-pixel previews from 16px up so you can judge legibility before you export, following the golden rule of icon design: one bold mark, strong contrast, and no fine detail.

SVG is a vector format: it stays razor-sharp at any size and is ideal as the master you keep and as the modern favicon.svg. PNG is a fixed-resolution raster: apps, app stores and web-app manifests reference specific pixel sizes, so you export the exact ones you need (this tool covers 16–1024px). Because a PNG has a set pixel count, use a large size (512–1024px) for high-DPI and store use, and the smaller ones for favicons and launchers. On shapes: a “squircle” is the continuous-corner rounded square Apple popularised for iOS icons — mathematically a superellipse, it looks softer and more organic than a normal rounded rectangle; a circle matches Android’s adaptive-icon masking; a rounded square is the generic app-tile look; a full square is edge-to-edge; and a shield suits crests and security marks. The Icon Maker renders whichever you pick as a true vector tile, and every PNG is rasterised from that same SVG so the preview and the exports always match.