logoredraws.com

How to Set a Favicon in Twenty Twenty-Three

Set a favicon (site icon) in the Twenty Twenty-Three WordPress theme, prepare square artwork from your vector logo, and check that the icon appears.

Published

Contents
  1. The short answer
  2. Step 1: Prepare favicon artwork from your logo
  3. Step 2: Set the icon in Twenty Twenty-Three
  4. Choosing between the two methods
  5. Step 3: Verify the result
  6. What this guide does not cover

The short answer

Twenty Twenty-Three is a WordPress block theme, so the favicon is handled by WordPress's Site Icon feature and not by a theme-specific setting. There are two common routes. In the Site Editor, select the Site Logo block and turn on its "Use as site icon" option. Alternatively, upload a separate icon through the Site Icon setting in your dashboard. Whichever route you use, start with a square image exported from your logo's vector master. WordPress's own upload prompt asks for an image that is square and at least 512 × 512 pixels.

A favicon is the small icon browsers show in tabs, bookmarks and history lists. WordPress calls it the Site Icon and also uses it for app and home-screen icons. A vector master is the source file of your logo, in which shapes are defined by mathematical paths. It can be scaled to any size without losing quality. A raster export is a fixed grid of pixels, such as a PNG, and that is what you upload.

Most logos are not ready to work as favicons without changes. A horizontal lockup with a symbol and wordmark becomes unreadable when reduced to tab size. Choose the most distinctive single element instead: the standalone symbol, a monogram, or a single letterform. If you don't have one, a simplified version of the mark is a design decision for whoever owns the brand. It is not a technical requirement.

  • Create a square artboard in your vector editor. The artboard is the canvas area that defines the export bounds.
  • Center the symbol on the artboard and leave a small, even margin so the mark doesn't touch the edges after cropping.
  • Remove fine details, thin strokes and small text that will disappear at small sizes. As a design recommendation, preview the artboard at the smallest sizes browsers display to check legibility.
  • Decide on the background. A transparent background can look good on light browser tabs and poor on dark ones. A solid background shape gives more predictable contrast.
  • Export a PNG at 512 × 512 pixels or larger. Keep the vector file as the editable master for future changes.

A note on file formats: a file's extension doesn't prove what it contains. A file named .svg or .ai can hold embedded raster images, and a vector file doesn't give you permission to reuse a logo. Open the file and check that the symbol is built from paths. Confirm that you have the right to use the mark before you publish it. Also note that by default, WordPress does not allow SVG uploads to the Media Library. A PNG export is therefore the standard choice for the Site Icon.

Step 2: Set the icon in Twenty Twenty-Three

Option A uses the Site Logo block. This option suits you if your logo is already a compact, square-friendly symbol.

  • In the dashboard, open Appearance and then Editor to launch the Site Editor.
  • Open the header template part, or any template where the Site Logo block appears. If the header has no logo, add a Site Logo block.
  • Select the Site Logo block and upload or choose your logo image.
  • In the block settings sidebar, turn on "Use as site icon".
  • Save your changes.

This option has a limitation: the header logo and the favicon become the same image. A wide wordmark that looks fine in the header will be cropped or shrunk into an illegible favicon. In that case, use option B so that each placement gets suitable artwork.

Option B is a separate Site Icon upload. Use it when the favicon should differ from the header logo.

  • Find the Site Icon setting. Depending on your WordPress version, it appears under Settings and then General, or in the Site Identity panel of the Customizer.
  • Upload your square PNG export.
  • If WordPress shows a crop step, keep the full square and confirm.
  • Save the settings.

Where these controls sit has shifted between WordPress releases, and block themes such as Twenty Twenty-Three don't show the Customizer in the Appearance menu by default. The available evidence doesn't confirm which location applies to a particular version. If a menu item isn't where you expect it, check the Site Logo block settings and the General settings screen in your own dashboard.

Choosing between the two methods

Situation | Recommended method | Reason
Logo is a compact symbol or monogram | Site Logo block with "Use as site icon" | One upload covers both the header and the favicon
Logo is a horizontal wordmark or lockup | Separate Site Icon upload | Lets you use a simplified square symbol for the favicon
Favicon needs a solid background but the header logo doesn't | Separate Site Icon upload | Keeps the two backgrounds independent

Step 3: Verify the result

  • Open the site in a private or incognito window, because browsers cache favicons aggressively.
  • Check the browser tab, then bookmark the page and check the bookmark icon.
  • View the tab with both a light and a dark browser theme to confirm the icon stays visible.
  • If you see an old icon or a blank one, clear the browser cache. Also purge any caching plugin or hosting cache that may be serving older page markup.
  • If the icon still doesn't change, return to the Site Editor or the Site Icon setting and confirm that the new image was saved.

What this guide does not cover

No version-specific documentation was available for this article. The menu locations described above are general patterns, not confirmed for every WordPress release. The supplied material also did not cover hand-coding favicon tags, adding multiple icon sizes, or using SVG favicons through plugins or theme files. If you need any of those, consult the official WordPress documentation for your installed version.