4 Ways to Add WordPress Favicon to Your Website
WordPress favicon is one of the most ignored aspects of website branding. And whether you have a brick and mortar business or an online presence, branding is a huge aspect of becoming successful.
There’s a slight chance, though, that if you didn’t land on this article with the intention of adding a favicon to your website, then you’re wondering what a favicon really is.
Table of Content
What is a Favicon?
In essence, a favicon is the small 16×16 pixel icon that appears on the tabs on top of your browsers accompanying the website name as shown in the image below.
You can easily create a favicon yourself on a photo editing software like Adobe Photoshop or you can ask your designer to create one for your website.
However, it’s important to know why should have a WordPress favicon!
Why You Should Add Favicon to Your Site?
Just remember that nowadays a favicon is a crucial part of your website. Not only does it help in website branding, but it also gives your site identity and helps your visitors recall your brand.
Most of the time, your visitors have many tabs open on their browsers like this:
If your WordPress site has a favicon like we have, it’ll make it easier for your visitors to identify your website and quickly switch to it when they want to.
However, you probably already know all of this and just want to know how to add Favicon to your WordPress site. So without further ado, let’s move to what you really came here for.
How to Add Favicon to Your WordPress Website
As is the case with most things related to WordPress, adding a Favicon doesn’t take much effort. Here, I’ll outline 4 ways to add WordPress Favicon:
- Uploading favicon image through the WordPress customizer
- Uploading favicon image from the theme’s option
- Using a plugin
- Adding Custom Code in header.php
Let’s check out these 4 methods individually to understand how we can add WordPress favicon to your website.
Method 1: Uploading Image Through WordPress Customizer
If you’re using WordPress version 4.3 or above (and I hope that you are), you will be able to add a favicon to your WordPress website via this method.
Using the WordPress customizer to add favicon is not only the most recommended method but also the easiest.
From your WordPress dashboard, navigate to Appearance > Customize to access the customizer.
Once inside the WordPress customizer, go to Site Identity
Clicking on Site Identity will expand another menu and you will see the option to upload site icon.
Note: Your favicon image must be at least 512 x 512 pixels.
Click on Select site icon, and you will be asked to upload an image. Upload your favicon image and save your settings.
Your WordPress favicon is now updated. Don’t forget to purge your cache if you don’t see the icon right after saving your new settings.
Method 2: Uploading Favicon Through a Plugin
There aren’t many things that can’t be done without a plugin when it comes to WordPress, and it’s one of the defining features that has made WordPress what it is today. And guess what? You can even add favicons to your WordPress website through plugins. No surprises there.
Here are some of the best WordPress favicon plugins that you can use:
Favicon by RealFaviconGenerator
Using this plugin, you can not only upload a favicon to your website but also create a favicon. The plugin lets you generate favicons for desktop browsers, iPhone/iPad, Android devices, Windows 8 tablets and more. The plugin has more than 100,000 installs and is tested to work flawlessly with up to WordPress 5.1.1.
All In One Favicon
Unlike RealFaviconGenerator, All in One Favicon does not generate favicons but is a great plugin to add favicons to your WordPress website. The plugin supports all three types of favicons: .ico, .png, and .gif.
Method 3: Uploading Favicon Through the Theme’s Option
If you’ve chosen your theme carefully, then it probably comes with the option to upload a favicon to your WordPress website. Just head over to your theme options page and if your theme supports favicons, you will see an option to upload a favicon.
If your theme doesn’t have this option, though, don’t switch your theme simply because it doesn’t have this option. You can use any of the other methods mentioned here to upload WordPress favicons to your website.
Method 4: Adding Custom Code in header.php
Since customizer wasn’t available on WordPress 4.3 and below, and if you happen to be using WordPress version 4.3 or below (please come out of the cave you’re living under if you are), this method will be helpful for you. So back in the days, this is how one used to add favicon to their WordPress website.
The first step is to locate your header.php file. You can do that by navigating to Appearance > Theme Editor
In the theme editor, you will see a list of your WordPress files on the right side. Select Theme Header.
Copy and paste this code once you are in the Theme Header file.
<link rel="icon" href="https://www.wpblog.com/favicon.png" type="image/x-icon" />
<link rel="shortcut icon" href="https://www.wpblog.com/favicon.png" type="image/x-icon" />
Just replace www.wpblog.com with your website’s URL and you are good to go.
That concludes our tutorial for 4 ways to add a favicon to your WordPress site. Just remember that WordPress favicon is an important feature of any website today and you’d be missing out on a great branding opportunity if you don’t have your site’s icon displaying on the tabs on top of your browser.
Need a guide for any specific problem that you’ve run into? Just leave a message in the comments below and I’ll help you out!
Subscribe to Get a FREE WordPress Ebook Right in Your Inbox
WPblog provides the complete guide to launch your WordPress website completely FREE!
Moeez is ‘The’ blogger in charge of WPblog. He loves to interact and learn about WordPress with people in the WordPress community. Outside his work life, Moeez spends time hanging out with his friends, playing Xbox and watching football on the weekends. You can get in touch with him at moeez[at]wpblog.com.