How to Prevent Wix Favicon Cropping

The short answer

A Wix favicon usually looks cropped for one of three reasons. The artwork is not square, so it gets trimmed or squeezed to fit a square slot. The logo touches the edges of its canvas, so there is no margin to absorb any masking or rounding. Or the export captured only the artwork's tight bounds instead of the full padded canvas. To prevent all three, start from a square artboard, place a simplified version of the mark inside a padded safe area, and export the whole artboard at the size and format Wix currently asks for. Then confirm the result on the live site.

A few terms are used throughout this guide:

• Favicon: the small icon a browser shows in tabs, bookmarks and history, and that some search and sharing surfaces also display.
• Artboard (called a frame in some apps): the fixed canvas area that defines what gets exported.
• Bounding box: the smallest rectangle that encloses an object. A tight export uses this rectangle and discards any surrounding space.
• Safe area: an inner zone of the canvas where the important parts of the mark sit, so edge trimming or masking cannot touch them.
• Padding: the empty space between the safe area and the canvas edge.

What is documented and what is a recommendation

No confirmed Wix specifications were available for this guide. That covers required pixel dimensions, accepted file formats, file-size limits, and the plan or domain conditions for custom favicons. Check Wix's current help documentation for these before you export, because they can change.

The rest of this guide is general design practice for small square icons. A square canvas, internal padding, simplified shapes and full-artboard export are recommendations, not Wix rules. They hold regardless of the exact numbers Wix publishes.

Before you start

• Confirm you have the right to use and modify the logo. Holding a file, whatever its extension, does not grant reuse permission.
• Open the source file and check that it actually contains editable paths. An SVG, AI, EPS or PDF can contain embedded raster images, so the extension alone does not prove vector content.
• Confirm in Wix that your site and plan allow a custom favicon, and find where the favicon setting sits in the current dashboard.
• Note the dimensions and file types Wix currently requests. You will need these at export.

Step by step: build favicon artwork that won't crop

1. Choose a mark that works at tiny sizes

Favicons display very small. A full horizontal logo with a wordmark will either shrink until it is illegible or get trimmed at the sides. Use the logo's symbol, a monogram, or a single initial instead. If none exists, create a simplified derivative and keep it consistent with the main brand artwork.

2. Set up a square artboard

Create a new square artboard. Its proportions matter more than its absolute size at this stage, because vector artwork scales cleanly. A non-square canvas is the most direct cause of side or top trimming once the file reaches a square favicon slot.

3. Prepare paths and typography

• Convert any text to outlines (also called creating outlines or converting to paths). Exported results then won't depend on fonts that may be missing, and the outlined text shows its true visible edges.
• Expand or outline strokes. A stroke centered on a path extends half its width outside the path, so the visible artwork can be larger than the selection suggests and can spill past the safe area.
• Remove hairline details, fine counters and small gaps that will fill in or disappear at favicon size.
• Check for stray points, hidden objects or clipping masks that enlarge the bounding box and shift centering.

4. Define the safe area and add padding

Draw a guide square, or an inset rectangle on a locked layer, inside the artboard to mark your safe area. Leave even padding on all four sides. Scale the mark until its visible extent, including expanded strokes, fits inside the guide. No precise padding value is documented here. Judge it by eye at the final display size, and allow more margin if the icon may appear inside rounded or circular containers in some contexts.

5. Center the mark optically

Align the mark to the center of the artboard, then check it visually. Asymmetric shapes such as a play arrow, a leaning letter or a mark with a heavy side can look off-center even when their bounding boxes are mathematically centered. Nudge until the mark looks balanced, while keeping every part inside the safe area.

6. Decide on the background

A transparent background lets the browser's tab color show through. That can make a dark mark vanish on a dark tab theme, or a light mark vanish on a light one. A solid square background gives predictable contrast, but it makes the canvas edges visible, so uneven padding becomes obvious. Choose based on your mark's contrast, and preview both light and dark browser themes if you can.

7. Export the full artboard, not the selection

This step is where padding is most often lost. Many design apps can export either the selected objects, which crops to their tight bounding box, or the entire artboard or frame. Choose the artboard or frame option so the padding is preserved. Export names and settings differ between applications and versions, so check the current documentation for your tool.

• Export at the exact square pixel dimensions Wix currently requests, or at a size Wix states it will scale down from.
• Use a format Wix lists as accepted.
• Keep transparency on if you chose a transparent background and the format supports it.
• After exporting, open the file in an image viewer and confirm its pixel dimensions are square and the padding is visible.

8. Check legibility at actual size

View the exported file at 100 percent zoom at the small sizes it will display at. If edges look blurry, adjust shapes so major horizontal and vertical edges fall on whole pixels at the target size. If the mark reads as a blob, simplify it further. Do not fix it by shrinking the padding.

9. Upload in Wix and publish

Upload the file in the favicon setting of your Wix dashboard. The location of this setting was not confirmed for this guide. If the uploader offers a crop, fit or reposition control, make sure the full square is selected so it does not trim your padding. Save, then publish the site so the change reaches the live version.

How to confirm the result

• Open the live site in a private or incognito window. Browsers cache favicons aggressively, and an old icon may persist in a normal window.
• Check the browser tab: the whole mark is visible, centered, and not touching the edges.
• Check a bookmark or the history list, where the icon may render at a different size.
• Check light and dark browser themes if your browser supports both.
• If the old icon still appears, clear the site's cached data or try another browser before re-editing the artwork. Search engines refresh favicons on their own schedule, so allow time before judging how it looks in search results.

Troubleshooting cropping symptoms

Symptom | Likely cause | Fix

Sides or top of the logo cut off | Non-square source file | Rebuild on a square artboard and re-export

Mark touches or bleeds past the edges | No padding, or strokes extending beyond the paths | Expand strokes, scale the mark into the safe area

Padding present in the design file but missing after export | Exported the selection instead of the artboard | Re-export using the full artboard or frame

Icon looks off-center | Hidden objects or stray points enlarging the bounding box, or an asymmetric shape | Delete stray elements, then center optically

Corners clipped in some places but not others | Rounded or circular display container | Increase padding so the mark sits well inside the corners

Old or cropped icon still shows after fixing | Browser or search-engine caching | Test in a private window and allow time for refresh

Remaining gaps to verify

Before you finalize, confirm these details against Wix's current documentation: the exact favicon dimensions and accepted formats, any file-size limit, the plan or domain requirements for a custom favicon, the current dashboard location of the setting, and whether the uploader crops or rescales files. None of these could be confirmed for this guide. The artwork method above stays valid whatever those values turn out to be.