How to Add a Favicon Icon to Your WordPress Site

Favicons help you establish a strong visual identity for your website, and improve the user experience. In this article, we’ll cover everything you need to know about favicons: what they are, how they’ll help you, best practices for using them, and more!

What is a Favicon?

You’ve probably seen favicons all over the web, sometimes without realizing it. They’re very small icons—usually 16 x 16 pixels—which sit next to a page’s title in your browser’s tab bar.

Favicons are so tiny that they may feel like inconsequential elements of your website. Admittedly, they play less of a role now than they did in the pre-Google Analytics era. At that point, they were practically the only reliable measure of web traffic, since they could help you tally up how many users had bookmarked a specific page.

However, favicons still serve as an important recognition of your brand within browsers, bookmarks, links bars, and sometimes even URL fields. They can also be used as your site’s shortcut icon on smart devices.

In short, if you care about user experience and want to maintain full control over your branding, you’ll want to employ a favicon on your website. Plus, it’s one of the easiest brand elements to implement!

Why Should You Add a Favicon to Your WordPress Site?

A favicon has a subtle but important role to play in your website’s branding. Site visitors will know exactly what site they are viewing when they see your favicon, reassuring them that they’re in the right place. Finding creative and subtle ways to infuse your branding into your site is not the easiest of tasks, but favicons are great for that purpose.

Favicons play another very important role on your site: improving the user experience. They spruce up a boring URL bar, and some browsers show favicons when you create a shortcut to the corresponding website on your desktop or mobile device.

One of the goals of every website should be to encourage visitors to make repeat visits. Favicons help you do just that by strengthening your brand and improving the user experience in WordPress.

How to Create a Favicon

There are several ways to create a favicon for your website. Traditionally, a favicon is a small version of your company’s logo, but not always. For example, you can hire a designer who can take your branding and vision and create a favicon that represents those elements. 

Alternatively, you can create your favicon by hand, using one of many favicon-building tools such as Favicon.cc and Faviconer. Platforms like Adobe Photoshop and GIMP are also useful for creating high-quality favicons.

Additionally, you can use a favicon generator plugin for WordPress. This kind of tool can also help you create some of the extra files needed to display favicons correctly on certain devices.

Actually creating a favicon isn’t too difficult, and will be a cakewalk for visual creatives in particular. However, it’s still within the reach of less artistic people, since the icon itself is so small and simple. The process can be boiled down to the following two steps.

Step 1: Choose a Suitable Size for Your Favicon

While favicons can be as small as 16 x 16 pixels, they can also be as large as 512 x 512 pixels. As such, you’ll need to make a decision about the devices and resolutions you’d like to cater to.

Here’s a quick breakdown of some recommended sizes for favicons:

• 16px: This is a general-use size for all browsers, and represents the minimum dimension.
• 32px: Several tools use this size, such as a new tab page in Internet Explorer, a taskbar button in Windows, and Safari’s Read Later sidebar.
• 57px: This represents the dimensions for a standard (i.e. non-Retina) iOS home screen.
• 72px: This size matches a standard iPad home screen icon.
• 114px: More modern Apple devices will want to use this size, as Retina displays take advantage of double-standard dimensions for crisp viewing.

Of course, it can make sense to create favicons for all of these sizes if you’re expecting visitors from many types of devices. However, you can also simply choose the sizes that correspond to the platforms you’re targeting, and forgo the rest.

Step 2: Design Your Favicon and Save It in an Appropriate Format

Actually creating your favicon, will be a little more time-consuming. The way you do this will be subjective, of course, and there are a lot of different methods you can employ.

If you don’t have a preferred tool you can use, we’ll talk about some easy-to-use options soon. In the meantime, you’ll want to keep in mind the following rules of thumb when creating your favicon:

• Keep the design simple, as it will often be displayed at such a tiny size that complex details will be lost.
• Consider your favicon an extension of your branding. In other words, use the same color schemes, fonts, and graphics as your main logo or other key branding elements.
• Create the largest size you need first, and then scale the favicon down as necessary.

Once you have your design ready, you’ll need to save it in the correct format. Many graphics packages enable you to use the .ico extension, and your base file should have the name favicon.ico. This file will be pulled when no other icon can be found. For favicons of different sizes, you can incorporate their dimensions into the file names.

Favicon-Building Tools

If you want to create a favicon quickly, there are a number of tools you can use. Let’s look at a few of the more popular and powerful options.

Favicon.cc is a leading favicon creator, and is very simple to use. You simply choose a color, paint each pixel, and then click on the Download button:

Faviconer is also a solid choice, which boasts a slightly nicer interface and better overall usability:

This tool is arguably more powerful than Favicon CC. You can create a higher-resolution file for modern displays, and even upload your own image.

Finally, there are also tools that let you convert a pre-existing image into a favicon—such as Dynamic Drive FavIcon Generator, and RealFaviconGenerator. Both offer flexibility when converting your favicon to different sizes, although we have to give an edge to the latter, based on its comprehensive options for sizing your files. 

Favicon Generator Plugin

Favicons need to be saved in a specific file type, one that’s not commonly used for web images. That’s why a Favicon generator can be useful to convert your images into ‘.ico’ files. This is a file type that’s specifically used for icons.

Depending on the generator, you can convert text, emojis, and other image types into the correct file type for favicon display. Our favorite plugin for favicon generation is Favicon by RealFaviconGenerator.

Favicon by RealFaviconGenerator enables you to create favicons that are adaptable to all platforms. In a matter of seconds, you can set up a favicon that works well with a variety of OSs and browsers.

