Installing and Replacing a Favicon in WordPress
How to add or change a favicon in WordPress through the Site Icon setting, prepare a vector logo for tiny pixel sizes, and fix themes or caches that keep showing the old icon.
Contents
The short answer
WordPress calls the favicon a Site Icon and manages it in the dashboard, so you normally don't need to edit theme files. You upload a square image, WordPress makes the smaller versions it needs, and it outputs the matching tags in the page head. To change the favicon later, you replace the image in the same setting. Most of the visual quality depends on the artwork you upload. That artwork usually comes from a vector logo, but a logo that works at full size often has to be simplified and adjusted to the pixel grid before it reads clearly at 16 or 32 pixels.
Where to set or change the Site Icon
Where the setting lives depends on your theme type and WordPress version. The source material for this article confirms no version-specific details, so check these locations against your own dashboard.
- Classic themes: open Appearance, then Customize, then Site Identity. Use the Site Icon control to select or upload an image, crop it if asked, and publish.
- Block themes: these may not show the Customizer in the menu. In the Site Editor, the Site Logo block's settings can include an option to use the logo as the site icon. Some WordPress versions also show the Site Icon under Settings, then General.
- To replace an existing favicon: open the same control, choose Change or Remove, select the new image, and save or publish.
WordPress's own guidance asks for a square image of at least 512 by 512 pixels. If the image is not square, the cropping step lets you pick the area to keep. Cropping a wide horizontal logo usually gives a poor icon, so plan a separate square mark rather than relying on the crop.
When the theme or a plugin controls the favicon
Some themes, page builders and SEO or performance plugins have their own favicon field. Others write icon tags directly into the header template. In those cases, changing the core Site Icon may not affect what browsers display, or two sets of icon tags may compete. If a new icon does not appear, check these places:
- Theme options panels for a separate favicon or icon field.
- Plugin settings for icon or head-tag management.
- The theme's header template for hard-coded icon link tags, preferably in a child theme so updates do not overwrite your changes.
- The site's root folder for an old favicon file. Some browsers request that file automatically, even when the page specifies another icon.
Keeping one source of truth avoids conflicts. Usually that is the core Site Icon, unless your theme's documentation says otherwise.
Why the old icon keeps showing
Browsers cache favicons aggressively and separately from page content, so an old icon can stay visible after you change it. Before assuming the change failed, try a hard refresh, a private window or a different browser. Also purge any caching plugin, server cache or CDN. Bookmarks and home-screen shortcuts may keep the old icon until they are recreated.
Preparing vector logo artwork for favicon sizes
The Site Icon upload is a raster image, typically PNG. WordPress's media library does not accept SVG by default. The vector logo is therefore the source you export from, not the file you upload. A clean vector master makes it easy to produce sharp exports at any size. It does not guarantee those exports look good when shrunk to a few dozen pixels.
- Start from a square symbol or monogram rather than the full wordmark. Text becomes unreadable at small sizes.
- Remove fine details, thin strokes, small counters and subtle gradients that turn into blur when reduced.
- Set the artboard to a small target size, such as 16 or 32 pixels, and align key edges and stroke widths to whole pixels so they render crisply instead of anti-aliasing into soft gray.
- Check contrast on both light and dark browser tabs. A transparent background can make a dark mark disappear in dark mode.
- Export a large PNG of at least 512 pixels square for WordPress, then view it at actual tab size before publishing.
Pixel-grid adjustments made at 16 or 32 pixels may need to differ from the large master. Some designers keep a separate small-size version of the mark for this reason. That is a design choice, not a WordPress requirement.
Checking that the source file is really vector
A file ending in SVG, EPS, AI or PDF is not proof of editable vector paths. These formats can contain an embedded raster image, or a raster preview over little or no path data. Open the file in a vector editor and confirm that the shapes can be selected as paths and that edges stay clean when you zoom in. If the logo is a placed bitmap, you need to rebuild or redraw it before any real pixel-grid refinement is possible.
Rights and permissions
Being able to download a logo file does not mean you may modify it or use it as a favicon. Simplifying a mark, redrawing it or changing its type is a modification. The artwork, any fonts in it and the trademark may each come with separate terms. For your own brand this is rarely an issue. For a client's logo or a third-party mark, confirm permission before you alter and publish it.
Evidence gaps
The material behind this article contained no confirmed specifications, version numbers or test results. It does not cover which WordPress release added each Site Icon location, the exact sizes WordPress generates, or how particular themes and plugins handle icons. Check those details in your current WordPress dashboard and in your theme's or plugin's documentation.