How to use the Logo Mockup Previewer
- Add your logo. Drop a file on the upload box, click it to choose one, or paste an image. PNG with transparency and SVG give the cleanest results; JPG and WebP work too. The file is read and drawn on your own device and never uploaded. Press Use sample to go back to the built-in example.
- Check the colors. The tool picks a Brand color from the most prominent saturated color in your logo; change it, or the Backdrop, to match your brand sheet. Product colors switches every product between Light, Dark and Brand versions.
- Choose the logo version. Leave Logo color on Auto and a one-color logo is reversed to white or black wherever it would disappear. Pick All white or All black to see your knockout version everywhere. Tick Remove white background if your file is a JPG with a white box around the mark.
- Read the small-size check. The panel flags solid backgrounds, wide lockups, detail that blurs at 16 px and low contrast, and the strip below it shows the logo at true 16, 32, 40 and 60 px. Cards with a problem get a yellow badge.
- Save what you need. Each mockup has its own Download PNG (1000 × 700 px). Download all (ZIP) packs all nine for a client email or a portfolio case study.
Why a logo has to survive being small
A logo spends most of its life tiny. The same mark that looks bold on a 1 m shop sign appears as a 16 px square in a browser tab, a 40 px circle next to every comment you post, and a rounded app tile on a phone. Reduction is where logos fail: hairline strokes vanish, counters (the enclosed spaces in letters like a, e and o) fill in, and small taglines turn into a gray smear.
Proportion is the other trap. A horizontal wordmark at 4:1 placed in a 32 px square is only 8 px tall; in a 16 px favicon it’s 4 px, about half the height of a lowercase letter in ordinary 16 px body text. That’s why most brands use a family of versions rather than one file: a full lockup for signs and letterheads, a stacked version for square spaces, and a symbol or monogram for icons and avatars. If the check flags your logo as a wide lockup, the fix usually isn’t a smaller font. It’s a separate mark.
Contrast matters more than many designers expect. The accessibility guidelines exempt logos from contrast minimums, but the 3:1 ratio they ask of icons and graphics is still a sensible target: below it, people stop recognizing the shape at a glance. A navy mark on a black T-shirt or a pale yellow logo on a natural tote can look fine on a calibrated monitor and fade to nothing in real light.
Sizes your logo will actually meet
| Where | Size | What to supply |
|---|---|---|
| Browser tab favicon | 16 × 16 and 32 × 32 px | Symbol only, simplified |
| iPhone home screen bookmark (apple-touch-icon) | 180 × 180 px | Symbol on a solid background |
| Android / installable web app | 192 × 192 and 512 × 512 px | Symbol with padding |
| App Store icon | 1024 × 1024 px | Square artwork, no transparency |
| US business card, 3.5 × 2 in | 1050 × 600 px at 300 dpi (1125 × 675 with 1/8 in bleed) | Vector or a large PNG |
| EU business card, 85 × 55 mm | about 1004 × 650 px at 300 dpi | Vector or a large PNG |
| Left-chest shirt print, 3–4 in wide | 900–1200 px wide at 300 dpi | Vector, limited colors |
| Shop sign or vehicle | meters wide | Vector only |
A raster file under about 600 px gets a warning in the check for exactly this reason: it’s fine on screens and too small for anything printed large. If all you have is a PNG, the SVG to PNG & PNG to SVG Converter can trace simple flat logos into vector paths.
What the small-size check measures
The checks are simple pixel measurements, so you can judge them yourself:
- Transparent background: at least some pixels are below about 98% opacity. A logo with none will print as a box on colored products.
- Proportions: the trimmed logo is wider than 2.2:1 or taller than 1:2.2.
- Blurs at 16 px: the logo is scaled into a 16 × 16 square and we count soft-edge pixels, those between roughly 6% and 75% opacity. When more than 45% of the visible pixels are soft, the shape reads as a blur rather than a mark.
- Main colors: colors that cover at least 4% of the logo. More than four usually means trouble for embroidery, screen printing and stamps.
- Low contrast: for each product color, the share of logo pixels with a contrast ratio below 1.6:1 against that surface. Above 35% gets flagged. In Auto mode, a logo that’s at least 85% one color is reversed to white or black instead.
Tips from practice
Design the small version on purpose. Draw the favicon at 32 × 32 on a pixel grid instead of shrinking the full logo. Thicken strokes, open up counters and drop any text.
Keep a reversed version in the kit. Clients will put your logo on a dark photo or a black shirt whether you planned it or not. Supply an all-white file alongside the color one, and check it here with All white on the Dark products.
Mockups are for decisions, not proof. Label previews as previews when you send them to a client. Real ink on fabric spreads, mugs are printed with a wraparound and signs are lit at night; the mockup tells you whether the mark works, not exactly how the product will look.
Test the wordmark’s text separately. If your logo includes the studio name, set the same words with the Text to SVG Outline Tool at a few weights and compare them at small sizes before you commit to the lightest one.