Rather than just creating copies of images at different resolutions, this generator actually creates the specific sizes needed for each platform. That means you won’t have to figure out the latest compatibility guidelines for every device you might want your favicon to display on.

How to Add a Favicon to WordPress

There are several options to choose from if you’re looking for ways to add a favicon to your WordPress site:

• Use the WordPress Customizer. As long as the WordPress theme you are using has this option, you can easily add Site Icons via the Customizer. Just go to Appearance > Customize in your site’s dashboard, and then go to Site Identity > Site Icon.
• Upload a favicon image via your Theme Options Page. Not all themes come equipped with an options panel, but if yours does it’s another option that’s open to you. You’ll likely have to investigate your theme’s documentation or take a tour through its settings pages to find the upload option. 
• Use a plugin. If you are using a theme that doesn’t enable you to insert a favicon file via the Customizer, or that lacks a built-in options panel, you can insert a favicon via a plugin.

Let’s take a closer look at how exactly you can go about adding a favicon with these three methods. 

Using the WordPress Customizer

As we mentioned previously, if your theme supports favicons, you can navigate from your WordPress dashboard to Appearance > Customize > Site Identity > Site Icon: 

You’ll notice that there are some size recommendations here for your site icon. It’s best to create the image you want to use ahead of time, and make sure it is sized appropriately. 

Once you’ve done that, you can click on Select site icon and upload your file: 

Once it’s in the Media Library, you’ll get a preview of what it will look like in a browser tab or as a mobile app icon. You can change your icon again later if you wish by following the same steps. 

Uploading a Favicon via Your Theme Options Page

This method is heavily dependent on your individual theme. In updated versions of WordPress, themes are typically managed through the Customizer. Some exceptions to this include premium themes that have their own options pages. However, even if your theme has a separate options page, it’s likely you’ll be routed to the Customizer anyway.

For example, the WordPress Twenty Nineteen theme manages favicons through the Customizer, and doesn’t have a separate options page. However, the premium Avada theme creates a new menu item, and has a theme options page where you can add a favicon image directly: 

This option offers specific iPhone and iPad upload features as well. Just keep in mind that each theme will be a little different, so check the documentation or reach out to the developer if you’re unsure.

Using a WordPress Favicon Plugin

Using a plugin can be one of the most effective ways to manage favicons, regardless of your theme. This is especially true if you want to offer a more customized experience based on the user’s device.

One of the more popular plugins for this use is All In One Favicon: 

The free version that’s available in the WordPress Plugin Directory is pretty robust. It offers users both front- and back-end options, as well as general settings: 

This plugin also has an easy-to-navigate user interface where you can upload your images. All In One Favicon accepts three types of favicon images, including the GIF, ICO, and PNG formats. 

Favicon Not Showing Up?

If your favicon is not showing up on your WordPress website after you’ve added it, chances are you made one of these common mistakes:

• You used the wrong image format. Most modern browsers will support favicons in the GIF or PNG format. However, some older browsers will not. Most modern browsers will look first for the favicon.ico file in the root of your domain, so it’s best to stick with the ICO file format to avoid display errors.
• Your favicon is not appropriately adjusting for size. The ICO file format stores multiple versions of an image in different sizes and resolutions, to account for users viewing them on different devices. However, it is generally a good practice to upload multiple favicon.ico sizes. This will help to ensure the best user experience, no matter what device is being used. 

If you’re using a generator plugin and are still having issues, you can also check to make sure it’s updated and compatible with your current theme and version of WordPress.

WordPress Multisite Favicon

Adding a favicon to a single website is relatively easy. However, there is a little more involved if you want to add a different favicon to each individual site in a WordPress multisite network.

Although a bit more complex, it is possible to enable a unique favicon for each site in your multisite installation. If you are a developer, you can experiment with multiple child themes or change your multisite code, but the simplest way to add individual favicons is to use a plugin.

3 Useful for Multisite WordPress Favicons

When it comes to adding favicons to both individual and multisite WordPress installations, there are a few plugins to choose from. Let’s look at three of the best options.

1. All in One Favicon

All In One Favicon features a clean interface and several settings options. With this plugin, you can add favicons to both your user-facing site and your admin pages.  

This plugin supports the three image types mentioned previously. Animated GIFs are also supported, in addition to Apple Touch icons. This is a free plugin that has enough features to get you started with favicon management on your website. 

2. Fresh Favicon

This plugin is perfect for all your favicon needs, and is continuously updated as the technology evolves. With Fresh Favicon, you can simply upload images to the correct fields, and follow the on-screen instructions to get your favicon set up. 

Getting your favicons to work properly on popular touch-screen devices typically requires the coordination of a lot of different image files. The beauty of this plugin is that you can upload just one image, and it does the rest of the work for you.

Fresh Favicons is a premium plugin that you can get for $21. This includes future updates to the plugin as well.  

3. Branda Pro

Branda Pro is a full-service plugin that caters to web developers in need of full control over customization and branding.  You can try it free for seven days. To use it on unlimited sites, the subscription is offered at $49 per month. 

Along with adding single-site and multisite favicons, you can use Branda Pro to change or remove WordPress branding for a completely custom website experience. Therefore, this can be a helpful multipurpose plugin for agencies and busy freelancers. 

Bring Your Brand to Life with WP Engine

When it comes to creating a scalable website that will get your brand out there quickly, WordPress is by far the most popular Content Management System (CMS) available. Leveraging its power and capability—along with high-quality developer resources and WordPress hosting—means you can count on a site that’s built for speed and performance. 

Check out our WordPress hosting plans for access to a team of experts, and get started on your next project today!