Set, Change, and Test a WordPress Favicon in 4 Steps

Summary

These four steps are necessary to change the WordPress favicon:

1. Log in to WordPress as an administrator
2. Click on "Settings > General"
3. Choose an image under "Site Icon" and click "Save Changes"
4. To test, clear the website cache or open it in an incognito tab

This works in WordPress 6.5 and later, with any theme. In older WordPress versions and with classic themes you can also use "Appearance > Customize", and block themes offer an extra route through the Site Editor. I describe both further down.

In the following, I explain the steps, best practices, and background information once again in detail.

What is a favicon

A favicon is a small symbol or icon that represents a website. It is displayed in the browser's address bar next to the website's URL. This small icon helps users quickly identify your website among a row of open tabs.

When you have several tabs open in your browser, the favicon is the small image that appears in each tab next to the page title. It is a visual cue that makes it easier to switch between different websites. A well-designed favicon improves the user experience and strengthens brand identity.

In addition to appearing in browser tabs and the address bar, the favicon is also displayed in Google search results. When someone searches for your website, the favicon will appear next to your page's title and description in the search results. This increases the visibility and recognizability of your brand.

Favicon requirements

Favicon sizes

The size of the favicon is a decisive factor for its effectiveness. The most commonly used sizes are 16×16, 32×32, and 48×48 pixels. However, some modern browsers also support larger favicons optimized for Retina displays. In any case, the format should always be square.

WordPress suggests a size of at least 512×512 pixels to ensure that the icon looks good on all devices.

Favicon file format

The file format is another important aspect when creating a favicon. The most common formats are .ico, .png, and .jpg. The .ico format is the traditional and most widely used one, but .png offers more flexibility in terms of transparency.

Favicon design best practices

In addition to size and format, you should also carefully choose the color palette and design of the favicon. It should fit well with your website's design and your brand identity. A poorly designed favicon can leave a negative impression, while a well-designed favicon can improve the user experience.

Changing the WordPress favicon under "Settings > General"

Since WordPress 6.5, the site icon sits where the site title and tagline are: under "Settings > General". The official WordPress documentation on favicons describes it the same way. This works with classic themes and block themes alike.

Even though there are plugin alternatives with which you can change the WordPress favicon, you should follow the best practices and use the setting built into WordPress. Too many plugins have a negative impact on security and performance.

Log in to WordPress

Log in to your WordPress dashboard. You need administrator rights to make these changes.

In the WordPress backend, click on "Settings > General"

Click "Settings" in the menu on the left. WordPress opens the "General" page with the basic settings of your website. The "Site Icon" row sits right below "Site Title" and "Tagline".

Choose the site icon and save

Click "Choose a Site Icon". The media library opens. Upload your favicon or pick an existing image there and click "Set as Site Icon". If the image is not exactly 512 × 512 pixels, WordPress lets you select a square area in the next step. Confirm it with "Crop image".

WordPress then shows a preview of the icon in a browser tab and as an app icon. It is only saved once you click "Save Changes" at the bottom of the page. That step is easy to miss because the preview already shows the new icon.

Changing the favicon via the Customizer (classic themes)

Before WordPress 6.5, the Customizer was the only built-in way. Classic themes still have it, and it leads to the same setting. With block themes, WordPress hides the "Customize" menu item. It only shows up there if a plugin or the theme adds its own Customizer settings. Where your own CSS goes in a block theme instead is shown in my article on hyphenation in WordPress.

In the WordPress backend, click on "Appearance > Customize"

In the dashboard menu, navigate to the "Appearance" section and select the "Customize" option there. This opens the WordPress Customizer, a powerful tool that offers a live preview of your changes. Here you can adjust various aspects of your website, including the favicon.

In the Customizer, replace it under "Site Identity > Site Icon"

In the Customizer, you will find various settings options on the left side. Click on the "Site Identity" section and scroll down to the "Site Icon" option, where you can upload your new favicon. Click on "Add" or "Change" to select a new image or replace an existing one.

After you have selected the desired image, click on "Publish" to save the changes. Your new favicon should now be visible on your website.

Setting the favicon in the Site Editor (block themes)

With a block theme, "Settings > General" is still the simplest way. If your logo should double as the favicon, you can also do it in the Site Editor:

1. Open "Appearance > Editor" and then the template or template part that contains your logo, usually the header.
2. Click on the "Site Logo" block.
3. In the sidebar on the right, turn on the "Use as Site Icon" toggle.
4. Click "Save" in the top right corner.

WordPress then uses the logo as the site icon as well. That only makes sense if the logo is square and still recognisable at 16 × 16 pixels. A wide logo with lettering becomes unreadably small in a browser tab. For a separate icon that differs from the logo, the block itself points you to the Site Icon settings under "General".

Testing the favicon

After you have added your new favicon in WordPress, it is important to check whether it is displayed correctly. The browser has most likely cached the old favicon. For this reason, the website must be reloaded with an empty cache. There are two ways to do this.

Clear the cache

To ensure that the new favicon is displayed, clear the browser cache via the settings or history of your browser.

Use an incognito tab

First, close all open incognito windows. Now open a new incognito window in your browser to see the most current favicon without any cache influence.

Make your favicon special

Use a different favicon on mobile

A separate favicon for mobile devices can improve the user experience on smaller screens.

Use an animated favicon

An animated favicon, usually in GIF format, adds dynamism to your website. Depending on the browser, however, it is sometimes displayed as a static image and sometimes as an animation.

For both of these unique favicon features, you can use the "All-in-One Favicon" plugin.

Frequently asked questions about favicons