How to add a favicon to WordPress: 4 effective methods

That’s it—the big day has arrived. You’ve just launched your WordPress site. Everything seems to be in order: the pages are published, the theme is installed, the content is ready. 

And yet, in the browser tab, a gray square or generic logo appears instead of your visual identity.

This often-overlooked detail is called a favicon. It may be small, but it says a lot about the care you put into your online presence.

In this article, we explain everything you need to know about the WordPress favicon: what it is, why it matters, how to create it properly, and above all how to add it to your site using four different methods, from the simplest to the most technical.

What Is a Favicon?

The term “favicon” is a contraction of “favorite icon.” It is a small image, usually square, that represents your website in various digital contexts.

Historically, the favicon was introduced by Microsoft Internet Explorer back in 1999. At the time, it only appeared in the favorites bar, which is where its name comes from.

Since then, its use has expanded widely across modern browsers and digital interfaces. Today, not having one is like leaving a storefront without a sign.

In WordPress, the favicon is officially referred to as the “Site Icon.” This term also refers to a feature introduced with version 4.3 of the CMS (released in August 2015), which automatically enables favicons on your website.

And since WordPress version 5.4, released in March 2020, there is even a default favicon as soon as you install the CMS, as the official WordPress documentation tells us.

It looks like this, for reference: 

Ultimately, whatever terminology is used, the role of the favicon in WordPress is the same: to visually represent your brand on the web, even outside the content of your pages.

Where do site icons appear?

You come across this WordPress favicon every day without necessarily paying attention to it. It appears in various places: 

• In your visitors’ web browser tabs (Chrome, Opera, Firefox, Safari, etc.).
• Next to your site name in your WordPress back office.
• As app icons on mobile devices when saved in a browser or on a phone.
• In your browser bookmarks, if you save a website that interests you there.
• In the search results of your favorite search engine.

If, for example, you type “Maintenance WP” into Google, you will see our superb favicon just above the URL of our WordPress agency website: 

Why add a favicon to WordPress?

Some site owners see the favicon as a decorative accessory. That is a mistake. In reality, it serves several practical purposes:

• It strengthens brand identity. When an internet user has a dozen tabs open at the same time, the favicon is the only visual element that allows them to identify your site at a glance. Without it, your tab remains anonymous.
• It improves visitor trust. A site without a WordPress favicon can seem unfinished or unprofessional. Conversely, a well-designed icon that is consistent with your visual identity reinforces the impression that your site is polished and reliable. It is a sign of professionalism, just like a professional email address or a custom domain name.
• It makes navigation easier. For internet users who regularly visit your site and have bookmarked it, the favicon is an immediate visual reference point. It reduces search time and improves the browsing experience.
• It contributes to memorability. A distinctive and recognizable favicon gradually becomes part of the image your visitors have of your brand. It is a detail that contributes to the overall consistency of your visual communication. Think of the favicon for YouTube, Wikipedia, or your online bank: you recognize them instantly, without even reading the tab title. That is precisely the effect you should aim to create.

Does the favicon influence SEO or the user experience?

Let us now focus on a legitimate question that many WordPress site owners ask themselves.

Can a favorite icon improve your organic search ranking and the user experience (UX) your visitors have on your pages?

Impact of the WordPress favicon on SEO

In terms of organic search (SEO), Google displays a site’s favicon directly in the search results, next to the domain name.

A present, high-quality favicon can therefore help improve the click-through rate (CTR, Click Through Rate) by making your result more identifiable and more visually appealing.

However, it is important to note that the favicon is not a direct ranking factor in Google’s algorithms. It does not improve your position in search results, nor your WordPress SEO.

On the other hand, it plays an indirect role: an improved CTR is a signal that search engines take into account when assessing the relevance of a page.

Google also states in its official documentation that for a favicon to be eligible for display in search results, it must meet certain conditions: 

• Be publicly accessible.
• Not be blocked by the robots.txt file.
• Be “visually representative of your site’s brand”.
• Be in a square format and measure at least 8 x 8 pixels. With WordPress’s native favicon creation feature, no worries on that front. Your site icon will be 16 x 16 pixels, which is twice what Google recommends.

A favicon that violates Google’s content policies—shocking, misleading, or inappropriate imagery—may be replaced with a generic icon in the results.

What impact on UX?

In terms of user experience (UX), the impact is more immediate. A favicon that is consistent with your visual identity reinforces the perception of quality and professionalism.

Conversely, the absence of a favicon or the use of a generic icon can create a feeling of carelessness, even subconsciously, for the visitor.

Prerequisites and best practices for creating a functional site icon image

Now that you have a better understanding of the favicon on WordPress and its role, we can move on to creating it.

But before you even open your WordPress dashboard, be patient. You first need to prepare a suitable image.

This is a step that many people overlook, yet it is crucial for a clean result.

Let’s review the prerequisites and best practices just below.

Recommended format for your WordPress favicon

WordPress accepts formats including PNG, JPG, GIF, and ICO. We recommend the PNG format for its transparency capabilities and display quality on all types of screens.

