How to Add a Favicon in WordPress, Shopify, Wix, Squarespace, and Webflow

Overview

A favicon is a small icon tied to your site’s identity. It appears in browser tabs, bookmarks, app shortcuts, and other interface surfaces where a compact visual cue matters. For developers, site owners, and IT teams, it is also one of those details that tends to break quietly: the icon looks fine on one site, disappears on another, or keeps showing an old version because of caching.

The easiest way to think about favicon setup is this: each platform gives you a visual upload path, but the underlying job is always the same. You need a clean source file, a predictable update workflow, and a quick verification routine after publishing.

This article focuses on five common platforms:

• WordPress via the Site Identity settings or theme customization area
• Shopify via theme customization
• Wix via site settings or branding controls
• Squarespace via browser icon settings
• Webflow via project settings or design controls

Because dashboards change over time, the most durable skill is not memorizing one menu path. It is knowing what to prepare, what to verify, and what to track every time you add or replace a favicon.

Before you start, prepare these assets and checks:

• A square source icon with clear contrast at small sizes
• A PNG master file, and optionally ICO or SVG depending on your broader setup
• A version-controlled filename or internal asset note so your team knows which icon is current
• A browser test plan: desktop tab, mobile bookmark, and at least one private browsing session

If you need help choosing formats first, see SVG vs PNG vs ICO Favicons: Which Format to Use in 2026 and Favicon Size Guide 2026: Every Icon Dimension You Need for Browsers, iPhone, Android, and PWA.

How to add a favicon in WordPress

In WordPress, the favicon is usually managed as the Site Icon. In many setups, the path runs through Appearance and then the customization or identity area. Look for a section labeled Site Identity, where you can upload or replace the site icon.

A practical WordPress workflow:

1. Open the site customization area from the admin dashboard.
2. Find Site Identity or the equivalent branding section in your theme.
3. Upload your square icon file.
4. Save or publish the changes.
5. Open the site in a fresh browser session to confirm the icon appears.

WordPress can vary depending on theme architecture, site editor behavior, and plugins. If the site icon does not appear after updating, check whether a performance or SEO plugin is inserting conflicting favicon markup, or whether server and browser cache are still serving the old asset.

How to add a favicon in Shopify

In Shopify, the favicon is commonly managed inside the active theme’s customization settings. The exact menu wording may change, but the icon is usually part of brand, logo, or theme settings rather than content pages.

A practical Shopify workflow:

1. Open the online store theme editor for the live theme.
2. Go to theme settings and look for branding or favicon controls.
3. Upload the icon image and save changes.
4. Preview the storefront in a new tab and verify the icon loads correctly.

On Shopify sites, it is especially useful to check both the live storefront and any password-protected or preview modes you use internally. A team may think the favicon is updated because it appears in preview, while the live storefront still shows an older cached icon.

How to add a favicon in Wix

Wix typically places favicon controls inside site settings, branding, or business info areas. The exact location can shift as the editor evolves, so search for favicon directly in settings if needed.

A practical Wix workflow:

1. Open the site dashboard or editor settings.
2. Find the favicon or website icon option.
3. Upload a square image file and save or publish.
4. Check the public site in a separate browser window.

With Wix, be careful about unpublished editor changes. The favicon may look updated inside the builder, but the public site will not reflect it until the site is published.

How to add a favicon in Squarespace

Squarespace often labels this asset as a Browser Icon. You will usually find it in design or branding-related settings.

A practical Squarespace workflow:

1. Open site settings and navigate to the design or branding area.
2. Find the browser icon setting.
3. Upload your icon file and save.
4. Refresh the public site in a clean session to confirm the change.

If the icon appears inconsistent across devices, review image simplicity first. A detailed mark that looks acceptable in a large preview may become unreadable in a browser tab.

How to add a favicon in Webflow

Webflow generally manages the favicon at the project level rather than inside page content. This makes it easier to keep the asset consistent across a site, but it also means designers and developers need to coordinate publishing.

A practical Webflow workflow:

1. Open project settings or site-wide design settings.
2. Locate the favicon field.
3. Upload the icon file.
4. Publish the site to the relevant domains.
5. Verify on the production domain, not only the staging or preview domain.

For Webflow projects, always confirm which domain you tested. Teams often validate on a temporary subdomain and miss an issue on the custom production domain.

What to track

If you only remember one part of this article, make it this section. A favicon setup is rarely a one-time task. It is a lightweight asset management process, and the sites that avoid recurring issues are the ones that track a small set of variables consistently.

Here is what to track across all five platforms.

1. Source asset version

Keep one canonical master file for the favicon, and note when it was last changed. If different team members export their own versions, brand drift appears quickly. A simple naming convention such as favicon-master-v3 is enough to avoid confusion.

2. File format in use

Track whether the platform is using PNG, ICO, SVG, or a platform-generated derivative. This matters because some systems accept one format for upload but generate others behind the scenes. If you later troubleshoot a blurry or missing icon, knowing the original format saves time.

3. Upload location in the dashboard

Document where the setting lives today. This is especially useful for recurring maintenance. Instead of rediscovering the path every quarter, keep a short internal note such as:

• WordPress: Appearance → Site Identity
• Shopify: Theme editor → Theme settings → Favicon
• Wix: Settings → Favicon
• Squarespace: Design or browser icon settings
• Webflow: Project settings → Favicon

