In this quick tip, you'll learn how to change the favicon in WordPress. We will begin the tutorial with a brief intro of favicons by answering questions like what they are and why they are important.
Let's get started.
What Are Favicons and Why You Should Use Them?
Favicons are those small images that appear in a browser tab next to the title of any webpage.
Not all websites write their names in the title for every single page that they have. The full title along with the website name might not always be visible, even if they do append it at the end. This can make it hard to recognize which websites are loaded in which tabs. Favicons make this task very easy if either the website is very popular or you are a frequent visitor.
You can see in the above image that the first tab has loaded a Wikipedia page, while the third tab has loaded CodeCanyon.
Favicons show up in a lot of places like the browser tabs we just discussed, as well as on Google search results in mobile. They are also shown in users' bookmarks and browser history.
This means that having your own custom and recognizable bookmark instead of something generic can help your visitors quickly identify your website and maybe increase the click-through rate in search results, among other benefits.
How to Change the Favicon in WordPress?
The exact menu items that you have to click in order to reach the final screen can be different depending on the theme you have installed. Just look around a bit under Appearance > Customize and you will most probably find the favicon settings.
Changing the Favicon in the Default WordPress Theme
The WordPress default themes come with built-in functionality to change the favicon of your website. You can do it in a few steps from the admin dashboard area.
Go to Appearance > Customize from the side menu.
This should take you to the following screen, where you can click on Site Identity.
You can set a number of things here like the site title, tagline, logo, and favicon. Click on the Select Site Icon button and choose an image from the media library.
This should update the favicon for your website like the image below.
Changing the Favicon in Premium WordPress Themes
Some premium themes might override the default customization setup of WordPress. This basically means that you won't be able to take the default path to add your own favicon. Your best bet in this case would be to just check out a few menu items. Here is an example from the Eduma theme.
Go to Appearance > Customize from the side menu. This will show you a bunch of items. Based on their names, General seems most plausible to contain favicon settings, so we click on it.
On the next screen, we click on Logo to change the site favicon.
Here you might see some options about site title, tagline, and logo. Scroll down a bit to find the settings that change the favicon.
I hope this quick post helped you realize the importance of favicons and how you can change the favicon on your own WordPress website.
One last thing I would like to mention is that favicons will usually be scaled down for display on different devices and in different contexts. Therefore, you should consider using designs that are simple and memorable.
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post