How to Set a Favicon in Elementor
Add a favicon to an Elementor site through Site Settings or the WordPress Site Icon, prepare square logo artwork from a vector source, and confirm the icon appears.
Contents
The Short Answer
Elementor does not keep a separate favicon system. It uses WordPress's Site Icon setting, which you can reach from inside the Elementor editor or from the WordPress Customizer. Whichever route you use, you upload one square image and WordPress generates the smaller versions it needs. A change made in one place appears in the other.
A favicon is the small icon that browsers show in tabs, bookmarks and history lists. WordPress calls it the Site Icon, and Elementor labels the same field Site Favicon.
Steps in the Elementor Editor
- 1. Open any page or template with Elementor.
- 2. Open the editor's main menu (the Elementor icon or menu button in the top-left corner) and choose Site Settings.
- 3. Open Site Identity.
- 4. Under Site Favicon, click the image placeholder and choose an image from the Media Library, or upload a new one.
- 5. If WordPress asks you to crop the image, keep the full square or adjust the frame, then confirm.
- 6. Click Update or Save Changes to publish the setting.
Elementor has moved and renamed parts of its editor interface between releases, so your version may use slightly different labels. If you cannot find Site Settings, use the WordPress method below. It writes to the same setting.
Alternative: The WordPress Customizer
- 1. In the WordPress dashboard, go to Appearance, then Customize.
- 2. Open Site Identity.
- 3. Under Site Icon, select or upload the image and crop it if prompted.
- 4. Click Publish.
Some block themes do not show the Customizer in the Appearance menu. In that case, the Elementor route is usually the simplest option. Depending on your WordPress version, the Site Icon field may also appear in General Settings.
Preparing the Artwork From a Vector Logo
A vector logo stores shapes as mathematical paths rather than pixels. That is why it can be scaled to any size without losing sharpness. SVG (Scalable Vector Graphics) is the common web format for vector artwork. A raster image, such as a PNG or JPG, is a fixed grid of pixels.
WordPress builds the site icon from a raster image. By default, its Media Library also blocks SVG uploads for security reasons. In practice, you keep the SVG as your master file and export a PNG from it for the favicon field. A file ending in .svg does not prove that it contains only clean vector paths: SVG files can embed raster images. The extension also does not confirm that you have permission to use the logo.
| Task | Recommendation |
| Canvas shape | Use a square artboard (the working canvas in a vector editor). WordPress expects a square site icon, and non-square images get cropped. |
| Export size | Export well above the final display size. The WordPress interface states a minimum of 512 × 512 pixels for site icons. Check the guidance shown in your version. |
| File format | PNG is a safe choice because it supports transparency and stays sharp on flat graphics. |
| Simplify the mark | Use the logo's symbol or an initial rather than a full wordmark. Fine type and thin strokes become unreadable at tab size. |
| Contrast | Test the icon on both light and dark browser tab colors. Add a solid background shape if a transparent mark disappears on one of them. |
| Padding | Leave a small, even margin inside the square so the shape is not clipped or crowded. |
These points are design recommendations, except where WordPress itself states a requirement. Before exporting, preview the artwork at a very small size in your vector editor. If you cannot recognize it there, simplify the shapes before you upload.
Verifying the Result
- 1. Open the live site in a private or incognito window, which loads a fresh copy instead of a cached one.
- 2. Check the browser tab for the new icon.
- 3. If the old icon or a blank icon still appears, clear your site's caching plugin, server cache or CDN cache, then reload.
- 4. Do a hard refresh, or clear the browser cache. Browsers often hold on to favicons longer than other files.
- 5. Check on a phone as well. Mobile home-screen shortcuts may use the larger generated versions of the icon.
If the icon still does not update, check whether your theme or a plugin outputs its own favicon code. Duplicate favicon declarations can override the WordPress setting. Diagnosing that requires looking at your page source or plugin settings.
Evidence Gaps
No version-specific Elementor documentation was supplied for this guide. Exact menu labels, button names and the presence of the Customizer depend on your Elementor, WordPress and theme versions. The steps above describe the general workflow, so confirm the details against the interface in front of you.