How To Create And Add A Favicon To WordPress

The tiny favicon at the top of the menu bar tells you a lot about the website that you’re visiting, so you must make it ideal for your brand.

Hey everyone, I’m Kelly, and today I’m going to show you how to create and upload a favicon into WordPress.

First, let’s head on over to WordPress and have a look at where you upload your favicon. First, go to ‘Appearance’ and then ‘Customize’, and then to ‘Site Identity’. On the left, you will see there is a box to add my logo, and a box to put in my site icon, which is the Favicon, or website icon. As you will probably know, the YouTube Favicon is the little red rectangle with a triangle in, and that’s instantly recognisable. If the user of your website had lots of tabs open, and your tab was just a tiny little icon, you want it to stand out, you want them to know how to get back to you, and you want it to look professional.

Site icons should be square and at least 512 x 512 pixels. To do this, let’s head over to Canva. I love Photoshop, and I’m fully trained in Photoshop, however, Canva is so easy that I use it to teach all of my students, and do a lot of my work in there now too. Once in Canva, click on ‘Create a design’ and click on ‘Instagram Post’, and it creates a square for you, which I can then change the size of. I want to change it to 512 x 512 pixels, so just click ‘Resize’, and now I have the perfect size canvas for my Favicon.

If you already have a logo make sure it has a cute little image that can be a simple icon that will look great at a tiny size. Delete everything out of the image apart from the small part you want to use, and then make that as large as possible on your canvas. Within Canva you could also change the colour, and then all I do is click download. The image should be a PNG because you want your Favicon to have a transparent background. Then just click on download.

You will need to change the name of the file, as ‘untitled design’ is not a good file name to upload to WordPress, so I’m going to call it ‘favicon’. I could even call it KellySparks-favicon. When naming files, put dashes not spaces as for websites that’s best practice.

I now return to my website, and we have the little world icon. I then click on ‘Select site icon’, click on ‘Upload Files’, ‘Select Files’, and find it in my downloads as ‘KellySparks-favicon’. Click on ‘Open’, and that will upload it to my website. If I like how it all looks, I can click ‘Publish’ and my Favicon is uploaded and saved.

I hope this video has inspired you to go off and create a favicon for your website.