Sunday April 26, 2020

Using An SVG As Your Website Favicon

SVG Favicon Creation Illustration

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.

.border {

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

details summary::-webkit-details-marker {
background: url( center no-repeat;
color: transparent;

details[open] summary::-webkit-details-marker {
background: url( center no-repeat;
color: transparent;

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.

Chay Kelly Headshot
Chay Kelly
I am an SEO Consultant and digital marketer with many years of agency experience in implementing and executing digital strategies such as SEO, PPC and email marketing campaigns.
Learn More

Similar Posts

Resizing an image in Sqoosh

How To Size Images For The Web

Sizing images for the web can be hard, especially working in an agency that specializes in branding services and wants to show off their work in the highest quality possible. As a tech SEO, I’m always looking to improve a website in as many ways as possible and one of those ways is improving website […]
Read More
Create An HTML Accordion

How To Create An HTML Accordion

TLDR; I decided to figure out how to create an HTML accordion for my useful marketing tools and useful code snippets section so that I wouldn’t have to take the speed hit from javascript. If you just want to see the instructions and not my ramblings you can view them at the bottom of the […]
Read More