The ICO format will mainly be required if you plan to create your favicon manually (in .ico format, therefore). So it is a little more technical, but this format has several advantages, according to the official WordPress documentation: 

• Compatibility with most modern browsers.
• Limits the risk of 404 errors because “virtually all modern browsers will call a favicon.ico file”.
• A .ico file can contain multiple icons.

The SVG format, although increasingly used for icons on the web, is not yet natively supported by WordPress for the site icon.

Ideal size and appearance

For the size, the ideal dimensions for your WordPress favicon are at least 512 × 512 pixels. In any case, that is the CMS’s official recommendation.

This resolution ensures sharp rendering on high-density screens (Retina, 4K) while allowing the CMS to automatically generate the various versions needed depending on the display context.

The image must also be square. A rectangular favicon will be cropped or distorted. Always check that your width and height dimensions are identical.

Use of transparency

If your logo has a specific colored background, you can choose to keep it. However, if you want your favicon to adapt to all contexts (light or dark background), opt for a transparent background in PNG.

Note that certain contexts, such as display in Google results, apply a white background by default to transparent favicons.

Design and consistency with your visual identity

At 16 × 16 pixels (the actual display size in a tab), fine details disappear. So, choose a simple design for your WordPress favicon.

Opt for a letter, a pictogram, or a simplified version of your logo rather than a busy composition. A stylized initial on a colored background generally works very well. Conversely, a full logo with text becomes unreadable at this size.

Furthermore, your favicon must fit within your graphic charter: stick to your brand colors, your typography if you use an initial, and the overall spirit of your identity.

A well-designed favicon is a logical variation of your logo, not an image chosen at random.

Now let’s get to the heart of the matter. There are several ways to add a favicon to your WordPress site, depending on your WordPress version and your technical preferences.

How to add a favicon in WordPress: 4 methods broken down step by step

With the WordPress dashboard or Customizer

Let’s start with the simplest, most accessible, and fastest method: adding a favicon via the WordPress Customizer.

If you’re a beginner or just getting started with WordPress, go with this option; it does the job.

Why? Quite simply because “you don’t need to prepare the favicon.ico file yourself or modify your theme file”, explains the WordPress documentation. 

In detail, follow these steps: 

• Log in to your WordPress dashboard.
• Go to Settings > General.
• Click the “Choose a site icon” button, then choose an image from your Media Library (e.g., your logo), or upload a new one.

If your image is not perfectly square, WordPress will offer you a cropping tool. Adjust it if necessary, then click “Crop Image” when you’re done.

Your favicon has been successfully added, take a look:

If you are using a classic theme (one that is not block-based), note that you can also add a favicon in WordPress via the Appearance > Customize menu, then by going to the “Site Identity” menu offered in WordPress’s Customizer: 

A real-time preview is displayed directly in the Customizer, allowing you to see how it will look before confirming. Take the opportunity to check that the icon remains readable at a small size in the tab preview.

Note that the Customizer may not be available if you are using a theme designed exclusively for the Site Editor (FSE — Full Site Editing).

With the Site Editor

Speaking of the Site Editor, let’s see how to proceed if you are using a block-based theme, for example the native Twenty Twenty-Five theme.

On your dashboard, go to Appearance > Editor. Then click your site name in the top left. In our case, our test site is called “WordPress favicon”: 

Next, select the header type of your choice from the available templates, then click the area dedicated to inserting a logo: 

Choose the image you want from the Media Library or upload one, then click  the small radio button “Use as site icon”. 

Finish by clicking the “Save” button in the top right:

The interface changes regularly with WordPress updates. If you don’t find the option on the first try, look in the global settings or in the site header. A simple alternative is to use the search bar built into the editor and type “Site Icon” to access the correct setting directly.

With a WordPress favicon plugin

If the native methods do not work with your theme, or if you want more control, a dedicated plugin is a good alternative.

The Favicon by RealFaviconGenerator plugin is one of the most highly recommended. It automatically generates all the necessary versions of your favicon (for iOS, Android, Windows, browsers, etc.) from a single source image.

To use it on your site, proceed as follows: 

1. Install and activate the plugin from Plugins > Add New Plugin.
2. In the plugin settings (Appearance menu > Favicon), upload your source image.
3. Select your image from your Media Library, then click the “Generate favicon” button.

You will then be redirected to the RealFaviconGenerator website. In particular, you can customize how it appears on the Google results page, as well as on desktop and mobile web browsers.

The menu called “Web App Manifest” lets you choose how your WordPress favicon will be displayed on mobile.

When you are finished, click the “Generate and install favicon” button. The plugin will then generate all favicon formats and sizes directly in WordPress for you.

If everything goes well, you will see this displayed on the screen:

This approach is particularly useful if you want your icon to display correctly on all devices and browsers, including the most specialized ones.

This is also the preferred method if you run an e-commerce site or a progressive web app (PWA), where users expect icons adapted to each platform.

Manually with a snippet of code

Let’s finish with the most technical method, intended for users who are comfortable with code. If needed, note that it is possible to add a favicon manually to your WordPress site.

Before carrying out any changes on your live site, back up its files and database using a dedicated tool, for example WP Umbrella. Ideally, first test adding a favicon to WordPress in a staging environment or locally to make sure everything works properly.

