Cookies help us provide, protect and improve our products and services. For more information about our use of cookies, please refer to our Privacy policy.
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.
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!
Joost de Valk is an internet entrepreneur and the founder of Yoast. After the sale of Yoast to Newfold Digital in 2021 he has stopped being active in 2023. Joost, together with his wife Marieke, actively invests in and advises several startups through their company Emilia Capital.
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 »
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 »
18 Responses to How to change your favicon in WordPress: a step-by-step guide
Ralph Decaro • 4 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.
^ Post author
Joost de Valk • 4 years ago
Honestly, themes that bypass this functionality aren’t helping anyone so I would really recommend against it.
John Pitney • 4 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 • 4 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.
Kevin Burrows • 4 years ago
Is this function work same for all themes?
^ Post author
Joost de Valk • 4 years ago
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.
Yvonne Hendrych • 4 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.
^ Post author
Joost de Valk • 4 years ago
Did you talk to your theme author about that? They might have broken it somewhere.
Zaman • 4 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 • 4 years ago
Hi Zaman, Great to hear, you’re welcome!
Michael Maximus • 4 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.
^ Post author
Joost de Valk • 4 years ago
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!
atul gaur • 4 years ago
I have all things in place but favicon of my site does not appear in chrome browser
^ Post author
Joost de Valk • 4 years ago
Caching could be a problem here… Is it still not working?
Philip L Franckel • 4 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.
^ Post author
Joost de Valk • 4 years ago
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.
Allen Martin • 4 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.
See more from the WordPress for beginners series 
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
.icofiles, if you have afavicon.icofile 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 :-)