TlDR; You can use an SVG image as your website favicon to improve site speed on web browsers that allow it while falling back to an .ICO favicon if the browser doesn't support an SVG.

I read an interesting post that said you could use an SVG image as your website favicon for browsers that support it but also be able to fall back to the usual .ICO favicon if they don't. This got me thinking about a small improvement you could achieve by using an SVG favicon over an ICO favicon. While the difference wouldn't be massive I thought if I could shave off a few more milliseconds then that couldn't hurt, especially on a slower mobile connection.

How To Set-Up Your SVG Favicon

To set up your SVG favicon you'll need to make sure you have your favicon saved as an SVG file. If you had your favicon designed for you, you may need to speak to your design team and get them to send over the new SVG version. If you just want to give this a go or need a quck and dirty approach you can always try a converter website that will take your .ico favicon and convert it into an SVG for you. Depending on the complexity and quality of your favicon you may have mixed results with just converting the old .ICO to SVG.

Once you have your favicon you'll need to upload it to your website. Normally, you'd add it through the WordPress Customizer or in your theme options. However, as we're using an SVG favicon and we want it to fall back to the .ICO favicon we need to add it manually with a few lines of HTML. Depending on your theme there may be a section where you can add HTML to the head of the page, if not you can use a plugin such as Header and Footer Scripts to do this for you.

Now that your new SVG favicon is uploaded we can add the HTML that lets the user's web browser choose which favicon it should load.

<style>
.border {

border: 3px solid #CCE4FC;
padding: 10px;
margin-bottom: 5px;
}

details summary::-webkit-details-marker {
background: url(https://chaykelly.com/wp-content/uploads/2020/02/Plus.svg) center no-repeat;
color: transparent;
}

details[open] summary::-webkit-details-marker {
background: url(https://chaykelly.com/wp-content/uploads/2020/02/Minus.svg) center no-repeat;
color: transparent;
}
</style>

Once you've done this you can then test to make sure it's working as intended and if there are any speed improvements to your site. You can test your speed improvements by using one of the SEO tools from my helpful tools section such as WebPageTest or set up a recurring test with the speed demon spreadsheet.

SVG vs ICO Favicon Results

After switching to using the SVG favicon over the ICO favicon I have managed to reduce the file size by 31.83% (from 1.2kb to 818b), decrease the favicon load time from 192ms down to 41ms and I've also managed to reduce the page load time however it's hard to put an exact figure on it as even after taking the average from five speed tests on each favicon it still keeps changing. between the two!

I hope this has been helpful for anyone looking to improve their site loading speed as well as people trying to future proof their website.