How to Add a Favicon in WordPress

To add a favicon in WordPress, use the built-in Site Icon setting. Upload a square image prepared from your logo, crop it if prompted, and publish. WordPress then creates the smaller copies it needs and adds the favicon markup to your pages, so you do not need to edit theme files. A favicon is the small icon browsers show in tabs, bookmarks and history lists. WordPress calls it the Site Icon, and it can also appear when someone saves the site to a phone home screen.

Most problems with WordPress favicons come from the artwork, not the upload. A full logo lockup usually becomes unreadable at tab size. A lockup is the symbol and wordmark arranged together, and a wordmark is the logo's name set in type. Your favicon should be a simplified symbol taken from your vector logo, exported as a raster image that WordPress can accept.

Choose the right symbol for a favicon

Start with the most compact, recognizable part of your identity. Good candidates are a standalone symbol, a monogram (one or two letters drawn as a mark), or a single distinctive shape from the logo. A long name, a tagline or a horizontal lockup will shrink into an unreadable smudge.

• Prefer a solid shape with strong contrast over fine outlines or thin hairline strokes.
• Remove small details, gradients and textures that will not survive heavy reduction.
• Avoid running text. If letters are essential, use one or two characters.
• Check that the mark still reads as your brand in silhouette, as a single filled shape.
• Make sure you are allowed to use the logo this way. A file extension such as SVG or AI does not prove the artwork is fully vector, editable or licensed for reuse.

Prepare the artwork in your vector editor

Before you open WordPress, prepare a dedicated favicon file in your vector application. The exact menu names depend on your software and its version, so look for the equivalent commands in your editor.

• Create a square artboard. A square canvas avoids awkward cropping in WordPress.
• Place the simplified symbol on the artboard. Leave consistent padding around it so it does not touch the edges, but keep it large enough to fill most of the square.
• Convert any type to outlines (paths). This keeps the letterforms intact without the original font installed.
• Clean up the paths. Merge overlapping shapes where appropriate, remove stray points and confirm fills are closed.
• Adjust the weight for small sizes. Thicken thin strokes, and expand strokes to filled shapes if your export might treat them inconsistently.
• Decide on the background. A transparent background lets the icon sit on light or dark browser tabs. A solid background tile gives a consistent shape but must suit both tab themes.
• Export a raster PNG at a generous square size. WordPress's media library does not accept SVG uploads by default, so a PNG is the dependable choice.

What size should a WordPress favicon be?

WordPress asks for a square Site Icon, and its interface has long recommended at least 512 by 512 pixels. Check the guidance on the upload screen in your own installation, because this source does not confirm the requirement for every version. Upload one large square image and let WordPress generate the smaller sizes. You do not need to make each size yourself.

Size requirements are not the same as legibility. An image can meet the minimum dimensions and still look poor in a browser tab if the symbol is too detailed. Preview your export at a very small zoom level before uploading.

How to set the favicon in WordPress

Where the Site Icon setting lives depends on your WordPress version and whether your theme is a classic theme or a block theme. The usual routes are below. If your screen differs, look for a field labelled Site Icon in your site identity or general settings.

Classic themes: the Customizer

• Log in to the WordPress dashboard with an account that can change site settings.
• Go to Appearance, then Customize.
• Open Site Identity.
• Find the Site Icon section and choose Select Site Icon.
• Upload your prepared PNG, or select it from the media library.
• If WordPress shows a crop screen, keep the whole symbol inside the crop area, then confirm.
• Check the preview, then choose Publish.

Block themes: the Site Editor

Block themes usually hide the Customizer. Instead, open the Site Editor and select the Site Logo block, typically in the header template part. Its settings may include an option to use the logo as the site icon. That option only suits you if the header logo is already a compact square-friendly mark. Otherwise, use a separate Site Icon field if your version provides one, so you can upload the dedicated favicon artwork. Save your changes when you are done.

Confirm the favicon is working

• Open your site in a new private or incognito window and look at the browser tab.
• If the old icon or a blank icon still appears, do a hard refresh. Browsers cache favicons aggressively and can take a while to update.
• If you use a caching plugin or a server-level cache, clear it so the updated page markup is served.
• View the page source and look for link elements whose rel attribute is set to icon. They should point to files WordPress generated from your Site Icon.
• Check the icon on both light and dark browser themes, and save the page as a bookmark to see it in another context.

If the favicon does not change

Several things can override or mask the Site Icon. Some themes or SEO and branding plugins add their own favicon settings, so look for a duplicate icon field and either use it or leave it empty. An older favicon.ico file in your site's root folder can also be picked up by some browsers. Ask whoever manages your hosting before removing or replacing files there. Finally, if the icon looks blurry or cropped, return to your vector file: enlarge the symbol within the square, simplify it further, and export again.

What this guide could not confirm

No version-specific documentation was supplied for this article. Menu locations, block settings, minimum dimensions and the exact sizes WordPress generates may differ in your installation, so treat the on-screen labels and guidance in your dashboard as authoritative.