How to add and fix an icon in WordPress

“Icon in WordPress” covers several unrelated jobs, and most bad advice comes from mixing them up. Each one has its own setting and its own ways of breaking:

• Site icon (favicon): the small square shown in browser tabs, bookmarks and Google results. Core WordPress handles it.
• Content icons: icons in menus, buttons, lists and social links. These come from a block, a plugin, your theme or Font Awesome.
• Dashicons: the icon font used inside wp-admin.
• Registered SVG icons: a developer feature that arrived with WordPress 7.1.

Work out which one you mean first. The rest of this guide follows that order.

How do you set the site icon in WordPress?

Upload a square image in the Site Icon field and save. You don’t need a plugin, and you don’t need to create a favicon.ico file. WordPress.org’s documentation recommends a square image of at least 512 x 512 pixels, with PNG as the preferred format.

Where the field lives depends on your version, so check which WordPress version you run before you follow a tutorial. Many older guides still point at the Customizer.

1. Prepare a square image of at least 512 x 512 pixels. Put a simple mark in the centre and leave space around it. Words and fine lines become unreadable at 16 pixels.
2. On WordPress 6.5 or later, go to Settings > General and click Choose a Site Icon. On WordPress 4.3 to 6.4, go to Appearance > Customize > Site Identity and click Select Image.
3. Upload the image and confirm the crop if WordPress asks for one.
4. Click Save Changes (or Publish in the Customizer). Choosing an image without saving leaves the old icon in place.
5. Open the site in a private window and look at the tab.

The General Settings screen provides a dedicated Site Icon option to upload and set your favicon directly without opening the Customizer. · Source: www.hostgator.com

WordPress asks for 512 pixels because it builds the smaller sizes that tabs, bookmarks and home-screen shortcuts need from that one image. The browser tab never shows a 512-pixel icon. Google’s minimum of 8 x 8 pixels is a separate rule for search results, so the two numbers don’t contradict each other.

The site icon and the site logo are separate settings. WordPress.org’s Site Logo block documentation explains that the logo appears on your pages and the site icon appears in the browser. Changing the logo or a featured image does nothing to the tab. WooCommerce’s Storefront theme keeps them apart too: both sit under Customizer > Site Identity as separate fields, and there is no separate “WooCommerce favicon” setting.

Why does the old favicon still show after you change it?

Usually a cache is still serving the old version. Check the URL first, though, because clearing a cache won’t fix a broken file. Work through these checks in order:

1. Confirm the change saved. Reload Settings > General and make sure the new image is in the field.
2. Read what the page actually outputs. View the page source of your homepage and search for rel="icon". Open the URL in its href in a new tab. You should see your image. If you get a 404, a blank page or your homepage, the file is the problem, not the cache.
3. Look for a second source. A favicon plugin, the theme or a hard-coded line in header.php can output its own icon that competes with core. And if a favicon plugin was supplying the markup and you deactivate it, the icon disappears with it.
4. Purge each cache layer. Clear the caching plugin, then the host’s cache, then the CDN, then reload in a private window. On Bluehost, for example, the host cache is under Websites > Manage Site > Performance > Clear all cache.
5. Wait out the browser. Browsers keep their own favicon cache. If the source already points at the new file, a stubborn old tab icon is only a local display problem.

A WordPress.org support thread from June 2026 shows why step 2 comes before step 4. The icon showed correctly in the admin but not on the live site, and the poster had already tried every cache. The cropped image file the markup pointed at didn’t exist. The same order applies to any change that doesn’t appear. Our guide to why a WordPress change isn’t showing walks through the cache layers in more detail.

Why doesn’t Google show your favicon in search results?

Google has its own rules and its own timing. Google Search Central’s favicon documentation asks for the following:

• A <link rel="icon"> tag on the homepage.
• Permission for Googlebot to crawl the homepage, and for Googlebot-Image to crawl the icon file.
• A square image of at least 8 x 8 pixels. Google recommends larger than 48 x 48.
• A URL that doesn’t keep changing.

After that, Google has to recrawl the homepage, which it says can take days to weeks. You can ask for a recrawl with the URL Inspection tool in Search Console. Google also says that meeting the rules doesn’t guarantee the icon will appear.

WordPress’s Site Icon output meets these rules by default. The usual problems are a robots.txt rule or security plugin that blocks the image, or an icon swapped repeatedly while you wait. Each new upload gets a new URL, which works against Google’s request for a stable one.

How do you add icons to pages and menus?

Use the smallest tool that does the job. For social profile links, core WordPress has a Social Icons block. Add it from the block inserter, pick each network, and paste the profile URL.

For general icons in the block editor, search the inserter for “Icon”. Depending on your version and theme, a core block may appear. If it doesn’t, The Icon Block plugin adds a single block containing the WordPress icon library of 290+ SVG icons, and it also accepts your own SVG.

For icons beside classic menu items, the Menu Icons by Themeisle plugin adds an icon picker to Appearance > Menus. It supports Font Awesome, Dashicons and image icons. On a block theme, open the Navigation block in the Site Editor and select an individual item to see which visual options your theme offers.

