What the heck is a favicon? Why is it such a big deal… or actually is it actually any sort of deal at all? If you don’t know the answers to these questions I’ll explain what a favicon is and why it’s worth taking some time to add one to your WordPress blog. If you know what they are but don’t know where to find them, I’ll tell you where the favicon is in WordPress so you can understand how to enable it.
N.B. In the course of this post, I’ll also explain how to create a favicon if you don’t have one. It’s quite straightforward and definitely worth the effort.
What are Favicons?
Favicons are the tiny square images that display in your browser tab where your page title appears:
The favicon (or site icon as it’s often called) is one of those small details often overlooked in the heat of setting up a WordPress blog. You still see many WordPress blogs (and actually established brand sites) that don’t have them. It’s easy to understand why because starting a blog is pretty intense. There’s a big list of important things you need to get straight, especially if you’re setting up WordPress for the first time.
So why add to it with something seemingly so trivial?
Well… favicons are important for a number of reasons:
- They make your blog look more professional.
- They’re visual cues that make it easy to identify a specific page (or pages) when you have multiple browser tabs open.
- Favicons increase brand recognition.
- There’s arguably an indirect SEO benefit to having them.
Professional Look
Look at the difference between these three favicons.
Each belongs to a reputable site but making a judgement based upon the browser tab for each, which one looks less professional and trustworthy?
The more professional a blog feels, the more likely it is that you’d choose one over the other. It’s interesting how such a small thing can actually affect something as huge as a purchasing decision… but it most certainly can.
Visual Cues
If you’re like me you’ll often have dozens of browser tabs open at the same time. This can make your browser workspace a little crowded and it can be difficult to find specific pages you have open in one of your tabs.
Here are two examples of browser tabs and favicons and how they help or hinder usability.
In this one, only one of the tabs shows a favicon. This is the most extreme example of the usability benefit of favicons, but you can see how clearly it stands out against the others. Of course it’s unlikely you’ll ever experience this since most blogs / sites do have them set up.
Conversely this image shows the opposite: all but two of the tabs have a favicon configured. You might argue that this too makes the tabs without the favicon stand out, but at a glance you can’t distinguish which of the non-favicon sites are which. They also look less professional than the others as we’ve touched on above.
Brand Recognition
Once you’ve visited a blog several times you’ll get used to seeing its favicon… you’ll actually expect to see it. This is brand recognition / reinforcement in action and it’s pretty powerful!
Favicons and SEO
There’s arguably an SEO benefit in using favicons, at least indirectly, since they potentially enhance the usability of your WordPress blog.
All the tiny details combined that work together to make your blog easier to use, contribute towards how visitors feel about your blog. In general terms, the more user friendly a blog is, the more likely it is that somewhere down the line search engines will take note in some way.
I won’t oversell this since search engines don’t bump you up the search results because of favicons, but hopefully you get the point that small details potentially help SEO efforts.
Creating a Favicon for WordPress
The easiest way to create a favicon for your WordPress blog is to use your favourite graphics editor. You could use a behemoth package like Photoshop or a slick free online tool such as Photopea.
Create a 512px x 512px image and to work out a meaningful design you like the look of. Bear in mind that your image will scale down to a 16px x 16px image when you upload it to WordPress, so try not to make it too detailed: imagine how your 512px x 512px image might look when it scales down to help inform your favicon design.
You can use a transparent background as I have for my favicon above, or use a background color if you prefer. When you’ve finished your design save it in one of the following formats in preparation for uploading to WordPress:
- GIF
- JPG
- PNG
Once you have your image prepped, you’re ready to add your favicon in WordPress!
Using the Site Identity Tool to Upload Your Favicon in WordPress
The first place to look is your WordPress admin area. Click on Appearance > Customize > Site Identity from your admin navigation and you’ll arrive at the customizer for your WordPress blog.
From here you can do several things such as update your main title and tagline and opt to enable or disable them in your header.
More importantly for the purposes of this post, you can upload an image for use as your WordPress favicon.
So… take the 512px x 512px image you created earlier and use the Site Identity area of WordPress to upload it. There will be an option to crop the image to make it square, but using the dimensions I’ve discussed you can just opt to skip the cropping process.
N.B. Your Site Identity customizer might look slightly different to mine, but you should see something similar, with options to upload or change an image for use as the favicon in WordPress.
Summary
- Favicons are a small but important asset for your WordPress blog.
- They help make your blog look professional, make it stand out in your browser tabs, help promote brand recognition and possibly provide a (probably minuscule) SEO benefit.
- Favicons must be square.
- The favicon uploader in WordPress lives at Appearance > Customize > Site Identity in your admin navigation.
- WordPress recommends using a 512px x 512px image as your favicon if you’re using the Site Identity favicon upload tool.
As a final note, why not check out some of my other WordPress tutorials?
That’s all for now.
Paul
I hoped this helped explained where the favicon is in WordPress. Please drop a comment below to let me know.
Leave a Reply