How to fix white edges on transparent logos
Find out whether a white fringe comes from the file, resizing, or the page. Test the logo on light and dark backgrounds before sharing it.
10/11/2026، 4:08 م UTCA logo can look clean on a white page and develop a thin halo the moment you put it on a dark menu. Downloading it again or trimming a little off the canvas often gives you the same result. First isolate the stage that introduces the halo. Compare the source, the exported copy, and the smaller image on the page against the same background.
Is there a white fill or a fringe around the shape?
Open the file in an editor that supports transparency. If a white rectangle surrounds the logo, first check for a background layer or an export setting that removed transparency. If the line follows only the outline, inspect the colour of the partly transparent edge pixels.
The alpha channel describes how opaque a pixel is. A partly transparent edge pixel still has colour values. If the edge was previously rendered against white, those pixels may already have been blended with a light colour. Removing the white area around the logo will not automatically change the pale colour that remains at the edge. W3C PNG specification
Export again from the source
If you have a vector or layered original, hide the background and export with transparency while the outline is still clean. If you can see a canvas colour, check whether it is a real layer or just the editor’s preview background. Then reopen the exported file. Test the actual copy you will use even if the editor showed a checkerboard while you worked.
If all you have is a copy flattened against white, refine the mask carefully around the shape. An automatic background remover may also erase white lines or lettering inside the mark. Zoom into the copy and pay particular attention to letter counters, fine strokes, and curves. Keep the original separately. Exporting again cannot recover detail removed from a flattened copy.
Compare it on light, dark, and coloured surfaces
Place cream, charcoal, and a mid-tone background beneath the logo in turn. Compare the source and the export side by side at the same size. Charcoal exposes a pale halo that disappears on white, while cream makes a dark fringe easier to see. If the logo itself is light, judge its contrast with each surface too.
Check the logo once at 100% zoom and once at its intended display size. An icon that looks clean at 240 pixels wide may have fine strokes that merge at 24 pixels. If the outline is clean but the mark is hard to read, a simpler small-size version may work better.
If the problem only appears on the page
If the export looks clean in your editor, check which version the page actually displays. It may be using a generated thumbnail, an older file, or a copy flattened against a background. Open the displayed file in a new tab and compare it with your local copy at the same size. See whether the edge follows the logo or the rectangular image box. A rectangle may come from the box’s border or shadow.
Finish the check in the actual layout. Open the new logo in the dark menu, on a light page, and in the narrow mobile header. Give the finished copy a distinct file name or version and put it in the folder you share from. That makes it easier to avoid reintroducing the halo by picking an older file.