4 Ways to Add a WordPress Favicon (Manually, Gutenberg and Block Editors + More)

A WordPress favicon represents your website on various platforms. It appears next to the website’s title in the browser tab, history, and bookmarks. Despite its small size, it has an important role in helping users identify your site.

This article will explain how to add a WordPress favicon using four different methods – manually, using Gutenberg block, Customizer, and a plugin. We will also discuss why WordPress favicon is important and offer useful tips on creating a custom WordPress favicon.

Download All in One WordPress Cheat Sheet

Why Adding a Favicon to Your Site is Important

A WordPress favicon represents the site identity, helping people recognize your site. While the icon image is small, it can greatly impact the user experience and your brand reputation. Here are some reasons why a favicon in WordPress site is important:

• Improve user experience. Many users have multiple tabs open in their web browsers. A favicon next to the site title helps users easily differentiate each tab and identify your site.
• Improve visibility. If set up correctly, your favicon will appear on the search results next to your WordPress website URL. This helps people notice your site and increases organic traffic.
• Improve mobile experience. Many mobile devices allow users to add any web page to their home screen. When they add a website to their mobile device home screen, it will display the favicon, allowing the user to locate your site among many app icons.
• Build trust. WordPress favicons make websites look more professional. If a website doesn’t have a favicon, the web browser will use a default icon that makes the website appear unfinished.

Creating a Favicon in WordPress

WordPress has a native favicon feature and lets you add one using various methods. However, before uploading a custom favicon file to WordPress, there are several preparations to make:

• Ensure the icon is a square image with a size of at least 512px x 512px. To change the image size, use an image editing software like Adobe Photoshop or online favicon generators like RealFaviconGenerator, Favicon.io, and Favicon-generator.org.
• Pick a background color for the favicon. A transparent background is best, especially if you have white space in the design.
• Choose the right image format. WordPress favicons usually use the ICO file format, but now you can also use JPEG and GIF. However, you must use PNG if your icon’s background is transparent.

Once the image is ready, add the new favicon to your WordPress site using one of the following methods.

Using a Gutenberg Block

The easiest way to add a favicon to WordPress is using the Gutenberg block editor. Note that this method is only possible if you use a WordPress block theme and WordPress 5.9 or higher. Here are the steps to do so:

1. Open the Site Editor by navigating to Appearance → Editor from your WordPress dashboard.
2. Hover the mouse over the area where you want to put the logo and click the block inserter (+). While you can add it anywhere on your site, we recommend adding it to the header area.
3. Search for the Site Logo block on the search bar and select it to add it to your site.

4. Click the Add a site logo button on the block to open the media library pop-up.

5. Upload your image file or select it from the media library. Click Select.

6. You’ll see the favicon image on the site logo block. Click the block and open its Settings at the top-right corner of the editor.
7. Open the Settings section and enable the Use as site icon toggle.

8. Click Save at the top-right corner of the editor.

Using WordPress Customizer

You can add a favicon by customizing the site identity in the WordPress Customizer. This method is more suitable for classic theme users with WordPress version 4.3 or higher, as they will have the site icon feature.

Follow these steps to add a favicon using WordPress Customizer:

1. Navigate to Appearance → Customizer from your dashboard. If the option is unavailable or you use a block theme, use the /wp-admin/customize.php slug to open it.
2. Choose the Site Identity tab on the left sidebar and click the Select site icon button.

3. The WordPress media library pop-up will appear. Upload your favicon or choose an existing image from the media library. Click Select.
4. You’ll immediately see from your browser tab that the new favicon is set. Click the Publish button to save the change.

Using a WordPress Favicon Plugin

Another method to add a favicon to WordPress is by using a plugin. There are several WordPress favicon plugins, but Favicon by RealFaviconGenerator is the top-rated one. Install and activate the plugin from the WordPress dashboard, then follow these steps:

