logoredraws.com

What Favicon Size Does WordPress Need?

WordPress asks for a square site icon of at least 512 × 512 pixels. Learn why, how it handles smaller sizes, where SVG fits, and how to prepare the file from a vector logo.

Published

Contents
  1. What WordPress Means by a Favicon
  2. Why 512 × 512, and What Happens After Upload
  3. Where SVG Fits
  4. Preparing the Icon From a Vector Logo
  5. Gaps in This Answer

WordPress calls the favicon a Site Icon, and its own interface asks for a square image of at least 512 × 512 pixels. You upload one file at that size or larger. WordPress then creates the smaller copies used in browser tabs, bookmarks and mobile home-screen shortcuts. The square shape matters most. If the image is not square, WordPress asks you to crop it, and that crop can cut off part of your logo.

What WordPress Means by a Favicon

In WordPress, the favicon is not a separate file you place on the server by hand. It is the Site Icon setting. Depending on your theme and WordPress version, you find it in the Site Identity panel of the Customizer or in the site settings of the block-theme editor. Whatever you upload there becomes the source for every icon WordPress outputs. Plan for one well-prepared square image, not a set of hand-made sizes.

Why 512 × 512, and What Happens After Upload

The 512-pixel minimum gives WordPress enough resolution to scale down cleanly for every place the icon appears. Recent core versions generate and reference several smaller sizes from your upload:

  • 32 × 32 pixels for browser tabs
  • 180 × 180 pixels for Apple touch icons
  • 192 × 192 pixels for Android and other home-screen uses
  • 270 × 270 pixels for Windows tiles

The exact set can change between WordPress versions, and themes or plugins can add or replace icon tags. To see what your own site outputs, view the page source and look for the icon link tags in the head section. Uploading a larger square image is fine. Uploading a smaller one risks blurry results on high-density screens.

Where SVG Fits

Even if your logo is vector artwork, the Site Icon field expects a raster image such as PNG. WordPress core blocks SVG uploads to the media library by default for security reasons, so you cannot use an SVG file as the Site Icon without extra measures.

Modern browsers can display SVG favicons, but adding one to WordPress requires theme code or a plugin outside the Site Icon feature. Some platforms, including Apple touch icons, rely on raster files. So even a site with an SVG favicon still needs raster versions. For most sites, the practical route is to keep the logo as a vector master and export a PNG for WordPress.

  • Work from the vector master file. Do not upscale an existing small raster image.
  • Check that the source contains real vector paths. An SVG or other vector-format file can hold nothing more than an embedded raster image, and the file extension alone does not tell you which you have. Open it in a vector editor and check the outline view.
  • Simplify the artwork for small sizes. A full wordmark is usually unreadable at 32 pixels, so a symbol, monogram or single letter from the logo tends to work better.
  • Place the mark on a square artboard with some padding so it is not cropped or crowded at the edges.
  • Export a square PNG at 512 × 512 pixels or larger.
  • Decide between a transparent and a solid background, and test both. Some platforms place the icon on their own background color, which can make a transparent mark hard to see.
  • Preview the icon at tab size before uploading, so you can confirm it is still recognizable.

Gaps in This Answer

No independent measurements or test results were available for this article. The 512 × 512 minimum is the figure WordPress states in its own interface. The list of generated sizes reflects recent core behavior and may differ on your installation, so treat your site's page source as the final authority.