What Size Should a WordPress Favicon Be?

The short answer

WordPress asks for a square image of at least 512 × 512 pixels, uploaded through its Site Icon setting. That figure is the minimum stated in the Site Icon control itself, so check the on-screen wording in your installed version. You upload one master image, and WordPress creates the smaller files that browsers and devices request. A PNG export of your logo mark is the usual choice.

For anyone working from a vector logo, the size is the easy part. The harder questions are what belongs inside that square, how it holds up at tab size, and whether it stays visible when a browser or operating system switches to a dark theme.

Where the setting lives

The control is labeled Site Icon. In classic themes it appears in the Customizer under Site Identity. In block themes and newer WordPress releases it may sit elsewhere, so searching the admin for "Site Icon" is the most reliable way to find it. After you upload, WordPress lets you crop to a square. A file that is already square avoids an unwanted crop.

What WordPress generates from your upload

Core WordPress scales the master image down and adds several icon references to the page head. The sizes below reflect long-standing core behavior. Confirm them by viewing your site's page source, because themes and plugins can add, change or remove these tags.

Generated size | Typical purpose

32 × 32 px | Browser tab favicon

180 × 180 px | Apple touch icon (iOS home screen)

192 × 192 px | Android and general high-resolution icon

270 × 270 px | Windows tile image

The 512-pixel minimum leaves room for these downscales and for high-density screens. Uploading a larger square is fine as long as it stays square. A smaller upload forces WordPress to work from less detail than its larger outputs need.

Your vector file is the source, not the upload

The Site Icon is a raster image. Your vector logo is where it should come from, but what you actually upload is a pixel export of that artwork. Core WordPress does not accept SVG uploads to the media library by default, so the standard route is to export a PNG from the vector master.

Exporting from true vector paths gives clean edges at any pixel size. Before relying on a file, confirm it really contains editable paths. An SVG, AI or EPS extension does not guarantee that, because these formats can wrap an embedded raster image. Open the file in a vector editor and switch to outline or wireframe view. Real paths show as outlines. An embedded raster shows as a single box with no internal shapes, and it will soften or pixelate when exported at new sizes.

Designing the mark for tiny sizes

A full logo with a wordmark rarely survives at 32 × 32 pixels, let alone the 16-pixel size some browsers still display. Treat the favicon as a reduced version of the identity rather than a shrunken copy of it.

• Use the symbol, monogram or a single initial rather than the full lockup with name and tagline.
• Fill the square sensibly. Very thin margins can look cramped, while heavy padding makes the mark look tiny next to other tabs.
• Thicken fine strokes and remove small details that merge into a blur when reduced.
• Preview the export at 16 and 32 pixels at actual size, not zoomed in, before uploading.
• Decide deliberately between a transparent background and a solid backing shape. The dark mode section below explains why this choice matters.

Dark mode variants

The core Site Icon setting accepts one image, and it offers no separate slot for a dark variant. That leaves two practical approaches.

The first approach is a single icon that works on both light and dark backgrounds. A dark mark on a transparent PNG can nearly vanish on a dark tab bar, and a light mark can vanish on a light one. Common fixes include placing the mark on a solid or rounded backing shape in a brand color, adding a contrasting keyline around the mark, and avoiding mid-tones that lack contrast against both backgrounds. This approach needs no code and works within the standard Site Icon field.

The second approach is an SVG favicon that changes color with the user's preferred color scheme. You add it to the page head yourself, through the theme or a header-code plugin, while keeping the Site Icon PNG as the fallback. Inside the SVG, a prefers-color-scheme media query swaps the fill colors. Here is a minimal structure. Add the standard SVG namespace attribute where shown, and replace the shape with your own paths.

<svg xmlns="[standard SVG namespace]" viewBox="0 0 32 32">
  <style>
    .mark { fill: #1a1a1a; }
    @media (prefers-color-scheme: dark) {
      .mark { fill: #f5f5f5; }
    }
  </style>
  <path class="mark" d="[your simplified logo path data]"/>
</svg>

Then reference the file in the head alongside what WordPress already outputs:

<link rel="icon" type="image/svg+xml" href="[path to your SVG icon]">

Keep three caveats in mind with this method. First, the media query follows the operating system or browser color preference, which does not always match the tab bar color the user actually sees. Second, browser support for SVG favicons, and for media queries inside them, varies, and no test results were supplied for this article, so check the browsers your audience uses. Third, when both an SVG and a PNG icon are declared, browsers decide for themselves which one to use, so confirm that each target browser picks the file you intend. For many sites, the single high-contrast icon from the first approach is the lower-maintenance choice. The SVG method suits brands whose mark only reads well in one color per background.

Checking that it worked

• View the page source and confirm the icon link tags are present and point to the expected files.
• Open each referenced icon file directly to confirm it loads and looks correct.
• Switch your operating system between light and dark mode and look at the browser tab after each change.
• Add the site to a phone home screen to check the touch icon.
• If the old icon persists, test in a private window or clear the browser cache. Browsers cache favicons aggressively, so an outdated icon does not necessarily mean the upload failed.

If the logo is not yours

Being able to download a logo file does not give you permission to simplify it, recolor it into a dark variant or use it as a site icon. The artwork, any fonts in it and the trademark itself may each carry separate rights. Confirm what the owner or license allows before you adapt someone else's mark.

What this answer cannot confirm

No inspected logo files, browser test results or version-specific documentation were supplied for this article. The 512-pixel minimum and the generated sizes reflect WordPress's documented core behavior, but your theme, plugins and WordPress version can change them. Browser handling of SVG and dark-aware favicons is described here in general terms only and should be verified in the browsers you need to support.