logoredraws.com

Change a favicon in WordPress

How to change a favicon in WordPress with the Site Icon setting, how to prepare it from vector logo artwork, and what to check when the old icon persists.

Published

Contents
  1. The short answer
  2. Steps to replace the Site Icon
  3. Where vector logo artwork fits in
  4. Using an SVG favicon directly
  5. If the old favicon still appears
  6. Permission to use the logo
  7. Evidence gaps

The short answer

WordPress calls the favicon the Site Icon. To change it, upload a new square image to the Site Icon setting and save. WordPress then uses that image for the browser tab and generates smaller copies for other places where browsers and devices show a site icon. In most cases you do not need a plugin or any code.

The setting's location depends on your WordPress version and theme type. The supplied material does not include version-specific documentation, so check these places in order: the Customizer under Site Identity (common with classic themes), Settings > General in recent releases, and the Site Logo block in the Site Editor for block themes, which can offer an option to use the logo as the site icon.

Steps to replace the Site Icon

  • 1. Open the Site Icon setting in the location that applies to your site.
  • 2. Choose Change or Select Site Icon, then upload a new image or pick one from the Media Library.
  • 3. Crop it to a square if WordPress asks.
  • 4. Save or publish the change.
  • 5. Open the site in a private browser window to confirm the new icon appears.

The WordPress interface recommends a square image of at least 512 by 512 pixels. A smaller or non-square image may be upscaled or cropped badly.

Where vector logo artwork fits in

A favicon is usually shown at a very small size, so the best source is a simplified version of your logo, such as a symbol, monogram or single letter, not the full lockup with a wordmark and tagline. Building this version from the vector master keeps edges clean when you resize it. Fine details and thin strokes that read well at full size often turn into blur in a browser tab.

By default, the core Site Icon workflow expects a raster image such as PNG, because WordPress does not allow SVG uploads to the Media Library unless a plugin or custom code enables them. The usual workflow is to keep the SVG or other vector file as the editable master and export a square PNG from it for the Site Icon field. If you need a different icon later, edit the vector master and export again rather than editing the PNG.

A file ending in .svg is not proof that it contains editable vector paths. An SVG can wrap an embedded raster image, and a logo package may include raster previews alongside the real artwork. Open the file in a vector editor and check that the shapes are paths before treating it as a scalable master. If the SVG only wraps a bitmap, an export from it is no sharper than the original bitmap.

Using an SVG favicon directly

Many current browsers can display SVG favicons, but the standard Site Icon field is not designed for them. To serve an SVG favicon, a developer usually adds a link element to the page head from a child theme or a small custom plugin and keeps a PNG Site Icon as the fallback for browsers and devices that need raster sizes. The snippet below shows the general pattern. The file name and location are placeholders.

add_action( 'wp_head', function () {
    echo '<link rel="icon" type="image/svg+xml" href="' . esc_url( get_stylesheet_directory_uri() . '/favicon.svg' ) . '">' . "\n";
} );

Enabling general SVG uploads through the Media Library has security implications, because SVG files can contain scripts. If you go that route, use a method that sanitizes uploaded SVGs, and limit uploads to trusted users. Placing a single reviewed SVG file in the theme folder avoids opening uploads to everyone.

If the old favicon still appears

  • Browser cache: browsers keep favicons cached for a long time. Test in a private window or after clearing site data.
  • Caching layers: purge any page-caching plugin, server cache or CDN so the updated page head is served.
  • Theme or plugin overrides: some themes and SEO or header plugins output their own favicon tags, which can conflict with or replace the Site Icon. Check their settings and remove the duplicate.
  • A favicon.ico file in the site root: some clients request this file directly whatever WordPress outputs. If an old one exists there, replace or remove it.

Being able to download a logo file does not mean you may modify it or use it as your site's icon. Simplifying a logo into a favicon is a modification, and the artwork, any fonts in it, and the trademark itself may each have separate terms. For your own brand this is rarely an issue. For a client or a third-party mark, confirm the usage rights before publishing.

Evidence gaps

No version-specific screenshots, release notes or theme documentation were supplied. The exact menu labels and locations described above may differ on your installation, and how a particular theme or plugin handles favicon output can only be confirmed in its own settings or documentation.