How to Set a Favicon in Elementor

To set a favicon in Elementor, open the Elementor editor, go to Site Settings, choose Site Identity, and upload a square image in the favicon field. That field saves to the WordPress Site Icon, the same setting the WordPress Customizer controls, so you only set it once. A favicon is the small icon browsers show in tabs, bookmarks and history lists. WordPress also uses the site icon when someone saves the site to a phone home screen.

The file WordPress serves is a raster image, which means a fixed grid of pixels. You should still build it from vector artwork, which is made of mathematically defined paths and anchor points, so you can redraw and re-export it cleanly at any size. The native setting holds only one image. WordPress has no built-in dark mode version, so the artwork has to work on both light and dark backgrounds, or you need custom code. The custom code option is covered near the end of this guide.

Before You Start

• An administrator account, or another role that can edit site settings.
• Elementor installed and active on the site.
• A master logo file you can edit, ideally vector artwork with real paths rather than an embedded bitmap.
• Confirmed permission to use the logo. A file extension such as .svg, .ai or .eps does not prove the file contains editable vector paths. It also does not prove you have the right to reuse the mark.

Prepare the Logo Artwork

A full logo with a wordmark rarely survives favicon sizes. Use the symbol, an initial or a simple monogram instead. If the mark contains type, convert it to outlines. Converting turns live text into paths, so the shapes no longer depend on the font being installed. Even after conversion, more than one or two letters usually blur together in a browser tab.

• Work on a square artboard, which is the canvas area your editor exports.
• Center the mark and leave consistent padding on all sides so it does not touch the edges.
• Thicken thin strokes, then expand strokes to filled shapes so line weights stay fixed when you scale the artwork.
• Remove fine details, small gaps and tight counters (the enclosed spaces inside letters and shapes), because they fill in at small sizes.
• Align the main horizontal and vertical edges to the pixel grid at your export size to reduce blurry anti-aliasing.
• Zoom the preview to actual tab size and check that the shape is still recognizable.

Design for Light and Dark Tabs

Browser tab bars can be light or dark, depending on the browser theme and the operating system setting. A dark mark on a transparent background can disappear on a dark tab bar, and a light mark has the same problem on a light one. Because the standard site icon is a single image, pick one of these approaches.

Approach | How it behaves | Trade-off

Solid background tile | The mark sits on its own filled square or rounded square | Looks the same everywhere, but you lose transparency, and the tile color itself must stand out against both light and dark tab bars

Transparent mark with a contrasting outline | A thin light or dark keyline surrounds the mark | Keeps the logo silhouette, but the outline can vanish at the smallest sizes

Mid-tone mark | A single color with enough contrast against both light and dark tab bars | Limits your color choices, so you must test it on both

Separate light and dark SVG versions | The browser swaps colors based on the user's color-scheme preference | Needs custom code, and browser support varies

Export Settings

Export a square PNG from the artboard in the sRGB color profile. Keep transparency unless you chose the solid tile approach. The WordPress Site Icon panel shows the minimum size it expects, and it has long asked for at least 512 by 512 pixels. Check the message in your WordPress version and export at that size or larger. WordPress generates the smaller icon sizes from your upload, so preview the result after saving. WordPress blocks SVG uploads to the Media Library by default for security reasons, so use a PNG for the standard site icon.

Set the Favicon in Elementor

• 1. Open any page in the Elementor editor.
• 2. Open the editor's main menu and choose Site Settings.
• 3. Select Site Identity.
• 4. In the favicon field, choose an image from the Media Library or upload your PNG.
• 5. If WordPress shows a crop step, keep the whole square. If it asks you to crop heavily, re-export the artwork as an exact square.
• 6. Save the change with the editor's update or publish button.

Elementor has moved and renamed its menu items across versions, so your labels may differ slightly. If you cannot find the field, you can set the same icon in WordPress itself. With classic themes, go to Appearance, then Customize, then Site Identity, then Site Icon. With block themes, the Customizer may be hidden, and the site icon setting sits elsewhere depending on your WordPress version. Every route updates the same setting. Some themes and SEO plugins add their own favicon tags. If yours does, turn that feature off so the page does not carry competing icons.

Confirm the Result

• Open the site in a private browser window and check the tab icon.
• View the page source and search for rel="icon". The tags should point to your new image, and there should be only one set of icon tags.
• Check a bookmark or history entry for the site.
• Switch your browser or operating system between light and dark themes and confirm the icon stays visible in both.
• On a phone, add the site to the home screen and check the larger icon.
• If the old icon still shows, clear your caching plugin, any CDN cache and your browser cache. Browsers hold on to favicons stubbornly, so the change can take longer to appear than other updates.

Optional: A Favicon That Switches for Dark Mode

An SVG favicon can include a CSS media query on prefers-color-scheme, so its colors change with the user's color preference. That preference is what the browser reports, and it may not match a custom browser theme. Browsers that support SVG favicons can apply the switch. Others ignore the SVG and use the PNG site icon instead, so keep the PNG in place as the fallback. Support differs across browsers and versions, so test in the browsers your audience uses.

<style>
  path { fill: #1a1a1a; }
  @media (prefers-color-scheme: dark) {
    path { fill: #f5f5f5; }
  }
</style>
<path d="..." />

Put the style block inside the root svg element that your vector editor exports, and keep that element's namespace declaration and square viewBox. The color values above are placeholders, so replace them with your brand colors after checking contrast. Reference the file from the page head with a tag like the one below.

<link rel="icon" href="YOUR-SVG-FAVICON-PATH" type="image/svg+xml">

Elementor Pro has a Custom Code feature that can insert this tag into the page head. Without Pro, a child theme or a code snippets plugin can do the same job. Because WordPress blocks SVG uploads by default, host the file in a way that fits your security policy, for example through a plugin that sanitizes SVG files. Browsers choose between multiple icon tags in different ways, so confirm in the page source and in the tab itself which icon actually appears.

Gaps to Verify

No version-specific documentation was supplied for this guide. Before you rely on these steps, confirm the current Elementor menu names, the minimum size message in your WordPress Site Icon panel, and SVG favicon support in the browsers you need to reach.