Start by creating your favicon using graphic/image editing software that allows you to save .ico files. In its official documentation, WordPress recommends Faviconer, for example.

But there are also online services that will allow you to create a favicon for free, such as RealFaviconGenerator or Favicon.io. The latter allows you, for example, to convert a logo in PNG format to .ico format.

This allows you to create your logo beforehand using tools like Canva or Adobe Illustrator.

In detail, here’s how to do it with Favicon.io. Upload your image in PNG format in the “Favicon Generator” menu.

This gives you access to a zip file with the files and code to add to WordPress. Unzip this zip file, which contains 7 files in total: 

Add them to your site’s root directory either via an FTP client (Filezilla, Cyberduck, Transmit), or via the file manager provided by your hosting provider’s server interface. 

On cPanel, it can be found here:

Your root directory is generally called public_html, www, or htdocs, depending on your hosting provider. To guide you, it’s also where you will find directories such as wp-content and wp-admin.

Finally, add the following lines of code in the head tag of your HTML code. This piece of code is provided by Favicon.io when you upload your logo:

Then add this code to the header.php file, before the closing tag. In your WordPress dashboard, go to Appearance > Theme File Editor:

Finish by clicking the “Update File” button. 

When modifying your theme files, a good practice is to use a child theme. In this case, create and edit the copy of the header.php file located in your child theme.

How do you remove or change the favicon in WordPress?

Wondering how to change the favicon in WordPress? The procedure for modifying or removing an existing favicon is similar to the one for adding it.

To change your favicon, go back to the method you initially used (Customizer, Site Editor, or plugin) and simply upload the new image. The old one will be replaced.

To remove a favicon, go to the same settings and click the option to remove or change the site icon. In the Settings > General menu, it looks like this:

In the Customizer, a “Remove” or “Change image” link appears below the preview of the current icon.

In practice, you may need to change your favicon during a visual redesign, a brand name change, or an update to your visual identity.

In this case, also remember to update your favicon in all the other places where it may have been declared manually.

Watch out for cache delays. After a change, your old favicon may remain visible for a few hours in some browsers. Clear your browser cache (Ctrl + Shift + Del) and, if your site uses a caching plugin like WP Rocket or W3 Total Cache, also clear the site cache.

How do you check that your favicon is working?

Once the favicon has been added, it is recommended to check that it displays correctly before considering the task complete. You have several options for doing this:

• In your browser. Open your site in a tab and look at the icon to the left of the page title. Also test in private browsing mode to avoid cache interference.
• On mobile. Add your site as a shortcut to the home screen of an Android and iOS smartphone to check that the icon displays correctly.
• With an online tool. The RealFaviconGenerator website offers a free checking tool. It analyzes your URL and tells you whether your favicon is properly detected and whether it displays correctly in different contexts.

• In the source code. View the source code of your homepage (right-click > View page source) and search for the <link rel="icon" tag. Its presence confirms that the favicon is properly declared in the HTML head. If you find several tags of this type, it is a sign of a duplicate that needs to be corrected — keep only the declaration from the method you chose.

Resolving common bugs and errors

In some cases, the favicon may not display despite an apparently correct configuration. Discover the most common problems and their solutions: 

• The favicon does not display at all. The most common cause is a cache issue. Start by clearing your browser cache and your cache plugin’s cache. If that is not enough, check that the tag is present in your page’s source code.
• The favicon is showing the old image. Same reflex: clear the cache. Browsers often keep favicons in memory for several hours, or even several days. Browsing in incognito mode lets you check without cache interference.
• The image is blurry or pixelated. Your source file is too small. Start again with an image of at least 512 × 512 pixels. WordPress automatically resizes the image for the different display contexts.
• The favicon is not showing on Google. Google can sometimes take several weeks to index and display a site’s favicon in its results. Make sure your favicon follows Google’s recommendations. If your favicon is still missing from the results after several weeks, also check that your homepage is not blocked by a noindex directive in your preferred SEO plugin (Yoast, SEOPress, Rank Math, etc.).
• The favicon appears differently depending on the browser. Some browsers, especially older versions of Internet Explorer or Safari, handle favicon formats and sizes differently. If you notice inconsistencies, use a plugin like RealFaviconGenerator, which automatically generates a multi-format pack covering all possible cases.

In conclusion, adding a favicon to WordPress is a quick action, but one that has a lasting impact on how your site is perceived.

It strengthens your visual identity, improves the browsing experience for your visitors, and indirectly contributes to your visibility in search results.

You now have four methods to integrate it, from WordPress’s native tools to more technical solutions, including specialized plugins. Whatever your setup, one of them will suit your situation.

These small details, often overlooked, nevertheless make the difference between an amateur site and a polished professional site.

A well-thought-out favicon, in the right format and consistent with your brand identity, is a few-minute investment that represents you permanently on the web.

Would you like to go further in optimizing your WordPress site? At Maintenance WP, we support businesses and freelancers with the development, maintenance, and SEO of their WordPress sites.

Need to know more? Our team is available to answer your questions.