How To Add a Favicon (or Site Icon) in WordPress (Updated 2024)

To change the default favicon, or “Site Icon” as it’s called in WordPress, is a small but important step to create a unique and professional branding for your website. Here’s how to add your own favicon both in classic themes and block themes.

What Is A Favicon And Where Is It Displayed?

A favicon (or site icon) is a small image that, together with your site logo, color palette and fonts, makes your visual identity more clear and unique. The favicon is displayed in several places, for example:

• In the browser tab
• In the bookmarks list
• In the Google search results page (both for mobile and desktop)
• On smartphone homescreen shortcuts.

What Happens if I Don’t Add My Own Favicon?

By default, WordPress displays their own logo as favicon if you don’t upload your own image. This is a missed opportunity for your own unique branding and it doesn’t look very professional.

Fortunately, it’s easy change the favicon in WordPress. However, since the introduction of Block themes in WordPress 5.9, there are two different methods for adding your custom favicon, depending on what type of theme that you use. Here’s a step by step guide for both types of themes.

Adding A Favicon in Classic WordPress Themes, Step by Step

A vast majority of all WordPress themes are so called classic themes. If you see the link “Customize” in the  “Appearance” tab in WordPress, you are most likely using a classic theme. Divi, Astra and Hello Elementor are three examples of popular classic themes.

1. From your WordPress dashboard, go to Appearance » Customize
   
2. Click the General Settings tab
   
3. Click the Site Identity tab
   
4. Here’s where the magic happens! Click Select site icon (or Change image if there already is a favicon added) to add your custom favicon.
   
5. Upload a new image or choose an existing image from your WordPress media library.
   Pro tip: The favicon should be at least 512x512px. Transparent PNG images works fine. 
6. Crop the image if needed (it should have 1 x 1 dimensions) and click Publish.
   

That’s it! You should already see your new favicon in the browser tab. If not, clear the site cache and browser cache and refresh the page.

Adding a Favicon in a WordPress Block Theme, Step by Step

If you can’t find the Theme Customizer, you’re most likely using a Block theme. These themes supports full site editing using native WordPress blocks. Twenty Twenty-Four and Storemate are two examples of Block themes. The process of adding a favicon in a Block theme is not very intuitive, to say the least.

Method 1: The “Correct” (Cumbersome) Way Using The Block Editor (Deprecated)

This method is how the Block theme process for adding a favicon is designed to work. Good UX? You decide!

1. From your WordPress dashboard, go to Appearance » Editor
2. Click the site header where your logo should be located
3. Make sure that the WordPress side bar on the right side is expanded and that the Template tab is active.
4. Click Header below AREAS
5. Now click the logo placeholder and upload your logo image (if you haven’t already)
6. When the logo is uploaded, you can enable the toggle “Use as site icon” to use the logo as your favicon.
   Pro tip: WordPress will crop the favicon to have the dimensions 1 x 1 automatically, so this method is not recommended since it doesn’t give you any control over where the image is cropped.
7. If you want to upload a custom favicon, click the link Site Icon settings
8. Scroll down and upload a new image or choose an existing image from your WordPress media library.
   Pro tip: The favicon should be at least 512x512px. Transparent PNG images works fine.
9. Crop the image if needed (it should have 1 x 1 dimensions) and click Publish.

That’s it! You should already see your new favicon in the browser tab. If not, clear the site cache and browser cache and refresh the page.

Method 2: The Quick Shortcut Using a Hidden Link (Deprecated)

How about skipping the first 7 steps in the method above and taking a shortcut to the favicon settings in the hidden Theme Customizer? Here’s how:

1. Add /wp-admin/customize.php after your domain name in the browser address bar and hit enter.
   Example: victorduse.com/wp-admin/customize.php
2. Go to Site Identity and scroll down to upload a new Site Icon image or choose an existing image from your WordPress media library.
   Pro tip: The favicon should be at least 512x512px. Transparent PNG images works fine.
3. Crop the image if needed (it should have 1 x 1 dimensions) and click Publish.

That’s it! You should already see your new favicon in the browser tab. If not, clear the site cache and browser cache and refresh the page.

That’s all for today!

I hope that you enjoyed this post. Subscribe to VictorDuse.com on YouTube and join our Facebook group for more crisp content on WordPress and web design.

👉 Related post: Rediscover the Hidden Theme Customizer in WordPress

👉 Free course: Create a website from scratch with Divi