A favicon is a small image that displays next to your website’s title in your browser tabs. The purpose of a favicon is it helps you to identify which website your looking at, and allows users to instantly recognize a brand.
Brand recognition is essential for any businesses and builds trust within your audience. One of the most common WordPress mistakes is not adding a favicon.
In this article, we’ll show you how to add a favicon to your WordPress site, in a few easy steps. We’ll also explain why it’s good practice to display a favicon, and how it can benefit your site.
Table of Contents
Why You Need A Favicon On Your WordPress Site
A favicon establishes brand identity. It also makes your site more usable and offers a better user experience.
As you add more tabs to your internet browser, the website title becomes smaller, and may eventually disappear if you have many tabs open. The favicon on your website helps users identify your website quickly, allowing them to quickly switch to the tab they want to view.
If your users add your website to the homescreen of their smartphone or mobile devices, your favicon will be displayed here, and will look more like an app if you have a favicon.
How To Create A Favicon
Many businesses tend to use their brand’s logo as their favicon. For WordPress, the recommended site icon is at least 512 pixels x 512 pixels. The site icon image should be a square, not a rectangle, however, you can use a rectangle but WordPress will allow you to crop the image when you add it to your website.
If you have access to Adobe Photoshop, then I would recommend using this to create your favicon. However, if you don’t have Photoshop or don’t have the budget for it, you can use a favicon generator tool for free.
You can use a transparent image or fill the image with any background color you choose. Just make sure that your favicon is recognizable, clear, and fits the correct size.
Adding Your Favicon To WordPress
Now that you’ve created your favicon (or site icon), it’s time to add it to your WordPress website. Since the release of WordPress 4.3, you can now add your favicon from your WordPress admin area. Navigate to Appearance > Customize then click on the ‘Site Identity’ tab.
If you are using a premium WordPress theme, you may find that your ‘Site Identity’ tab is located under Header in the same menu.
Here you can change the site header, site title, site logo, site icon, and tagline. To change your WordPress favicon, click on ‘Change Image’ if you already have one, or ‘Select File’ to upload a new site icon.
If the image you upload exceeds the recommended size, WordPress will allow you to crop the image. However, if the image matches the recommended size, you can simply save your changes.
Now you can go to the homepage of your website to see your WordPress favicon in action! You can also view your site icon on a mobile device by selecting ‘Add to homescreen’ from your browser’s menu.
How to Add a Favicon to WordPress 4.2 or Below
If you’re using WordPress version 4.2 or below, changing your favicon is a little different. You’ll need to upload your favicon directly to your website’s root directory using FTP. A file transfer tool like FileZilla will be more than sufficient.
Once you’ve connected to your website via FTP, navigate to your theme’s header.php file and add the following code into the file:
Make sure you replace webhostingprof with your site’s URL. If your theme doesn’t contain a header.php file, you can install a plugin to do the hard work for you. While plugins are useful, I would only recommend using this if you either don’t have a header.php file or you can’t locate it.
It’s good practice to learn where these files are in case you have to use them again! I’m not purposely trying to make things more difficult for you!
A plugin like Insert Headers and Footers is a good choice. You can install and activate the plugin, then navigate to Settings > Insert Headers and Footers then paste the code above. Remember to save your settings and you’ll be good to go!
Favicons are important for your website, not only for branding, but also for user-experience. Favicons allow your website users to easily identify your website and in all honesty, they look far better than a blank box.
Now that you know how to add a favicon to your WordPress website, why don’t you give it a go? Adding a favicon is easy and free, and we have plenty of other resources that can help you with your WordPress website, like how to change the font size on your posts and pages, or how to remember your WordPress login URL.