Developer Tools

Small utilities for the assets every website needs.

Two tools for the parts of a web project that are easy to overlook until deployment day: favicons and SVG files. Both run entirely in your browser. No uploads, no accounts, no cost.

Favicon Generator

The Favicon Generator produces a complete, production-ready favicon set from any image in one click. It is not just “resize to 32px and download” — it produces every format and size a modern website needs:

• favicon.ico — a real .ico container bundling 16, 32, 48, 64, 128, and 256 px icons. This is what legacy browsers and Windows tiles use.
• favicon-32x32.png — the standard favicon for modern browsers that prefer PNG.
• apple-touch-icon.png — 180×180, used on iOS home screens.
• android-chrome-192x192.png and android-chrome-512x512.png — required for PWA installability and Android home-screen shortcuts.
• site.webmanifest — the manifest file that ties the Android icons together.
• README.txt — the exact HTML snippet to paste into your <head>, so you do not have to look up the tag syntax again.

Everything downloads as a single ZIP. Unzip into your site root, paste the snippet, done.

The tool optionally lets you control padding and background color — useful for logos that were designed against a white canvas but need to work on a dark browser tab bar.

SVG Optimizer

The SVG Optimizer takes SVG files exported from Figma, Illustrator, or Sketch and strips everything that is not essential: XML metadata, editor state, comments, unreferenced groups, redundant attributes, and excessive decimal precision in path coordinates. The visual output is identical; the file size is often 40 to 70 percent smaller.

SVGs from design tools routinely carry:

• Editor metadata — a <metadata> block naming the software, the version, and often the original filename and creation date.
• Comments — designer notes left in the source that have no reason to ship.
• Unused defs — gradient and filter definitions that were tried during design and then abandoned.
• Excessive precision — path coordinates like M12.00000045 8.99999987 where M12 9 renders identically.
• Inline styles — duplicated CSS that can be consolidated.

Each optimization is lossless. The output SVG renders exactly like the input. What changes is what is left on the page for browsers to parse, which matters most when you have dozens of small SVGs across a site.

Why this matters for performance

A typical unoptimized SVG icon from Figma is 2 to 5 KB. Optimized, the same icon is 400 to 900 bytes — a 60 to 80 percent reduction. On a page with 20 icons, that is the difference between 60 KB and 15 KB of SVG for the browser to parse, decode, and render. Combined with the favicon set, these two tools handle the small assets that add up to real performance gains.

Related tools

If you are preparing assets for a new site, pair these with the Logo Resizer and Social Media Resizer from the Image Tools category. Between the three categories, you can prepare every image, icon, and metadata file a modern website needs — without uploading anything to a server.

A note on favicon caching

Browsers cache favicons aggressively. After deploying a new favicon set, you may need to hard-refresh (Ctrl+Shift+R) or clear the browser cache to see the change. In production, you can force a cache-bust by appending a query string to the favicon href in your HTML: <link rel="icon" href="/favicon.ico?v=2">. Bump the version number every time you update the icon.