Logo with a Transparent Background — How to Make One and Avoid the White Box · Trace Logo's
7 min read 5

Logo with a Transparent Background — How to Make One and Avoid the White Box

You place a logo on a colored banner — and it arrives in a white rectangle, like a stamp on an envelope. The white box around a logo is the eternal pain of decks, landing pages and social posts. Let's see where it comes from, how to remove it in a minute, and how to download logos without it in the first place.

TL;DR

The white background is a property of JPG: the format simply has no transparency. PNG, SVG and WebP do. If you have a JPG, the background must be removed with a tool; if you have a choice — just download the logo as a transparent PNG or SVG. That beats any processing.

Why a logo has a background at all

An image has no concept of "emptiness" — every pixel must hold a value. Formats handle it differently:

  • JPG stores color only. Transparency physically doesn't exist in the format, so "empty" areas get filled with white.
  • PNG stores color plus an alpha channel — per‑pixel transparency. A transparent PNG sits on any background.
  • SVG is vector: there is no background unless someone deliberately drew a rectangle.

Hence rule one: find the source file rather than fixing a JPG. Background removal is always a compromise; a file saved with transparency from the start is always better.

How to check whether the background is transparent

A white background on a white page is invisible — easy to be fooled. Quick checks:

  1. Drop the file into Figma and put a colored layer underneath.
  2. Open the file in a browser in dark mode.
  3. The extension: .jpg — background guaranteed; .png and .svg — transparency possible but not guaranteed (PNGs can be saved with a white background too).

Removing a white background

Online tools — 30 seconds

Background‑removal services (remove.bg and dozens of clones) handle logos on solid backgrounds almost perfectly: upload a JPG, download a transparent PNG. Limitations: free tiers often return reduced sizes, and fine details or semi‑transparent elements (shadows, fade‑outs) may suffer.

Figma — built‑in AI (on paid plans)

Figma now ships a built‑in Remove background AI tool: select the image, hit "Remove background" from the actions menu or the image's inline toolbar — no plugin needed. Right next to it is Boost resolution, an AI upscaler for blurry images, and both can be applied to several images at once. Catch: these AI tools require a paid plan (Professional/Organization/Enterprise) with a Full seat and AI enabled — not available on the free tier, where plugins (Remove BG and clones) still do the job. The same AI engine also powers Vectorize, launched in 2026: one click turns the image into an editable vector (full color, grayscale, or black‑and‑white outline), so for logos made of simple shapes you usually don't need to rebuild by hand — run Vectorize and clean up the result. It's paid‑plan‑only too; on the free tier it's back to inserting the image and tracing the mark with the pen tool yourself.

Photoshop — maximum quality

Select Subject (the AI selection) → invert → delete background → export PNG. Manual mask cleanup for hard cases. This is the path when the logo must be large and flawless.

The "white fringe" trap

Automatic removal often leaves a thin white halo around the contours — leftovers of JPG's semi‑transparent edge pixels. Invisible on light backgrounds, glaring on dark ones. Photoshop fixes it via Layer → Matting → Remove White Matte; online tools usually don't. One more reason to find the source file.

The best fix: download it transparent

For known brands, manual background removal is double work — transparent sources already exist:

  • The SVG logo — transparent by nature.
  • PNGs from official press kits — almost always alpha‑channel.
  • Logo catalogs — serve ready‑to‑use files.

In our catalog both the SVG and PNG of every brand come with transparent backgrounds by default.

What if you need a different background?

The related case: not removing but replacing — say, putting the white logo variant on a brand color. Order matters: transparent source first, then a colored layer underneath in your editor. Not the other way around — repainting background pixels around a logo leads to dirty edges. Need to recolor the logo itself too? Here's the color guide.

FAQ

Why does the logo still have a background in Word/PowerPoint? Make sure you inserted a PNG, not a JPG. PowerPoint also has built‑in removal: Picture Format → Remove Background.

My transparent PNG got a black background after uploading? The platform converted it to JPG. Check the upload requirements: where only JPG is accepted, transparency is impossible — prepare a version on a solid backdrop.

Does resizing keep transparency? Yes — any editor preserves the alpha channel when resizing a PNG. Just don't pass through JPG along the way.

Does WebP support transparency? Yes, and compresses better than PNG. For the web a transparent WebP is a great choice; for email and documents stay with PNG — wider support.

Why are the edges ragged after background removal? The online service worked on a small source. The rule: remove the background from the largest version you can find, downscale afterwards.

Background removal in Photoshop: the detailed route

For maximum quality, step by step:

  1. Open the file, duplicate the layer (Ctrl+J) — work on the copy.
  2. Select → Subject — the AI selection. On sharp‑edged logos it lands 90% of the way.
  3. Refine: Select and Mask. Brush the problem areas; Shift Edge at −10…−20% eats the leftover background fringe.
  4. Output as a Layer Mask (don't destroy pixels — masks stay editable).
  5. Contrast check: put a bright red fill underneath — every mask flaw and white halo shows on it.
  6. Kill the halo: Layer → Matting → Remove White Matte (Remove Black Matte for dark source backgrounds).
  7. Export: File → Export → PNG. Not JPG — or the whole exercise was for nothing.

The same route in free GIMP: Select by Color for a solid background → Grow/Shrink the selection by a pixel → delete → Export As PNG.

The special cases: "almost white" and gradient backgrounds

Automation nails pure white and stumbles on two cases:

  • An "almost white" background (scanned paper tint, a soft studio gradient). The magic wand with tolerance 10–20 usually takes it in 2–3 clicks. If the logo itself contains white elements, they're at risk: select the subject, not the background.
  • White details on a white background. The classic hell: a white letter on white is indistinguishable to any algorithm. The honest paths: find a dark‑background version and remove that; vectorize the logo per its own guide; or trace the details manually with the pen tool.

After you have the PNG: a mini‑checklist

  1. Test on three backgrounds — white, black, brand color: halos and translucent leftovers all surface.
  2. Store the master at maximum size in your brand folder (organized per the format guide).
  3. Never re‑save as JPG — one careless conversion and the transparency is gone, the white box is back.
  4. Compress for the web: TinyPNG and friends cut PNG weight 2–3× with no visible loss.

In short

The white box means JPG. Fixes, in ascending quality: online remover → Photoshop → finding a transparent source. For known brands take the third path — faster and artifact‑free.

Transparent SVGs and PNGs for any brand live in our logo catalog: download at any size or copy to clipboard in one click.

Logo and emoji library Download SVG/PNG free and export to Figma
Open catalog