1. Go to the Appearance → Favicon from your WordPress dashboard.
2. Click Select from the Media Library to upload or choose a favicon image. You don’t need to edit your image using image editing software because the plugin will do it for you. Ideally, your image should be at least 260 x 260 px in size.

3. Click Generate favicon. The plugin will take you to the RealFaviconGenerator website, where you can customize your image.
4. Select Use the original image as is if you don’t want to alter it. Alternatively, choose Add margins and a plain background if you want to add background color and modify the image size.

5. Scroll down to the bottom and click Generate your Favicon and HTML code. It will take you back to the WordPress admin dashboard.

Now your WordPress website’s favicon should be in place. You can also check your favicon in the plugin’s admin panel by clicking the Check your favicon button. It will take you to the RealFaviconGenerator website, which shows the previews of your favicon on various platforms.

Note that you should not deactivate this plugin, as it will automatically disable your favicon.

Manually Add a Favicon to a WordPress Site

Another method is manually adding a favicon in WordPress. This method requires some WordPress file modification. Therefore, we recommend testing in a WordPress staging environment before applying it to the live site.

You must use a generator such as RealFaviconGenerator to create the favicon package and code snippet. Here are the steps to do that:

1. Open the RealFaviconGenerator website and click the Select your Favicon image button to upload your image.

2. Scroll down to the Favicon Generator Options. In the Path tab, the default option is to place the favicon files in your site’s root directory. Choose the second option and define the path if you want to put it in another directory. Click Generate your Favicons and HTML code.

3. Download the icon files by clicking the Favicon package button. It contains the PNG and ICO files of your selected image. Keep this page open, as you must copy the favicon code later.

4. Use an FTP client or your hosting account’s file manager to access your site’s root directory and upload the favicon package. You should upload and extract it in the same folder as the wp-admin and wp-content folders.
5. Open your active theme’s folder. For example, if you’re using the Twenty Twenty theme, open /wp-content/themes/twentytwenty.

6. Open the header.php template file and paste the favicon code from the RealFaviconGenerator page. Make sure that you add your own URL in the href attribute. It should look like this:

<link rel="apple-touch-icon" sizes="180x180" href="https://website.com/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://website.com/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://website.com/favicon-16x16.png">
<link rel="manifest" href="https://website.com/site.webmanifest">
<link rel="mask-icon" href="https://website.com/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">

7. Save the changes.

Tips for Creating a WordPress Favicon

Great site icons allow users to identify the web page quickly and build a long-lasting brand association. Here are some tips for creating a unique favicon:

• Avoid using long text. The size of the favicon is so small that even short text is hard to read. Consider creating a different design for the site’s favicon if your logo has a spelled-out site name. You can quickly create a custom favicon using AI tools such as logo generators.
• Don’t update it too frequently. A favicon helps customers associate the image with your brand. If you change the favicon too often, it will be hard for them to build that brand association.
• Choose the right color scheme. With the customizable browser appearance and the popularity of night mode, your favicon should look good regardless of the browser’s appearance. We recommend testing your favicon with various background colors like white, gray, and black.
• Read Google guidelines. Follow Google’s favicon guidelines to get your favicon shown on Google search results.

Conclusion

The favicon in WordPress is a small icon representing your site on browser tabs. Its presence is important in enhancing user experience and brand recognition.

WordPress CMS has a built-in site icon feature, and you can add a favicon icon using one of these methods:

• Using the site icon WordPress block in the Gutenberg editor. This method is ideal for block theme users.
• Using the WordPress Customizer by changing the site identity settings.
• Using the RealFaviconGenerator plugin. This method lets you upload and set the favicon easily. That said, you have to keep the plugin activated.
• Editing the theme’s files manually. We recommend using a child theme if you want to edit theme files.

Before uploading the image, ensure it has the right WordPress favicon size and aspect ratio.

We hope this step-by-step guide helps you set up a favicon for your WordPress site.