WordPress Favicons are important for brand recognition. From creating a great logo to developing key messaging and delivering great content, the easier it is for visitors to recognize your brand, the better the chances they’ll remember your site and make the move from content curiosity to sales conversion.
This is the role of the favorite icon or “favicon” that’s used in web browser tabs, bookmarks, and on mobile devices as the app image for your site. Keep reading for our functional guide to favicons — what they are, why they matter, and how to enable them in WordPress.
Use the following jump links to navigate the article, or just keep scrolling:
If you would rather follow along with a video, here's a walkthrough by Elegant Themes:
What is a WordPress Favicon?
The official WordPress support page defines a favicon as “an icon associated with a particular website or web page.” This description doesn’t do the term justice — in fact, favicons are everywhere and are intrinsically associated with your brand.
Let's take a closer look at how favicons look and why they matter below.
WordPress Favicon Size
The typical size of a WordPress favicon is 512 x 512 pixels. These icons are stored as .ico files in the root directory of your WordPress server.
What does a favicon look like in real life? For a quick example, take a look at the browser tab of this webpage if you’re on a desktop or the area just under the address bar on your mobile device. Notice anything? That orange symbol with lines and circles is HubSpot’s favicon — and it shows up anytime you’re on our site.
Here's the desktop tab:
Here's what it looks like on mobile:
In most cases, favicons are the same as brand logos scaled down to fit web and mobile browsers. Where this isn’t possible — such as cases where your logo is too complex or detailed — site owners typically opt for similar color schemes and thematic elements to ensure brand consistency.
Once you start seeing favicons you can’t unsee them; from webpages to tabs to bookmarks and mobile applications, the icon you choose for your favicon is inextricably linked to your site and your brand — so make sure you choose wisely.
Why Favicons Matter
Favicons are the visual currency of your brand. They’re everywhere — from browsers to bookmarks to mobile apps — and become an integral part of your site’s overall branding strategy.
As result, effective favicon design and deployment offers three broad benefits:
Improved Brand Recognition
Think of your favicon like your calling card — the icon needs to be simple, recognizable and consistent. The more places your favicon appears, the better, since this makes it easy for users to connect your WordPress site with your icon image.
This also makes it easier for other websites to use your branding in blog posts that contribute to your linkbuilding efforts. This creates a connection between you and that blog's readers, causing an association that might lead to further opportunities down the line.
Consistency is also key as users open multiple browser tabs and the available space for text descriptions naturally shrinks. Open enough tabs and all that’s left is — you guessed it — room for the favicon.
Increased Consumer Confidence
While visitors may not be able to define what a favicon is or how it works, these icons are inherently familiar. So familiar, in fact, that sites without favicons often stand out from the crowd for all the wrong reasons.
Much like relevant social media content and secure site connections, favicons are critical to boosting consumer confidence in the products or services you offer on your site.
Like it or not, a favicon improves brand legitimacy. If your website has a favicon or logo, you add an air of professionalism to your business.
Integrated Mobile Consistency
The impact of mobile devices can’t be ignored, with smartphones and tablets now outpacing desktops as the primary means of consumer online interaction. Favicons make it possible to ensure your brand easily translates to mobile — when users create website bookmarks on mobile home screens, your favicon stands in for the link.
Favicon Creation Guidelines
Not sure how to get started creating your site’s favicon? Let’s break down some best-practice guidelines.
1. Sizing
As noted above, favicons are typically 512 x 512 pixels in size. While it’s possible to use a larger WordPress favicon size, the platform will often ask you to crop the image down.
2. Keep it Simple
While it’s possible to add background colors and other customization to your favicon, keeping it simple is often the best choice. Here, simplicity includes opting for transparency over background colors and keeping the number of foreground colors in your favicon to one or two at most.
Ideally, your favicon will look almost identical to your brand’s logo — if that’s not possible, try to pull elements from your logo such as shapes or color schemes that help tie in your new favicon.
3. Stand Out
The whole point of a favicon is to improve brand recognition and customer confidence in your business. This means that you can't just have any old bland image to represent your business. I've found that picking something within your business' color palette that matches your product is the way to go.
For example, if you're a car racing blog - pick something that incorporates a checkered flag, a tire, or a lightning bolt (to represent speed). That way when people see your favicon, they'll instantly know what your business is all about.
4. Choose Wisely
Site owners can update their favicon at any time, but it’s a good idea to keep the number of changes to a minimum. Here’s why: If users see a different favicon every time they log on to your website, they won’t have an opportunity to associate a specific image with your brand.
Bottom line? It's better to go without a favicon until you find one that works for your site and you don’t plan on changing.
How to Enable WordPress Favicons
To get your favicon up and running on your WordPress site, you’ve got three options:
- Use the Site Icon feature
- Install a favicon plugin
- Upload the new favicon yourself
Let’s break down each method in more detail.
1. Use the site icon feature.
As of WordPress version 4.3, the content management system (CMS) includes a Site Icon function that enables favicons. Simply prepare your image file — which can be a .jpeg, .ico, .gif or .png file — and head to the Administration page of your WordPress Site.
Next, click on “Appearance” and then “Customize”, then click “Site Identity.” Now, click “Select Image” under the Site Icon subheading and upload the file you’ve prepared. You should see a screen like this:
If you like the favicon you’ve created, no further action is required. If not, you can easily remove the file or upload a new image.
2. Install a favicon plugin.
You can also use a plugin — such as Favicon by RealFaviconGenerator — to create and deploy your favicon. This must-have WordPress plugin not only lets you customize your favicon but also ensures that multiple versions are created to satisfy the requirements of different operating systems and device versions.
As long as the image you upload to the plugin is at least 70 x 70 pixels, the RealFaviconGenerator will take care of the rest.
3. Upload the new favicon yourself.
If you’d rather do the legwork yourself, you can create and upload your own favicon to your WordPress site.
First, create an image that’s at least 16 x 16 pixels and is saved as a .ico file. Then, use an FTP client to upload this file to the main folder of your current WordPress theme — typically the same place as your wp-admin and wp-content folders.
While this should display your favicon in most web browsers, some older browser versions will require you to edit WordPress header HTML code. The result? DIY favicons aren’t recommended unless you’re familiar with more technical WordPress functions.
Final Favicon Thoughts
While favicons only form a small part of your WordPress website build, they’re critical for website recognition. Consistent and clear favicons make it easy for visitors to remember your site and carry this mental connection across desktop, tablet, and mobile devices.
