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 visible for most people in mobile results now. 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!

New to WordPress? Don’t worry! Our FREE WordPress for beginners training is here to help. Find out how to set up your own site, learn the ins and outs of creating and maintaining it, and more. Soon you’ll be able to do it all by yourself!
Yoast’s favicon shows when you search for our brand on mobile.

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.

Did you know that, as of Yoast SEO 12.1, you’re able to see your site’s favicon in Yoast SEO’s mobile snippet preview too?

Now let’s give you a simple step-by-step guide on how to change your favicon in WordPress:

Time needed: 5 minutes.

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’:WordPress Dashboard

  2. Click on ‘Appearance’.

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

  3. Click on ‘Customize’.

    The ‘Appearance’ settings will expand providing you additional options. Click on ‘Customize’.customize in WordPress

  4. Click on ‘Site Identity’.

    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 »

Free: WordPress for beginners training

  • Find out how to set up your own WordPress site
  • Learn everything about creating and maintaining a WordPress site
  • Plus: learn all about WordPress, like its history and its open-source community
  • Free online & on-demand training by Yoast
More info

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

  1. Ralph Decaro
    Ralph Decaro  • 2 months 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  • 2 months 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  • 2 months 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  • 2 months 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  • 2 months 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  • 2 months 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  • 2 months ago

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

  6. Michael Maximus
    Michael Maximus  • 2 months 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  • 2 months 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  • 2 months 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  • 2 months 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  • 2 months ago

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