WordPress for beginners:

How to change your favicon in WordPress: a step-by-step guide

Have you seen that icon in the search results in front of your website’s URL? It’s been visible for a while now in Google’s mobile results. And, as we speak, it’s rolling out for desktop search results too. So, no excuses, your site needs a good favicon. Luckily, setting a favicon in WordPress is very easy. Here we’ll explain how to change the favicon of your WordPress site!

We’ve been writing about favicons for years. This article about favicons and branding will tell you what you need to think about in that regard. Read it, and make sure your favicon is good and stands out.

Yoast’s favicon shows when you search for our brand on mobile.

How to change your favicon in WordPress

Now let’s give you a simple step-by-step guide on how to change your favicon in WordPress. The favicon is called a site icon in WordPress and can be added in the customize theme section.

  1. Log in to your WordPress website.

    When you’re logged in, you’ll be in your ‘Dashboard’:

  2. Click on ‘Appearance’.

    On the left-hand side, you’ll see a menu. In that menu, click on ‘Appearance’.

  3. Click on ‘Customize’.

    The ‘Appearance’ settings will expand providing you with additional options. Click on ‘Customize’.

  4. Click on ‘Site Identity’ and add your favicon under ‘Site Icon’.

    Here you can define your site name, tagline, logo, and icon. The image you set under “Site Icon” will be used as your site’s favicon:

That was easy, wasn’t it? So, no more excuses, get to it. Change that favicon on your WordPress site!

Read more: Favicons and your online brand »

WordPress for beginners series

Coming up next!


18 Responses to How to change your favicon in WordPress: a step-by-step guide

  1. Ralph Decaro
    Ralph Decaro  • 5 years ago

    Most custom themes bypass the WordPress siteicon hook and use their own setup as a replacement. So, I would say since most designers/developers are starting with a custom theme, this is pretty useless and does not allow any icon to flow through to search results. IF you want this functionality to work for everyone, create a hook to a graphic which can be uploaded to the Media Library – this way no matter what theme is used you can grab it.

    • Joost de Valk

      Honestly, themes that bypass this functionality aren’t helping anyone so I would really recommend against it.

  2. John Pitney
    John Pitney  • 5 years ago

    OK, so I go to my page as you directed, but…no ‘appearance’ in the menu. How about a wysiwyg solution???

    • Willemien Hallebeek
      Willemien Hallebeek  • 5 years ago

      Hi John, Perhaps you can contact your developer? It could be possible you don’t have the rights to edit the appearance section.

  3. Kevin Burrows
    Kevin Burrows  • 5 years ago

    Is this function work same for all themes?

    • Joost de Valk

      It should be the same for most themes, unless themes specifically remove this functionality and replace it with their own, which I would recommend against. The thinking there is: if you’re switching your theme, how likely are you to want to keep your favicon? I’d say quite likely in a lot of cases.

  4. Yvonne Hendrych
    Yvonne Hendrych  • 5 years ago

    I’ve also tried it several times (in the past) and my personal favicon doesn’t show up.
    It still displays the favicon of the Demo Theme.

    • Joost de Valk

      Did you talk to your theme author about that? They might have broken it somewhere.

  5. Zaman
    Zaman  • 5 years ago

    It worked perfectly and the instructions were super easy to follow. You all do a great job explaining things in a way I can understand. Thank you so much!

    • Willemien Hallebeek
      Willemien Hallebeek  • 5 years ago

      Hi Zaman, Great to hear, you’re welcome!

  6. Michael Maximus
    Michael Maximus  • 5 years ago

    Not entirely true.
    Although in most themes this is sufficient, the Yoast SEO plugin does not automatically insure that the favicon is shown in Google’s new mobile SERP.
    In order to do so, you need to manually upload it as favicon.ico in the root of your website.

    So set it under appearance for your browsers AND upload it in a 48x48px ratio in the root folder.

    • Joost de Valk

      Google supports the favicon code WordPress outputs just fine, so if your theme doesn’t do that, make sure it does, and this should be enough!

  7. atul gaur
    atul gaur  • 5 years ago

    I have all things in place but favicon of my site does not appear in chrome browser

    • Joost de Valk

      Caching could be a problem here… Is it still not working?

  8. Philip L Franckel
    Philip L Franckel  • 5 years ago

    I have a file named favicon.ico which is on the server and I see the favicon on desktop. It doesn’t show in WordPress. I tried uploading to WordPress and got a message that favicon.ico is not allowed for security reasons.

    • Joost de Valk

      Yeah WordPress doesn’t allow .ico files, if you have a favicon.ico file on your server that you’re fine with, you’re good though and you can just keep that!

      If not: delete that file, and follow the steps above.

  9. Allen Martin
    Allen Martin  • 5 years ago

    Simple and straightforward article. I was able to fix a unique favicon on my blog with the help of your article. It’s really helpful. Thanks for sharing.

    • Willemien Hallebeek
      Willemien Hallebeek  • 5 years ago

      Hi Allen, That’s great! You’re welcome :-)