How to Add a Favicon in Wix

To add a favicon in Wix, upload a square image of your logo mark in your site's settings, save, and republish the site. A favicon is the small icon browsers show in tabs, bookmarks and history lists. Wix shows the icon you upload. Most of the real work happens before upload: you turn a vector logo into a simple square image that stays readable at a very small size and on both light and dark browser themes.

Key terms

• Vector artwork: a logo built from mathematically defined paths, so it can be scaled to any size without losing sharpness. Common working formats include AI, EPS, PDF and SVG.
• Raster image: a fixed grid of pixels, such as a PNG or JPG. Favicons are usually delivered as raster images, so the vector logo is exported (rasterized) at a specific pixel size.
• Path: a single shape outline made of anchor points and curves. Fewer, simpler paths survive small sizes better.
• Outlining text: converting live type into vector paths, so the letterforms no longer depend on an installed font.
• Artboard: the defined canvas area in a vector editor that sets the export boundaries.

Before you start

• Check your Wix plan. Wix has generally limited custom favicons to premium sites with a connected domain. Confirm what your current plan includes before you prepare artwork. If the favicon option is missing or locked in your dashboard, your plan is the likely reason.
• Confirm you have the right to use the logo. A file you were sent, or one you downloaded, is not proof of permission to reuse it. A file extension also doesn't prove the content: an SVG or PDF can contain embedded raster images instead of editable paths.
• Find the master vector file. Open it and check that the logo mark is made of selectable paths, not a single embedded picture.
• Check Wix's current image requirements. This guide does not list Wix's accepted file formats or recommended pixel dimensions because they could not be confirmed. Read them in the upload dialog or in Wix's help documentation before you export.

Step 1: Prepare the favicon artwork in your vector editor

• 1. Create a square artboard. Favicons display in a square space, and a non-square image may be cropped or padded unevenly.
• 2. Choose the simplest recognizable part of your logo, such as a symbol, monogram or initial. A full wordmark or tagline usually becomes illegible at tab size.
• 3. Convert any text in the mark to outlines, so the letterforms render correctly no matter which fonts are installed.
• 4. Expand strokes into filled shapes, and merge overlapping shapes where it doesn't change the design. Thin strokes can vanish or blur once the image is reduced.
• 5. Remove fine detail: hairlines, small counters, gradients and subtle texture. Thicken thin parts so they hold up when reduced.
• 6. Center the mark and leave a small, even margin around it, so it doesn't look cramped against the edge of the tab icon.
• 7. Decide on a background, either transparent or a solid tile. This choice affects how the icon looks in dark mode (see the dark mode section below).
• 8. Preview the artboard at a very small zoom level, or export a test image and view it at actual size. If you can't recognize the mark, simplify it further.

Step 2: Export a raster file for upload

• 1. Export from the square artboard, not from the selection bounds. This keeps the margins you set.
• 2. Use a format that Wix currently accepts. PNG is a common choice for logo marks because it supports transparency and keeps edges sharp.
• 3. Export at the dimensions Wix recommends. If you can't confirm a size, export a larger square image instead of a small one, because downscaling usually looks better than upscaling.
• 4. Open the exported file and check four things: the canvas is square, the edges are sharp, transparency appears where you intended it, and no stray elements were exported.
• 5. Keep the vector master and the exported file together, so you can re-export later without redrawing anything.

Step 3: Upload the favicon in Wix

Wix updates its dashboard periodically, so menu names and locations may differ from the description below. The general path has been: open your site's dashboard, go to Settings, then open the website or general settings area and find the Favicon option. Upload your exported image, check the preview if Wix shows one, and save. If you can't find these labels, search for "favicon" in the dashboard's settings search or in Wix's help documentation.

• 1. Open the dashboard for the correct site.
• 2. Go to Settings and find the Favicon option.
• 3. Upload the exported image.
• 4. Save the change.
• 5. Publish the site if Wix asks you to. Some site changes only appear on the live site after you publish.

Step 4: Confirm the result

• Open the live site in a private or incognito browser window. Browsers cache favicons aggressively, so a normal window may still show the old icon.
• Check the browser tab. The new icon should appear in place of the previous Wix default or your old favicon.
• Check the icon in more than one browser if you can, since browsers can display and cache favicons differently.
• Switch your browser or operating system between light and dark themes and look at the tab each time. The mark should stay visible in both.
• Bookmark the page and check the bookmark icon. This is another place where the icon appears at a small size.
• Expect search results to lag. Search engines refresh favicons on their own schedule, so an old icon there doesn't mean the upload failed.

Designing for dark mode

Browser tabs can be light or dark depending on the reader's theme. A dark logo on a transparent background can almost disappear on a dark tab, and a white logo can disappear on a light one. Wix's standard favicon setting takes a single uploaded image. This guide found no documented Wix option for uploading a separate dark-mode favicon, so plan for one image that works on both backgrounds.

• Use a solid background tile. Place the mark on a filled square or rounded square in a brand color that contrasts with the mark. The tile then controls the contrast instead of the browser theme. This is a design recommendation, not a Wix requirement.
• Use a mid-tone or high-saturation color. Some brand colors stay visible on both light and dark tabs. Test this; don't assume it.
• Add a contrasting outline. A thin light or dark keyline around a transparent mark can separate it from either background. Make it thick enough to survive the reduced size.
• Test both themes before you upload. Place the exported image on a white square and on a near-black square in your editor, and view each at small size.

Some websites serve theme-aware favicons through custom code, for example an SVG favicon that changes color based on the user's color-scheme preference. Whether this works reliably on a Wix site, and how it would interact with the favicon Wix inserts, could not be confirmed here. Treat it as an unverified option. If you try it, test it carefully in several browsers before relying on it.

If the favicon doesn't appear

• The option is missing or locked: check whether your plan and domain setup support a custom favicon.
• The old icon still shows: reload in a private window or clear the browser cache, and confirm the site was published after you saved.
• The icon looks blurry or cropped: re-export from a square artboard at Wix's recommended dimensions, and simplify the artwork further.
• The icon disappears on some tabs: add a background tile or contrasting outline, as described in the dark mode section.