WordPress Favicon Size: Preparing the Site Icon Canvas
What size WordPress expects for a Site Icon, why the canvas should be square, and how to prepare vector logo artwork with safe padding before exporting it.
Contents
The Short Answer
WordPress calls its favicon the Site Icon. Its own upload prompt asks for a square image of at least 512 × 512 pixels. You upload one image and WordPress creates the smaller versions used in browser tabs, bookmarks and home-screen shortcuts. You don't need to hand-build a set of separate favicon files for a standard setup.
In practice, the job is to prepare that square canvas well. The usual source is a vector logo, but WordPress takes a raster image here. Your logo must be simplified, placed on a square canvas with enough breathing room, and exported as a pixel image, typically a PNG. The rest of this article covers that preparation, because getting the canvas right matters more than the exact pixel count.
The prompt wording and the formats WordPress accepts can change between versions. Confirm the requirement shown on your own install.
Where the Setting Lives and What It Accepts
Depending on your WordPress version and theme, the Site Icon field appears in one of these places:
- In the Customizer, under Site Identity.
- In the general settings screen.
- In the Site Editor, through the Site Logo or site identity controls of block themes.
If your image isn't square, WordPress offers a crop step. Treat that crop as a safety net, not a design tool. Cropping a wide logo usually cuts off part of the mark or leaves it too small to read.
By default, WordPress does not allow SVG uploads to the media library. So even if your master logo is an SVG, the file you upload as the Site Icon will normally be a raster export. Plugins and custom code can enable SVG uploads, but that is a separate decision with its own security considerations. It also doesn't change the fact that the generated icon sizes are pixel images.
Vector Source, Raster Output
A vector logo is the best starting point because it scales cleanly to any canvas size. But a file extension alone doesn't prove the artwork is truly vector. An SVG, AI, EPS or PDF can wrap an embedded bitmap, or be nothing more than a raster preview saved in a vector container.
Before you build the icon, open the file in a vector editor and check that the mark is made of editable paths. Two quick checks:
- View it in outline or wireframe mode.
- Try selecting individual shapes.
If the logo turns out to be an embedded image, exporting it larger won't add detail. You would need the original artwork or a properly redrawn version.
| Asset type | What it is | Implication for the Site Icon |
| True vector artwork | Shapes defined by editable paths | Can be resized, simplified and exported crisply at the required square size |
| Vector file with an embedded raster | A bitmap placed inside a vector container | Behaves like a pixel image; quality is limited by the embedded resolution |
| Raster preview or export | A pixel image such as PNG or JPG | Usable if it is already large and square enough, but hard to simplify or re-pad cleanly |
Choosing What Goes on the Canvas
Most favicons are shown far smaller than the uploaded 512-pixel image. Full horizontal logos with wordmarks and taglines rarely survive that reduction. The usual approach is to pick the most compact, recognizable part of the identity, such as:
- A symbol.
- A monogram.
- A single letterform.
- A simplified badge.
Thin strokes, small counters and fine detail may need thickening or removing in a dedicated small-size version. Make those edits on a copy of the master artwork, not the original.
Safe Area and Padding
The safe area is the inner region of the square canvas where the essential artwork should sit. The padding is the margin between that region and the canvas edge.
Padding matters because the same uploaded image may be shown in different ways:
- Edge to edge in a browser tab.
- Inside rounded or circular masks on mobile home screens and app-style shortcuts.
Artwork that runs right to the corners can get clipped by those masks. Artwork with too much padding looks tiny next to other icons.
No padding percentage was confirmed for this article, and platforms apply their own masks. How much margin to leave is therefore a design judgment, not a fixed rule. A practical method is to keep critical shapes clear of the corners, then preview the icon in a square, a rounded square and a circle. Adjust until the mark reads well and nothing important is cut off in any of them.
Background and Transparency
A transparent PNG lets the icon sit directly on whatever surface shows it. That surface could be a light or dark browser theme, or a coloured home screen. A dark mark on a transparent background can disappear on dark interfaces. Some platforms also place transparent icons on a background colour they choose themselves.
If contrast is a concern, a solid background shape inside the canvas gives you more predictable results. Combine it with the safe-area margin described above.
A Preparation Checklist
- Confirm the source logo contains real vector paths, not an embedded or preview image.
- Choose a compact element of the identity suited to very small display.
- Set up a square artboard and size it to at least the dimensions your WordPress install requests.
- Place the mark within an inner safe area and keep critical detail away from the corners.
- Decide between a transparent background and a solid background shape based on contrast.
- Preview the result at small sizes and inside rounded and circular masks.
- Export a square raster file, typically PNG, and upload it through the Site Icon setting.
- Check the result in an actual browser tab and on a mobile home-screen shortcut if that matters for your site.
Permission to Use the Artwork
Being able to download a logo file doesn't mean you may crop, simplify or recolour it, or use it as a site icon. Brand guidelines, font licences and trademark rights can each restrict how artwork is modified and displayed. If the logo isn't yours, confirm with the owner or their published usage terms before adapting it.
Gaps in This Guidance
This article relies on WordPress's documented Site Icon prompt and general design principles. It isn't based on testing or measurements.
Two things it doesn't specify:
- The exact list of sizes WordPress generates.
- The precise mask shapes used by each browser or operating system.
Both vary by version and platform, so check them against your current WordPress release and the devices your audience uses.