Your favicon is a small image that displays next to your website title in the browser.


What this tiny image lacks in size it makes up for in putting a nice polish on your website, helping visitors distinguish your website from the other tabs they have open in their browser.

Where do I set my favicon?

Most WordPress themes will give you the option to set your favicon (sometimes labeled ‘site icon’) inside of the customizer.

Open the customizer from your WordPress dashboard by hovering over ‘Appearance’, then click on ‘Customize’— which will open up the WordPress customizer.

Customizer link in WordPress dashboard
Customizer link in WordPress dashboard

From there, look for ‘Site Identity’, which is the most common place to find the settings for your favicon in most themes.

In this website’s theme, GeneratePress, the favicon is labeled ‘Site Icon’. This is where you will upload your favicon image.

Site Icon Settings in GeneratePress

Creating your favicon file

Typically, companies will use their logo, or icon for their website’s favicon. While an .ico file can be used, more commonly people use a simple .png file.

Note: .jpg or .gif files will also work, but .png is preferred since it retains and transparency.

You’ll want to set your image up as a perfect square, the recommended size is 512px both in height and width.

Be sure to run this file through an image optimization service (I often use Optimizilla) before you upload it. You want to make sure to compress this file heavily, as you don’t want such a tiny detail to add extra load time to your page.

But wait, there’s more!

Besides showing up in your browser tab, your favicon will also appear when your website is bookmarked, or saved to someone’s smartphone as a shortcut. It’s a small detail, but it goes a long way towards making your website polished and complete.

WP Beginner provides a more in-depth tutorial on how to create and set a favicon if you need more advice.