AI Logo Generator.

Most products need all three, at different sizes. The wordmark is the name set as type — enough for a text-first brand and any surface wider than about 120px. The symbol is the pictorial mark that must stay legible at 16px in a tab or favicon. The lockup combines them for generous surfaces like marketing headers and splash screens. Generate all three from one component with a variant prop; the common failure is shipping a single lockup and scaling it down until the wordmark is unreadable.

Design a dedicated reversed version rather than running a CSS invert on the full-color mark — inversion turns brand hues into wrong colors and kills contrast on mid-dark surfaces. The reversed artwork usually renders the mark in white or a light tint at adjusted weights, and the component picks it via a dark ancestor class or prefers-color-scheme. Tinted contexts such as buttons and colored banners get a third, single-color currentColor version that inherits the surface's text color.

Clearspace is the guaranteed empty margin around the mark — the working rule of thumb is at least half the symbol's height on all sides. It exists because a logo wedged against nav links, badges, or other logos reads as clutter and loses distinctiveness. Enforce it by baking the margin into the component so every usage inherits it; a spacing rule that lives only in a brand PDF gets violated the first time someone drops a PNG into a navbar by hand.

One SVG stays crisp from a 16px favicon to a retina billboard, weighs a fraction of a PNG set, and recolors through currentColor or CSS variables — which is exactly what makes theme variants cheap. PNGs lock in a size, a background, and a color, so every new context becomes another export and another file drifting out of date. Inline SVG also avoids a network request in the navbar, where the logo is often among the first things painted. Keep PNGs only where a format demands them, such as maskable app icons and some email clients.

Ship the symbol alone — never the full lockup — at 16 and 32px for browser tabs, 48px for shortcuts, 180px as the apple-touch-icon, and 192 plus 512px as maskable PNGs with the mark inside an 80% safe zone so Android's circular mask cannot clip it. If the full symbol turns to noise at 16px, generate a simplified variant: one letter or one reduced shape. The favicon is the smallest place your identity works and among the most seen — it deserves its own artwork, not a scaled-down afterthought.

Your mark asserts identity; theirs endorse — and arranging many marks is a different object: a logo cloud, built for social proof with its own rules about grayscale, uniform height, and permission to display. Keep the two apart. Your logo component should not render inside a logo cloud, and a cloud should not contain your own mark except in a framing you can defend. And before displaying any customer's logo anywhere, get the permission — an endorsement you cannot defend is a liability, not proof.