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.

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.
- Log in to your WordPress website.
When you’re logged in, you’ll be in your ‘Dashboard’:
- Click on ‘Appearance’.
On the left-hand side, you’ll see a menu. In that menu, click on ‘Appearance’.
- Click on ‘Customize’.
The ‘Appearance’ settings will expand providing you with additional options. Click on ‘Customize’.
- 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!
-
WordCamp Europe
June 08 - 10, 2023 Team Yoast is Attending, Organizing, Speaking, Sponsoring WordCamp Europe. Click through to see who we'll be there, what we'll do there and more! See where you can find us next » -
Yoast SEO news webinar - May 30, 2023
30 May 2023 Our head of SEO, Jono Alderson, will keep you up-to-date about everything that happens in the world of SEO and WordPress. All Yoast SEO webinars »
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.
Honestly, themes that bypass this functionality aren’t helping anyone so I would really recommend against it.
OK, so I go to my page as you directed, but…no ‘appearance’ in the menu. How about a wysiwyg solution???
Hi John, Perhaps you can contact your developer? It could be possible you don’t have the rights to edit the appearance section.
Is this function work same for all themes?
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.
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.
Did you talk to your theme author about that? They might have broken it somewhere.
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!
Hi Zaman, Great to hear, you’re welcome!
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.
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!
I have all things in place but favicon of my site does not appear in chrome browser
Caching could be a problem here… Is it still not working?
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.
Yeah WordPress doesn’t allow
.ico
files, if you have afavicon.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.
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.
Hi Allen, That’s great! You’re welcome :-)