About

A centered logo follows strict radial symmetry. The primary mark or icon occupies the geometric center, with typography distributed above, below, or around it along the vertical axis. Misaligned elements create visual tension that undermines brand trust. This tool computes x and y offsets using Canvas measureText metrics and shape bounding boxes to guarantee pixel-perfect centering at any resolution. Export resolution defaults to 2× the canvas size for retina displays.

The generator supports circular, rounded-rectangle, and hexagonal container shapes. Background fills accept solid colors or linear gradients computed from HSL interpolation. Uploaded icons are composited with configurable padding ratio p (default 0.35) relative to the container diameter. Limitations: kerning depends on the browser's font engine. System fonts only. Results approximate professional vector output but remain raster (PNG). For print above 300 DPI, re-trace in a vector editor.

Formulas

The center coordinates for text placement on the canvas are computed as:

x_text = W2 − w_text2

where W = canvas width in pixels and w_text is returned by measureText(str).width. Vertical centering uses font metrics:

y_text = H2 + ascent − descent2

For hexagonal container paths, each vertex i is computed using:

x_i = cx + r ⋅ cos(π3 ⋅ i − π6)

where cx is center x, r is radius, and i ∈ {0, 1, ..., 5}. Gradient backgrounds interpolate between two HSL colors along angle θ.

Export uses 2× supersampling: the internal canvas resolution is W × 2 by H × 2, then exported via toBlob at full resolution for sharp rendering on retina displays.

Reference Data

Preset Style	Shape	Font Weight	Typical Use	Min Safe Size
Corporate	Rounded Rect	600	Business cards, letterheads	64×64 px
Startup	Circle	700	App icons, social avatars	48×48 px
Badge	Hexagon	800	Stickers, badges, patches	80×80 px
Minimal	None	300	Watermarks, subtle branding	32×32 px
Bold	Circle	900	Sports, gaming, events	96×96 px
Elegant	Rounded Rect	400	Fashion, luxury, hospitality	64×64 px
Tech	Hexagon	500	SaaS, dev tools, hardware	56×56 px
Playful	Circle	700	Kids, games, education	48×48 px
Vintage	Rounded Rect	600	Cafes, craft, retro branding	72×72 px
Monogram	Circle	700	Personal branding, initials	40×40 px
Social Avatar	Circle	600	Profile pictures (IG, X, LinkedIn)	110×110 px
Favicon	Rounded Rect	800	Browser tab icons	16×16 px

Frequently Asked Questions

The tool renders at 2× the visible canvas size by default. If you set a canvas size of 256×256 px, the exported PNG is 512×512 px. If you need even higher resolution for print, increase the canvas size slider. For 300 DPI print at 2 in width, set canvas to at least 300 px (exported as 600 px).

Yes. Drag and drop or click the upload zone to load a PNG, JPEG, SVG, or WebP file. The icon is scaled to fit within a padding ratio p = 0.35 of the container diameter, then composited at the exact center using drawImage with computed offsets. Transparent backgrounds in PNG and SVG files are preserved.

The tool uses system fonts (Arial, Georgia, Courier New, Verdana, Times New Roman, Trebuchet MS, Impact, Comic Sans MS) because they are guaranteed to render without network requests. External font loading introduces CORS issues and dependency on third-party CDNs. For production logos, export from here and refine typography in a vector editor like Inkscape or Figma.

Two user-selected colors are parsed into HSL components. The Canvas createLinearGradient API interpolates between them along an angle θ (default 135°). The gradient start and end points are computed as x = cx ± r ⋅ cos(θ) where r is half the canvas diagonal.

The renderer measures text width via measureText. If the text exceeds 90% of the container width, the font size auto-reduces iteratively until it fits. A toast notification warns you when auto-scaling is triggered. For best results, keep primary text under 12 characters.

When you select "Transparent" as the background type, the canvas is cleared without fill before drawing. The PNG export via toBlob with MIME type image/png preserves the alpha channel. Verify transparency by opening the file in an image editor. JPEG export does not support transparency and will show a white background.