How to Add or Change a Favicon in Elementor

To add or change a favicon on an Elementor site, open any page in the Elementor editor, go to Site Settings, choose Site Identity, and upload a square image in the Site Favicon field. Save or update, then reload the site in a fresh browser session to confirm the new icon. Elementor writes this to WordPress's built-in Site Icon setting, so the same favicon can also be managed from the WordPress Customizer. The rest of this guide covers both routes, how to prepare the icon from a vector logo, and what to check when the old favicon keeps showing.

What a favicon is in a WordPress and Elementor setup

A favicon is the small icon browsers show in tabs, bookmarks and history. On mobile devices it can also appear as a home-screen shortcut icon. WordPress calls this the Site Icon. It is separate from your site logo, which appears inside the page layout, usually in the header. Elementor exposes both in one panel, but changing one does not change the other.

When you upload a site icon, WordPress generates several resized copies and adds the matching tags to each page's head. The file you upload is the master, and the browser-facing favicons are derived from it. That is why the quality and proportions of the upload matter more than its format.

Steps to set the favicon in Elementor

• 1. Open any page or template with Edit with Elementor.
• 2. Open the main menu in the editor panel and select Site Settings.
• 3. Choose Site Identity.
• 4. Under Site Favicon, click the image area and upload a new image or pick one from the Media Library.
• 5. If WordPress shows a cropping step, adjust the crop to a square and confirm.
• 6. Click Update or Save Changes.
• 7. Load the live site in a private window and check the browser tab.

To change an existing favicon, follow the same steps and replace the current image. To remove it, clear the field and save. With no site icon set, browsers may show a generic icon or a favicon file supplied by the theme or server.

Elementor's menu labels and panel layout have changed between versions. If your editor does not match these labels, look for the site-wide settings area, not page settings. The favicon is a site-level setting.

Setting it from WordPress instead

Because Elementor uses the WordPress Site Icon setting, you can also go to Appearance, then Customize, then Site Identity, and set the Site Icon there. Whichever route you use last wins, since both write to the same value. Some block themes hide the Customizer. Depending on your WordPress version, the site icon may then be found under the general settings or in the site editor instead. On such sites, Elementor's Site Settings panel is often the most direct route.

Preparing the favicon from a vector logo

WordPress recommends a square site icon of at least 512 by 512 pixels. A full horizontal logo rarely works at tab size, where it is shown at roughly 16 to 32 pixels. Wordmarks and fine details become unreadable at that scale. A favicon usually works better built from a simplified symbol, monogram or single initial taken from the logo.

• Start from the editable vector master, not from a screenshot or a scaled-down web image.
• Place the mark on a square artboard with modest, even padding. The WordPress cropper will otherwise cut or squeeze it.
• Remove thin strokes, small text and subtle gradients that disappear at small sizes.
• Decide on the background: a transparent icon may lose contrast on dark browser themes, while a solid shape keeps it visible on any tab colour.
• Export a PNG at 512 by 512 pixels, or larger at the same proportions, for upload.
• Preview the exported file at 16 and 32 pixels before uploading to judge legibility.

Can you upload an SVG favicon?

WordPress blocks SVG uploads to the Media Library by default. Elementor offers an option to allow SVG uploads, but the Site Icon feature is designed around raster images it can crop and resize. An SVG may be rejected or may not produce usable favicon sizes through that field. For the standard Elementor or Customizer workflow, upload a PNG exported from your vector artwork.

Browsers can display SVG favicons. Serving one, though, means adding your own icon tags to the page head through the theme, a child theme or a header-code tool. That is a developer-level change outside the Site Favicon field. It is usually paired with a PNG fallback for browsers and platforms that ignore SVG icons.

An .svg extension does not prove the file contains true vector paths. Some SVG files only wrap an embedded raster image, and these look soft or pixelated when resized. Open the file in a vector editor and confirm the shapes are editable paths before treating it as a clean master for favicon exports.

When the new favicon does not appear

Browsers cache favicons aggressively. The old icon can persist for some time even when the change was saved correctly. Work through these checks in order:

• Open the site in a private or incognito window, or in a different browser.
• Clear your WordPress caching plugin, server cache and any CDN cache, since cached page HTML can still reference the old icon files.
• Confirm the change saved by reopening Site Settings in Elementor or the Customizer's Site Identity panel.
• View the page source and search for rel="icon". If you see icon tags that WordPress did not generate, or a hard-coded favicon file, a theme, SEO plugin or custom header code may be overriding the site icon.
• Check whether the server root holds a separate favicon file. Some browsers request it directly even when the page specifies another icon.

When WordPress manages the icon, the page source typically contains tags similar to the following, with your own file paths in place of the placeholders:

<link rel="icon" href="ICON-32-PATH" sizes="32x32" />
<link rel="icon" href="ICON-192-PATH" sizes="192x192" />
<link rel="apple-touch-icon" href="ICON-180-PATH" />
<meta name="msapplication-TileImage" content="ICON-270-PATH" />

If these tags point to your new image, the site is set up correctly. Any remaining old icon comes from browser or server caching.

Permission to use the logo as a favicon

A favicon is a public use of a brand mark. Being able to download a logo file, or having it in your media library, does not by itself grant permission to crop, simplify or recolour it. Logos can also include licensed fonts and trademarked elements with their own terms. If you are building a site for a client or another brand, confirm that the owner approves a modified icon version and supplies or signs off on the source artwork.

Limits of this guide

No version-specific documentation, screenshots or test results were supplied for this article. The steps reflect the general structure of Elementor's Site Settings and WordPress's Site Icon feature. Exact menu names, cropping behaviour and SVG handling can differ by Elementor version, WordPress version, theme and installed plugins. If your interface differs, the reliable rule is that the favicon is a site-wide identity setting stored as the WordPress Site Icon.