Favicons are those little images that appear next to your site’s title in a browser tab, as well as other areas like bookmarks, app icons (on phones and tablets), and a few smaller places.
They’re a neat part of branding your site. Sure – your site won’t grind to a halt if you don’t have a favicon. But, it’s the little things that count when it comes to branding, and there’s no doubt that favicons add some extra memorability to your site.
Nowhere is this truer than tab hoarders – a group to which I definitely have a lifetime membership. I mean look at the screenshot below:
Which website is the most eye-catching in that tab mayhem? I think we can agree that it’s the site with a favicon.
In this post, I’ll show you a few different ways how you can add a favicon to WordPress to get that neat branding for your site.
But first, let’s take a quick look at how to create a favicon image, in case you don’t already have an existing image that you can use for your favicon.
How to Create a Favicon Image
When you create a favicon image, the only thing you need to adhere to is that the image should be a square.
There are technically some specific image formats that work better than others, but the methods I’m going to show you actually handle the image formats for you. So don’t worry about any technical details – just focus on creating a cool square image to use as your favicon.
Ideally, you want your image to be at least 512×512 px.
To create the image, you can always use an actual graphic design tool like Photoshop. Or, you can try something simpler like Canva. The easiest way is normally to try and work your logo into a square image of some type.
But…if you’re totally devoid of design talent (like I am), then you can always turn to a handy Favicon creator to help you out. Favicon.cc is a good option on that front.
Once you have a square image that you’re happy to use as a favicon, continue on to learn how to add your favicon to WordPress.
How to Add Favicon to WordPress With WordPress Customizer
Ever since WordPress 4.3, WordPress has had a built-in tool to help you add a favicon to your site. It’s tucked right into the WordPress Customizer and pretty much all you need to do is upload your image and you’re good to go.
This method is the absolute easiest way to get started with a favicon, but it’s not quite as thorough as the plugin method I’ll show you in the next section. With that being said, if all you care about is the favicon in the browser new tab rather than niche things like a Windows phone icon, you should totally feel free to use this method. It gets the job done.
To add your favicon to WordPress using the WordPress Customizer, get started by heading to Appearance → Customize:
Then, click on the Site Identity tab. Some themes may hide this area in a submenu, but usually, you can see this tab right away:
Inside the Site Identity tab, look for the Site Icon option and click Select Image to upload your favicon image:
Once you click Select Image, you can either choose an existing image from your WordPress media library or upload a new image using the regular media library interface:
Select that image. Then, if your image isn’t already a perfect square, WordPress will force you to crop the image into a square:
Then you’re done! Just make sure to click Save & Publish to make your changes live.
How to Add Favicon to WordPress With RealFaviconGenerator Plugin
As an alternative to the WordPress Customizer, you can also use a free plugin called Favicon by RealFaviconGenerator.
I like RealFaviconGenerator because it gives you multiple formats for your favicon to ensure that your favicon works literally everywhere. For a casual site, you might not care about backward compatibility with older versions of Internet Explorer…
But if you want the absolute best coverage, this plugin is a good option because it creates both PNG and ICO versions of your favicon. Beyond that, it also covers things like MacBook Touch Bar icons and Windows Phone tiles.
It’s also super easy to use. To get started, install and activate the plugin. It’s free and listed at WordPress.org, so you can install it directly from your WordPress dashboard.
Once you activate the plugin, go to Appearance → Favicon to create your favicon.
To start, either upload a new image or choose an existing image from your media library.
Once you select an image, click Generate favicon to turn it into your favicon:
At this point, the plugin will redirect you to the Real Favicon Generator website. Don’t be alarmed – this is supposed to happen.
On this page, you can manually configure some aspects of your favicon like backgrounds, shadows, and more. You don’t need to change anything – the defaults are fine. But if you want to tinker, this is where you can do it.
Once you’re done tinkering, click the Generate your Favicons and HTML code button:
After a few seconds of processing, the plugin will take you back to your WordPress dashboard. And that’s it! You’re done.
Don’t Want to Use the Plugin? Do It Manually
If you’d prefer not to use the plugin, RealFaviconGenerator also has a standalone tool that can help you create a favicon.
The tool generates the images and HTML code for you, so literally all you need to do is:
- Upload the images to the root folder of your WordPress site.
- Add the code from RealFaviconGenerator to your theme’s <head> section either directly or by using a plugin like Insert Headers and Footers.
If you’re comfortable uploading files via FTP and adding basic code snippets to your site, this method is pretty simple and lets you skip the plugin.
You can find the standalone RealFaviconGenerator tool at the website. Upload your image, configure it, then the site will give you a ZIP file of the images as well as the code:
Wrapping Things Up
Like I said, having a favicon won’t massively improve your site. But with how easy it is to add a favicon to WordPress, you really have no excuse not to!
Remember, all you need is a square image that you want to use as your favicon. Then, you can add it to WordPress using either the WordPress Customizer or the RealFaviconGenerator plugin or standalone tool.
If you have any questions about how to add a favicon to WordPress, leave me a comment and I’ll try to help you out!