What is a WordPress favicon and how to add one: 4 quick methods

A favicon is a small image shown in the web browser tab when a user accesses your WordPress website. It helps users quickly recognize your site when several tabs are open, notably if your site title is not visible.

This tutorial will explain what a WordPress favicon is, its importance, and how to create one. We will also explore different ways of adding one to your website so you can choose one based on your preferences.

A favicon helps users manage multiple tabs and boosts your website’s visibility on search engine results pages (SERPs). This icon accompanies your site’s URL, allowing users to identify the web page quickly.

This image also shows up on users’ phone home screens as an app icon when they bookmark your webpage on their device. A distinct favicon not only makes your site appear more professional but also helps build branding.

How to generate a favicon image

To create a WordPress favicon, you can use any graphic design software or an online tool such as Real Favicon Generator. Your choice depends on your experience level with visual design concepts and your ability to navigate these tools.

So, consider the following:

• Resolution. Since your icon only appears on SERPs and browser tabs, an overly high-resolution image might not be necessary. The ideal WordPress favicon size is 512 x 512 pixels.
• Aspect ratio. Favicon on your WordPress site must display properly in a 1:1 aspect ratio. Otherwise, it might get cropped or warped, hurting the web page’s appearance.
• Color palette. Using a transparent background will make your favicon stand out more, especially if you use white elements or icons. Just remember to use the same palette as your brand to maintain a consistent site identity.
• File format. PNG format is necessary if your WordPress site’s favicon file contains a transparent background. Otherwise, you can use extensions like ICO, JPEG, or GIF that WordPress supports.
• Search engine requirements. Your WordPress website icon must adhere to Google’s favicon guidelines to display correctly on SERPs.

The steps to create WordPress favicons vary greatly depending on your graphic software and the desired image. If you want a simpler solution, use Hostinger AI Logo Generator to help generate the image for free!

Ways to add favicon to WordPress

This section will teach four common ways to add a custom favicon to your WordPress website. Since they have the same outcome, choose one based on your preferences and needs.

1. Use the Gutenberg block editor

The simplest way to add a favicon to your WordPress site is by using the Gutenberg editor. Note that this feature is only available for block themes and WordPress 5.9 or recent releases.

Here’s how to get it done:

1. Log in to your WordPress dashboard → Appearance → Editor.
2. Hover over the area where you want to put the icon and click the plus (+) icon. While you can place it anywhere, we recommend one of the corners of the header.
3. Search and select the Site Logo block.
4. Hover over the block and click the Upload icon.

5. Upload your favicon file or select one from your WordPress Media Library. Hit Select to confirm.

6. Click the favicon and navigate to the block settings section on the right sidebar. If you don’t see the option, click the Settings button on the top right of your screen.
7. From the sidebar, turn on the Use as site icon feature.

8. Click Save on the top right to apply the changes.

When you visit your website, you should see the new favicon in place of the default WordPress logo.

2. Access and configure through the WordPress Customizer

For classic theme users, add a favicon using the WordPress Customizer feature. This method is only possible if you use WordPress 4.3 or later. Here’s how to do so:

1. From your WordPress dashboard, go to Appearance → Customizer. If you can’t see the option, add wp-admin/customize.php to your website URL to open it manually.
2. Navigate to the left sidebar → Site Identity. Click the Select site icon button.

3. Upload your image or select from the Media Library. Hit Select to confirm.
4. Adjust the favicon dimension to your needs and click Crop image. To use the default settings, select Skip cropping.
5. Now, you should see the preview of your website favicon under the sidebar’s Site Icon section. To save the changes, click Publish.

3. Utilize RealFaviconGenerator plugin

If you want more customization options and previews, use a third-party plugin to set up a favicon in WordPress. There are several options, but we recommend Favicon by RealFaviconGenerator since it is the most widely used option.

After installing and activating the plugin, follow these steps to create and add a new favicon:

1. From your WordPress admin dashboard, navigate to Appearance → Favicon.
2. Click Select from the Media Library and upload a new image, or select an existing one from your WordPress library.

3. Click Generate favicon, and the plugin will redirect you to a separate page.
4. If you wish to keep the default image, select the Use the original image as is option. Otherwise, adjust settings like the backdrop color, radius, and image size.

5. Scroll down to the Favicon Generator Options and click Generate your Favicons and HTML code to confirm.

That’s it! You will be redirected back to the Favicon menu in the WordPress dashboard. Click the Check your favicon button to check if your site icon works properly. To replace the current one, simply repeat the steps above.

Remember that this plugin must remain running to display the favicon. If you deactivate or uninstall it, your website icon will no longer be displayed.

Regularly update the plugin to avoid security risks and bugs. To simplify the task, Hostinger managed WordPress hosting users can enable the auto-update feature in hPanel.

4. Manually edit theme files

You can add a favicon by manually uploading the image to the WordPress root folder and editing your theme file. Since this method can be a bit complex, we suggest it for developers or those with coding experience.

Before doing so, create and activate a child theme to ensure your favicon code remains intact after an update. Then, follow these steps:

1. Open the Real Favicon Generator website, click Select your Favicon image, and upload the favicon file from your computer.
2. Scroll to the Favicon Generator Options section and click the Path tab. Choose where you want to put the favicon image. Ideally, you should pick the root directory.

3. Click Generate your Favicons and HTML code.
4. You will get redirected to the installation manual page. Click the Favicon package button to download the favicon files.
5. Copy the code snippet and keep it safe, For example, a TXT file. Alternatively, keep this tab open since we’ll need it later.

Now that the files and code are ready, add them to your WordPress site. Here’s how to do so:

1. Access your WordPress website’s public_html root directory using a File Transfer Protocol (FTP) client like FileZilla or your hosting provider’s file manager.
2. Upload and extract the downloaded archive into the public_html directory. Remember, public_html should contain only the favicon files, not the folder.
3. Enter the following URL in your web browser to confirm that WordPress can read your favicon. Replace domain.tld with your actual domain name:

domain.tld/favicon.ico

4. Open your WordPress dashboard and navigate to Tools → Theme File Editor.
5. From the Theme Files menu on the right, select header.php. If your theme doesn’t have it, edit the functions.php file instead.
6. Add the HTML code from Real Favicon Generator at the bottom of your file after the ?> tag. In our case, the snippet looks like this:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

<link rel="manifest" href="/site.webmanifest">

<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">

<meta name="msapplication-TileColor" content="#da532c">

<meta name="theme-color" content="#ffffff">

7. Click Update File to save the changes.

To remove the custom favicon, delete the code from your theme file and remove the image files from the WordPress root directory.

Conclusion

A WordPress favicon is a small image that appears on a user’s browser tab when they access your website. It helps them distinguish between tabs and builds brand recognition.

You can create a favicon using graphic design software or a web tool like Real Favicon Generator. Remember, the image must be square, at least 512 x 512 pixels, and adhere to search engine guidelines.

The easiest way to add a favicon to your website is to use the Website icon block in the Gutenberg editor. If you use classic themes, use the WordPress Customizer feature in the Appearance menu.

Alternatively, you can use a plugin like Real Favicon Generator and upload the image via the Appearance setting. Developers can also do so manually by uploading the icon to the WordPress root directory and adding HTML code to the theme’s PHP file.

WordPress favicon FAQ