The exact wording may change, but even a rough map helps.

4. Theme or template dependency

Some favicon behavior depends on the active theme or site template. Track whether the icon is attached to a global site setting or a theme-specific configuration. This becomes important during redesigns, replatforming, or theme replacements.

5. Publish requirement

Not every platform applies the change instantly. Track whether you must publish the site, republish the theme, or simply save the setting. This one detail prevents many false alarms.

6. Cache behavior

Favicon caching is a common reason teams think an update failed. Keep a note of what you had to clear last time: browser cache, CDN cache, platform cache, or all three. This is not glamorous, but it is very practical.

7. Visual legibility at small sizes

Track whether the current icon remains identifiable at 16x16 and 32x32. A logo that works on a business card may fail as a favicon. If the mark includes thin lines, dense text, or low contrast, note that as a design risk.

8. Cross-surface consistency

Your site icon should fit into a broader identity workflow. If your site uses a favicon, app icon, social avatar, and developer profile image, track whether they still belong to the same visual system. For teams building a stronger identity stack, related reading includes How to Create a Professional Avatar for LinkedIn, GitHub, Slack, and Email Profiles and Should You Use a Real Photo, Illustration, or AI Avatar? A Platform-by-Platform Trust Guide.

Cadence and checkpoints

The easiest way to keep favicon setup under control is to review it on a recurring cadence instead of waiting for something to break. A monthly check is useful for agencies or teams managing many client sites. A quarterly check is usually enough for a single stable site.

Monthly checkpoints for active sites

• Confirm the favicon still appears on the live domain
• Check that a recent theme update did not override branding settings
• Verify the icon on desktop and mobile browsers
• Test in a private window to reduce cache confusion
• Note any dashboard navigation changes for your internal documentation

Quarterly checkpoints for stable sites

• Review whether the favicon still matches the current brand mark
• Confirm the uploaded asset is still the correct source version
• Check whether the site now needs broader icon coverage for PWA or mobile surfaces
• Review whether a new theme, redesign, or CMS upgrade changed the setup path

Checkpoint after any site change

Do not wait for a scheduled review if one of these events happens:

• Theme or template change
• CMS major update
• Domain migration
• CDN or cache layer reconfiguration
• Brand refresh or logo simplification
• Replatforming from one CMS to another

If you regularly create new icon variants, a dedicated favicon generator can shorten the workflow and make versioning easier across platforms.

How to interpret changes

When a favicon behaves differently from what you expect, the right response depends on the kind of change you are seeing. A useful habit is to separate platform issues from asset issues.

If the favicon does not appear at all

Start with the simplest explanation:

• The change was saved but not published
• The setting was updated in a draft or preview environment only
• The browser is showing a cached version
• The active theme is not the theme you edited

First verify the correct environment, then test in another browser, then look for conflicting theme or plugin behavior.

If the favicon looks blurry

This usually points to an asset problem rather than a platform problem. The icon may be too detailed, too small at export, or visually weak at tiny sizes. Revisit the source file and simplify the mark. Strong favicons usually rely on bold shapes, limited detail, and clear contrast.

If the old favicon keeps returning

This often signals caching rather than a failed upload. Test the site in a private window, then consider whether your browser, CDN, or platform edge cache is still serving an older asset. If your team uses deployment pipelines, make sure the newest asset is actually what reached production.

If different devices show different icons

That can mean the platform is generating multiple derivatives, or that separate surfaces are pulling from different icon references. Review your current icon stack and compare it against your broader implementation. If you need a deeper technical format refresher, see SVG vs PNG vs ICO Favicons.

If the dashboard path changed

This is the most common update issue in CMS-based workflows. Treat it as a documentation problem, not a branding problem. Update your internal notes with the new path immediately. The article you are reading is built for exactly that recurring need: the core workflow stays the same even as UI labels shift.

When to revisit

Revisit your favicon setup whenever the site’s identity, infrastructure, or editor experience changes. A favicon is small, but it touches branding, publishing, and browser behavior, so it deserves a short operational checklist.

Use this action plan whenever you return to the task:

1. Audit the current icon
   Open the live site on desktop and mobile. Check whether the icon is visible, legible, and current.
2. Confirm the platform path
   Find the favicon setting in WordPress, Shopify, Wix, Squarespace, or Webflow, and update your internal note if the menu location has changed.
3. Verify the source file
   Make sure the uploaded icon matches the latest approved brand asset, not an older export from a previous redesign.
4. Publish and retest
   After updating, test in a clean browser session and on the live production domain.
5. Log the change
   Record the date, platform, asset version, and any cache-clearing steps required. This turns a one-off fix into a repeatable workflow.

If your team manages several sites, turn this into a quarterly checklist. If you are a solo creator or developer, revisit it when you change themes, update branding, launch a redesign, or notice inconsistent browser behavior.

For teams building a broader identity workflow, the favicon should not be isolated from the rest of your visual presence. It works best when it fits a coherent system that includes profile images, creator branding, and platform-specific identity assets. Related guides worth bookmarking include Best Favicon Generator Tools Compared, Favicon Size Guide 2026, and AI Avatar Generator Comparison.

The main takeaway is simple: adding a favicon on any CMS is easy once, but maintaining it well is a repeatable process. Keep a clean asset, a short path-to-setting note, and a scheduled verification habit. That is what makes this a small branding task instead of a recurring support issue.