How to Easily Create a Blank Favicon with Code (Fix 404 Errors)

I do a lot of speed testing in my line of work. Usually, I’m testing the performance of the default WordPress theme on a fresh install to use as a baseline. Or perhaps running a comparison for a client. Being that Kinsta makes it incredibly easy to create new installs and snapshots, I’m constantly destroying and spinning up new WordPress sites from scratch.

One issue that I run into every single time is that speed testing tools like Pingdom and WebPageTest complain about a missing favicon (404 error). Talk about first world problems. 😂 Therefore, today I’m going to share with you a couple quick tricks to simply create a blank favicon without any images or photo imaging tools. It’s a good little thing to have bookmarked.

Missing Favicon on New WordPress Site

For example, in Pingdom, a missing favicon will generate a 404 error.

In WebPageTest it’s even more obvious, as a 404 error is blatantly highlighted in red.

Create a Blank Favicon with Code (No Images)

The easiest way to fix this is to simply create a blank favicon with code (data) without messing with any images. If you have a favicon you could of course always drop it in the root of your WordPress site via SFTP. But a lot of times, this following way is simply faster, especially in my workflow.

Before I proceed, I have to give full props to David Walsh, his article definitely inspired this. But sometimes it’s just easier for me to find things on my own blog. Is that selfish? 😉 Perhaps, but I think using your own blog as documentation helps benefit everyone.

Option 1 – Use Our Perfmatters Plugin

If you’re using our Perfmatters plugin, we have an easy option to add a blank favicon to your site with a single click.

To add a blank favicon simply click into the Perfmatters settings, click on the “Extras” tab, and enable the “Add Blank Favicon” option.

Option 2 – Drop Code in WordPress Header

Your second option is to simply place the following code directly in your WordPress theme’s header.php file before the </head> tag.

<link href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABmJLR0T///////8JWPfcAAAACXBIWXMAAABIAAAASABGyWs+AAAAF0lEQVRIx2NgGAWjYBSMglEwCkbBSAcACBAAAeaR9cIAAAAASUVORK5CYII=" rel="icon" type="image/x-icon" />

However, I’m not a big fan of editing files directly and this could also vary based on your theme, therefore I use this second method.

Option 3 – Use PHP Snippet

I love the free Code Snippets plugin from Shea Bunge. In fact, I usually always make little PHP tweaks on my sites (even fresh installs) and therefore this is a plugin I always install.

All you need to do is create a new PHP snippet. You can name it whatever you want. Then echo the above code using PHP along with the WordPress action to automatically add it to your site’s header.

Here is the code for the PHP snippet:

function favicon() {
echo '<link href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABmJLR0T///////8JWPfcAAAACXBIWXMAAABIAAAASABGyWs+AAAAF0lEQVRIx2NgGAWjYBSMglEwCkbBSAcACBAAAeaR9cIAAAAASUVORK5CYII=" rel="icon" type="image/x-icon" />';
}
add_action('wp_head', 'favicon');

You can then select run only on the front-end of the site.

And that’s it! No more missing favicon or 404 errors. Speed test away. And if you’re on a production site, I always recommend loading the final version of your favicon from your CDN.