Logo maker: mark, wordmark, icon set

Because that is where a logo fails. On screen it is built large, but it works small: 16 pixels in a browser tab, an icon on a phone, an avatar circle, a stamp on a box. A mark with thin lines and a five-word tagline turns into a gray blob at those sizes, and it is better to learn that now than after a print run. In the same row sit a single-ink version and a color-blindness simulation: contrast can look decent while red on green still merges for one man in twelve.

Yes, and this is the answer to “I already have a mark”. An SVG file is read into outlines and becomes a mark alongside ours: if it is single-color it recolors with the logo, and a multi-color one keeps its own colors. An ordinary picture — PNG, JPG, WebP, a hand-drawn scan — is traced along its contour and turned into vector: from then on it scales losslessly, takes the palette color and goes into the SVG as curves rather than dots. Trace detail is on a slider, and if the drawing is light on a dark background the “Invert” button helps. When tracing cannot work — a photo, for instance — the picture is placed as is and the page says so under the preview: otherwise the promise of “real vector” would be untrue.

It is genuinely vector and self-contained. A common substitution is a PNG wrapped in an SVG file: it opens, but it blurs when enlarged. The second is a wordmark as a text tag: on your computer it looks right, and at the printer or the designer a system font is substituted and the logo quietly changes its shapes. Here the letters are converted to outlines, so the file depends on nothing and can be edited in any vector editor. Worth knowing too: several well-known makers have no vector at all — Adobe Express exports no SVG on any plan, and Squarespace and Shopify’s maker give PNG only.

They are four different ways to fail, each caught by its own number. “Contrast” is the luminance ratio of mark to background by the WCAG formula: the higher, the more confidently the logo is seen; below three the label turns to a warning, because a pale gray mark on white looks lovely in a mockup and vanishes on a business card. “Color blind” is the same contrast computed after simulating the most common color-vision deficiency: red on green can score a decent first number and merge in the second. “On dark” measures the mark against a dark interface, which is where a near-black wordmark disappears. “At 16 px” warns that a tagline will not read at that size — its place is on the large version, not in a favicon.

Favicon 16, 32 and 48 pixels for the browser tab, a favicon.ico assembled from them for older browsers and Windows shortcuts, apple-touch-icon 180 for the iPhone home screen, icons 192 and 512 for the manifest, a maskable 512 icon with padding (the system crops it to the icon shape on Android), favicon.svg, a ready site.webmanifest and a head.html file with the link lines. The files go in the site root and the lines from head.html go into the page head. Transparency is deliberately removed from apple-touch-icon and from the maskable icon: iOS places a transparent icon on black, and the corners come out black.

The marks were drawn for this tool rather than taken from a public icon library. The difference is not only about resemblance. Squarespace’s maker takes its symbols from a third-party library, and its own help says you should read the license of your particular icon before publishing the logo; part of Adobe Express’s built-in assets carry a license that explicitly forbids exporting them as a standalone file — and a logo is exactly a standalone file. There is no such paragraph with our marks. The shapes here are deliberately simple and geometric: those read at 16 pixels, which no detailed icon does. If you want something more distinctly yours, upload artwork or take a monogram of the initials.

Yes. If the chosen display typeface has no glyphs for it — Bebas Neue, for instance, has neither Cyrillic nor Hangul — the wordmark is set in a face that does, and the line under the preview says which one. Silently substituting a font would be worse: you would be looking at a logo that is not yours and would not know it. Arabic is assembled with the correct direction and letter joining.