Icon Generator

How the Icon Generator works

Icon generator: SVG from letters and shapes

A surprising number of icons are just letters on a coloured shape: Gmail-style avatar initials, the first letter of a project name in a sidebar, a placeholder logo for a prototype, a favicon for a tool that will never have a designer. Drawing those in an image editor and exporting five sizes is a waste of an afternoon. As SVG they are a single, tiny, infinitely scalable file, and this form writes it.

Text sizing. The font size is derived from the canvas size, the text-size fraction and the number of characters, so one letter fills more of the shape than three. The default fraction of 0.55 leaves comfortable padding inside a rounded square; raise it towards 0.8 for a single bold letter, lower it if the glyphs touch the edges of a circle. Text is positioned with text-anchor="middle" and dominant-baseline="central", which centres it optically in every modern browser without hand-tuning a y offset.

Fonts. SVG text is rendered with whatever font is available where the SVG is displayed. The default is a system font stack, which is right for favicons and avatars — it will always render, and it looks native on every platform. If you name a web font, the icon will only use it where that font is loaded on the page; a standalone .svg file or a favicon has no access to your page's @font-face rules and falls back. For a fixed, portable look, convert the text to a path in a vector editor after downloading.

Shapes. Rounded square is the general-purpose choice and takes a corner radius. Squircle uses a fixed 28 percent radius, close to the iOS app tile. Circle suits avatars. Hexagon is drawn as a polygon and reads well for developer tools and badges. Choose None for a transparent background when the icon will sit on a coloured surface you control.

Gradients. Filling the gradient end colour switches the background to a diagonal linearGradient from the background colour at top-left to the end colour at bottom-right. Clear it for a flat fill. Gradients look rich at 256 pixels and above; at favicon size they mostly read as a single mid-tone, so consider a flat fill if the icon is primarily a favicon.

Using the favicon link. The stats panel encodes the whole SVG as a data URI inside a <link rel="icon" href="..."> tag. Paste that into <head> and the browser tab shows the icon with no request and no file. Safari on macOS renders SVG favicons; Safari on iOS does not use favicons at all and wants an apple-touch-icon PNG, which you can export from the downloaded SVG at 180 by 180 pixels.

Where SVG is not enough. App stores, Windows tiles, the PWA manifest and some email clients require PNG at specific sizes. Download the SVG, open it in any vector editor or use a command-line rasteriser, and export the sizes you need; because the source is vector, every size is pixel-perfect. Keep the SVG as the master and regenerate rather than editing PNGs.

Related tools