How to Fix a Cropped Favicon in Wix

The short answer

A favicon usually looks cropped because the artwork you uploaded is not a square with breathing room around the mark. If the image is wider or taller than it is high, it may be cut to a square during upload. If the logo touches the edges, any trimming, rounding or scaling will clip it. To fix it, rebuild the icon on a square artboard, center a simplified version of the mark with even padding on all sides, export a clean square file, upload it again in Wix, and then check the published site in a fresh browser session.

An artboard is the defined canvas area in a vector editor such as Illustrator, Figma or Inkscape. Only what sits inside the artboard is exported. Padding, also called the safe area, is the empty margin you leave between the artwork and the artboard edge so that nothing important sits at the boundary.

Find where the cropping happens

Before you edit anything, find out where the cropping happens. The fix depends on the cause.

Symptom | Likely cause | Fix

The icon is already cut off in the Wix upload preview or crop step | The source image is not square, or the crop frame was left on part of the image | Upload a square file and make sure any crop frame covers the whole image

The preview looks fine, but the icon is clipped in the browser tab | The mark runs to the edge of the canvas with no padding | Add even padding around the mark inside a square artboard

Only parts of an SVG are missing, such as stroke ends or a tail on a letter | The SVG viewBox is smaller than the artwork, or strokes extend past it | Outline strokes and make the viewBox enclose all the geometry

The icon is technically complete but unreadable | A full horizontal logo or wordmark was squeezed into a tiny square | Use the symbol or a monogram instead of the full lockup

The old or clipped icon still shows after you upload a new one | The browser or the site is serving a cached copy | Republish, then check in a private window and in a second browser

Prepare favicon artwork that won't crop

• 1. Start from the vector master of the logo, not a screenshot or a previously exported small image.
• 2. Create a square artboard. Equal width and height matters more than any particular number.
• 3. Choose a mark that works at tab size. Horizontal lockups and wordmarks rarely survive. An icon, a monogram or a single letterform usually reads better.
• 4. Center the mark and leave equal padding on all four sides so no point of the geometry touches the artboard edge.
• 5. Convert strokes to filled outlines and convert live text to outlines so that line weight and font substitution can't push shapes past the boundary.
• 6. Remove hidden layers, stray points and invisible objects outside the artboard. They can enlarge the bounding box, which is the smallest rectangle enclosing all objects, and throw off centering.
• 7. Decide on the background. A transparent background lets the tab color show through. A solid square or circle behind the mark gives you predictable contrast.

Check the SVG viewBox

If you work with an SVG file, look at its viewBox attribute. The viewBox defines the coordinate window that is actually displayed. Geometry outside it is clipped. For a favicon, the viewBox should be square and should contain all the artwork plus the padding. The illustrative example below uses a 100 by 100 coordinate space and scales the mark down slightly so it sits inside an even margin. The numbers are coordinates, not a Wix requirement.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <!-- Mark scaled to 80% and offset by 10 units, leaving equal padding on every side -->
  <g transform="translate(10 10) scale(0.8)">
    <path d="..." fill="#1A1A1A"/>
  </g>
</svg>

A file ending in .svg is not proof that it contains clean vector paths. Some SVGs only wrap an embedded raster image, which will not scale crisply and cannot be edited as geometry. Open the file in a vector editor or a text editor to confirm that it contains paths. The file format also tells you nothing about your right to use or modify the logo, so confirm that you have permission before you adapt someone else's mark.

Export and upload in Wix

• 1. Export from the square artboard so that the exported file stays square. If you export a raster image such as PNG, export it larger than the size shown in a browser tab so the downscaled result stays sharp.
• 2. Open your site's settings in Wix and find the favicon option.
• 3. Upload the new file. If Wix shows a crop or adjustment step, make sure the frame covers the entire square image and not a zoomed-in portion.
• 4. Save and publish the site. Favicon changes generally appear on the live site, not in the editor preview.

Verify the result

• 1. Open the published site in a private or incognito window to get around your cached copy.
• 2. Check it in at least one other browser, since browsers fetch and cache favicons independently.
• 3. Look at the icon in a light and a dark browser theme to confirm that the edges and contrast hold up.
• 4. If the old icon persists, allow some time for caches to refresh before you assume the upload failed, then try again in a new private window.
• 5. Zoom into a screenshot of the tab and confirm that no part of the mark meets the edge of the icon square.

What this guide could not confirm

No Wix-specific documentation was available for this guide. The exact pixel dimensions Wix recommends, the file formats its favicon uploader currently accepts (including whether it takes SVG directly), any plan or domain requirements for custom favicons, and how long changes take to appear are not stated here. Check Wix's current help center or the uploader itself for those details. The design advice above, such as a square canvas, even padding, outlined strokes and a correct viewBox, follows general vector and favicon practice and applies whatever the platform's exact limits are.