WordPress Change Favicon & Site Logo with Full Site Editor (FSE) Theme

Things change fast in the world of WordPress. Even how to add a WordPress favicon to your site. Every few months it seems like things get shuffled around. Something that was a no brainer before becomes a hunt for the hidden feature. Changing the site logo and favicon is one of those features that suddenly moved when WordPress introduced the Site Editor, also known as Full Site Editing (FSE).

Formerly, you could do this from the admin area by going to Appearance > Themes > Customize. Boom it was right there in Site Identity! If you try that now, the Customize button launches the Site Editor… And how do you add a favicon in WordPress now?

There are a few ways to solve this problem and add a custom WordPress Favicon.

What is a Favicon?

A favicon is the little logo that appears in the browser tab, history, bookmarks, and desktop link icon. The favicon also appears next search results in search engines.

Usually, we use the website’s logo as the favicon, but other things will work as well. The key is brand recognition for your visitors.

The Old Customize Theme Tool

First, is just login to your WordPress admin area, and change this link to match your WordPress site domain: https://example.com/wp-admin/customize.php. That will take you to the old customize theme tool, and you can quickly change the site logo and favicon.

Site Logo block in the Site Editor

The other option is from the Site Editor, change the Site Logo block to the new image. On this site, I like to have a different logo at the header menu than what I use for the favicon and admin area logo.

I already have the site wide logo set in my theme’s header menu as an Image block.

To change the favicon, I add a Site Logo block. From there I replace the image in the Site Logo block. Last thing, is to tick the switch titled, “use as site icon”. You’ll find it in the block settings in the right column.

My favorite: functions.php

This takes a little bit of coding, but this will provide favicons for light and dark mode. There are a few gotchas that I’ll explain. If you’re up to the task, keep reading. We’ll get it to work for each browser.

First off, I like to use SVGs for my favicons because they are tiny files and scale infinitely. They are basically XML, which looks a lot like HTML, and we can add CSS directly inside of the SVG file.

Below is the SVG file for one of the favicons we’re using now.

If all browsers behaved equally, we’d be finished with this one file! Of course, they don’t. Safari doesn’t work with SVG, and Firefox won’t load a different favicon on system appearance change between light and dark modes.

For Safari, I exported the black SVG as a 32 x 32 PNG file. Plus, this acts as a good fallback for anyone that hasn’t upgraded their browser.

For Firefox, I created the reverse version of the SVG above. Basically, I just swapped the fill colors in the styles. That way the SVG updates its own colors, and maintains the desired appearance between system appearance shifts. It’s little details that gives a website that polish we want.

You’re using a child theme, right? I’m assuming you are. Below is the PHP functions to make the favicon appear everywhere on the site.

• Add this bit of code to your functions.php.
• Put your favicon images in a directory called images inside of your child theme. I like to use SVG files so I don’t need to make different favicon sizes.
• Change the names in the code

/**
 * Adds favicons for light and dark modes based on color scheme
 */

add_action( 'wp_head', 'my_favicon' ); // front end
add_action( 'admin_head', 'my_favicon' ); // admin area
add_action('login_head', 'my_favicon'); // login page
function _arcd_favicon() {
    
    $light_favicon = get_stylesheet_directory_uri() . '/images/my-favicon-light.svg';
    $dark_favicon = get_stylesheet_directory_uri() . '/images/my-favicon-dark.svg';
    echo ""; 
    echo "";

    $png_favicon = get_stylesheet_directory_uri() . '/images/my-favicon.png';
    echo "";
    echo "";

}