How to Create and Add a Site Icon (Favicon) in WordPress

>How to Create and Add a Site Icon (Favicon) in WordPress
  • volley ball icon

In WordPress 4.3, a ‘Site Icon’ feature was introduced, which is basically a favicon, but better.

Why better?

Well, usually, when creating a website, any type of website, you don’t just need one favicon, the traditional 16×16 favicon.ico.

Different browsers, devices and operating systems require different sizes for a favicon (16×16, 32×32, 120×120, etc.), so you’d need to add a lot of favicons with a lot of different sizes in order for them to display properly on every platform.

In the past, you could add a standard favicon to your WordPress website via FTP or theme.

Most WordPress themes only allowed you to add one favicon. With time, themes have started to give webmasters the opportunity to add more favicons, especially for Apple devices, but it still wasn’t enough.

So, WordPress implemented the ‘Site Icon’ feature, which is basically a big 512×512 favicon, which will cover almost all platforms, and which will display in browser tabs, as bookmarks or home screen app icons, and so on. This is very good for brand awareness!

So, you basically add one large favicon (.png, not .ico) and WordPress will take care of the rest.

This is why the site icon feature is better! Use that instead of your theme’s traditional favicon feature, since some still have that implemented in their settings.

Creating a WordPress Site Icon

I’m going to give you some tips and recommendations, but I’m not going to show you exactly how to create a site icon, because it depends on what type of logo you have, what kind of site icon you want, and you’ll also need to know how to work with GIMP or Photoshop (recommended).

When creating a logo, you should also create a separate site icon for WordPress.

Most of the times, the site icon will be the icon contained in your logo, like you can see in our logo, that white ‘T’ in a red circle.

But some of you might have a logo that only contains text.

Now, you can’t squeeze a text logo into a square that will shrink to very small sizes, because it will be illegible and look awful.

text favicon

512×512 site icon on the left; site icon turned into a 16×16 favicon on the right

As you can see, you can’t understand anything from that small favicon on the right. It’s just a blue background with some white… stuff.

So, in cases like this, you might want to create a site icon with the first letter of your logo / brand’s name, like Medium does, for example.

medium favicon

If you want a WordPress site icon, but don’t know how to create one yourself, and don’t want to spend a lot of money on a graphic designer for something so little, then you can try this Fiverr gig, which offers WordPress site icon creation for 5$!

How to add a site icon in WordPress

So, you’ve created your site icon. Awesome! Let’s see how to add it now.

You can watch the video or read the steps.


1. Log in to your WordPress Dashboard.

2. Go to Appearance -> Customize, found in your Dashboard’s left sidebar.

3. Select Site Identity.

wordpress site identity

4. Under Site Icon, click the Select image button.

select wordpress site icon

5. Upload your site icon and press the Select button.

upload wordpress site icon

6. WordPress will show how it will look like.

7. If you’re ok with it, click the Publish button at the top.

That’s it!

You’ve now successfully added a site icon for your WordPress website!

That’s a wrap

Hope the post helped you to add a site icon to your WordPress website!

If you have any questions or thoughts, drop a comment, contact us or message us on Facebook.

You can also follow us on Twitter and subscribe to our YouTube channel.

If you want to start your own WordPress blog, or need a website for your business, our WordPress services are at your disposal! We also provide WordPress support and maintenance!

You can also purchase a ready-made WordPress website with hosting and support included!

By |2018-06-12T19:04:34+00:00June 12th, 2018|WordPress|0 Comments

Leave A Comment