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.

Join +3 980 subscribers!

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.
Favicons in the Google search results page

Google now displays favicons in the search results. A good favicon could increase your click through rate.

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.

Default WordPress Favicon

Default WordPress favicon

Custom WordPress Favicon

A custom WordPress favicon

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

Update April 02, 2024. Since the release of WordPress 6.5, you can simply add your favicon from the Settings tab.

  1. From your WordPress dashboard, go to Settings » General
  2. Find the Site Icon section and click “Choose a Site Icon” (or “Change Site Icon”) to add your favicon.
  3. Crop the image if needed.
  4. Click the “Save Changes” button on the bottom of the General Settings page.

That’s it! Thanks to WordPress team for always evolving and improving our favourite CMS!

Choose Site Icon in WordPress settings

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
    Finding the Theme Customizer in WordPress
  2. Click the General Settings tab
    WordPress Theme Customizer General Settings
  3. Click the Site Identity tab
    Site Identity in WordPress settings
  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.
    Add your own favicon in WordPress
  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.
    Publish your favicon in WordPress

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.

Update April 02, 2024. Since the release of WordPress 6.5, you can simply add your favicon from the Settings tab.

  1. From your WordPress dashboard, go to Settings » General
  2. Find the Site Icon section and click “Choose a Site Icon” (or “Change Site Icon”) to add your favicon.
  3. Crop the image if needed.
  4. Click the “Save Changes” button on the bottom of the General Settings page.

That’s it! Thanks to WordPress team for always evolving and improving our favourite CMS!

Choose Site Icon in WordPress settings

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.

Adding a favicon or site icon in a WordPress block theme

Be careful when using your logo as site icon. WordPress will crop your favicon automatically which might not end up with the desired result.

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: divimundo.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.

Add your own favicon in WordPress

That’s all for today!

I hope that you enjoyed this post. Subscribe to DiviMundo 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

Related posts

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Affiliate Disclaimer

All content on DiviMundo is funded by you – our beloved readers. Some of the links are affiliate links. This means that if you click on the link and purchase something, I will receive an affiliate commission. But it will never cost more for you. Thanks for your support!

Victor Duse, founder of DiviMundo