Two judgments save trouble later. An icon should support a label, not replace it: a phone icon next to “Contact” helps, but a phone icon on its own makes visitors guess. And pick one icon library for the whole site. A Font Awesome set in the menu, a builder’s set in the footer and Dashicons in a widget look inconsistent, and each extra library is another thing that can break after an update.

Why do Font Awesome icons show as blank squares?

The icon font is either not loading or not matching the markup. Font Awesome failures rarely produce an error message. You see empty boxes, question marks, the wrong symbol, or some icons working while others don’t. These causes, ranked by how often they come up in support forums (a rough ranking, not a measurement), cover most cases.

1. A stale cache after an update

The theme or plugin updated, but cached CSS still points at the old font files. Purge every cache layer. If you use a page builder, regenerate its CSS too. In Elementor that is under the plugin’s Tools screen.

2. Two versions loaded at once

The theme loads one Font Awesome version and a plugin loads another, and the incomplete stylesheet wins. In one WordPress.org thread, an events plugin’s Font Awesome stylesheet overrode the Avada theme’s. Installing a third Font Awesome loader makes this worse. Find out which stylesheets actually load, keep one, and use the conflict detection in the official Font Awesome plugin to find the others.

3. Missing font files

This is common after a migration. Open DevTools (F12), go to the Network tab, reload, and filter for woff. A 404 on a .woff2, .woff, .ttf or .eot file means the path is wrong or the file didn’t make the move.

4. Markup that doesn’t match the loaded version

Font Awesome changed its class prefixes between versions 4, 5 and 6, so old markup can point at icons that no longer exist under that name. When the Elementor icon problem in a WordPress.org thread came up, support suggested regenerating CSS, clearing caches and turning on Load Font Awesome 4 Support. Also check that the icon is in your edition: a Pro icon won’t render on the Free set.

5. CORS, MIME type or HTTPS blocking

Fonts served from a CDN need a CORS header. WP Rocket’s documentation lists the console error to look for: “Access to Font has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.” A message saying the header “contains multiple values” means the rule was added in two places. Fixing either one means editing .htaccess or the NGINX configuration.

6. A builder or theme setting

Builders have their own icon-loading options. Elegant Themes’ guide to fixing broken icons in Divi points at its Dynamic Icons setting, and Elementor has options for how it loads icon assets.

Change one thing at a time and recheck. If you change five things and the icons return, you won’t know which change fixed it. Practitioners also warn against site-wide fixes such as a global font rule. Other icons depend on the font settings you would be overriding, so target the broken element instead. If an update triggered the problem, rolling the plugin back is a reasonable stopgap until a fixed release ships. Our guide to plugins that stop working covers that process.

Should you use Dashicons or SVG on the front end?

Keep Dashicons in the admin. WordPress’s developer resources describe Dashicons as the official icon font of the admin since 3.8, and the project no longer accepts icon requests. Developers still use it for custom post type menu icons, but it won’t gain new symbols for your public pages.

For new front-end work, SVG is where WordPress is heading. WordPress 7.1, scheduled for August 19, 2026, adds a public Icon Registration API. Justin Tadlock’s hands-on tutorial on the WordPress Developer Blog shows a developer registering an SVG collection once and using it from PHP, the REST API and the editor. Most site owners will see this indirectly, as themes and plugins adopt it.

WordPress doesn’t accept SVG uploads by default, for good reason: an SVG file can carry script. Keep sanitisation on. Use a plugin or the core API that cleans SVG markup rather than switching off the restriction site-wide.

How do you make icons accessible?

Accessibility rules apply to content icons, not to the favicon. There are two cases:

• An icon next to a text label is decorative. Hide it from screen readers so the label isn’t announced twice.
• An icon with no text label is the control itself. Give the link or button an accessible name that describes the action. W3C’s ARIA Authoring Practices Guide covers how names are calculated.

<a href="/cart/" aria-label="View cart">
  <svg aria-hidden="true" focusable="false">...</svg>
</a>

<img src="divider-star.png" alt="">

W3C’s images tutorial says a purely decorative image should have an empty alt="". Leave the attribute out entirely and some screen readers read the file name aloud instead. Font Awesome’s accessibility documentation explains how its own markup hides decorative icons with aria-hidden="true", which matters when a theme outputs Font Awesome for you.

When should you stop and get help?

The site icon, block icons and cache purges are owner-level work. Hand the job off when the fix moves into territory where a mistake breaks more than one icon:

• CORS headers or MIME types in server configuration.
• Font files lost in a migration.
• Untangling two Font Awesome versions loaded by a theme and a plugin.
• Template work, such as showing icons in place of WooCommerce attribute names. Practitioners on r/woocommerce pointed to Advanced Custom Fields plus child-theme template edits for that one. No setting does it.

Before you change templates, read up on theme customization that survives updates.

If you would rather describe the icon problem than trace it yourself, SiteSelf takes design changes on your existing site through chat. It needs hosting (SSH) access for theme and font-file fixes, and it refuses pages owned by Elementor, Divi or Beaver Builder and tells you why.