WordPress Favicon Guide: How to Create and Change

Building a strong identity for your website is crucial when you’re trying to get it off the ground. You want your site to stand out from the others, and adding a custom WordPress favicon is a simple way to achieve that goal.

The following step-by-step guide will show you how to create and change your WordPress favicon. We’ll cover a couple of methods, including a simple approach for beginners and a slightly more complex alternative for those who want to change their site icon without a plugin.

As a webmaster, it helps to have a basic understanding of favicons and how they can benefit your website. We’ll provide a quick overview and explain why they’re so important before showing you how to create your own.

What is a favicon?

Website icons, or favicons, are those little graphics that web browsers display next to site titles in open tabs. They follow a website almost everywhere, from browser history and bookmarks to phone and tablet home screens. They’re kind of like profile pictures for websites.

Technically speaking, a favicon is, at the very least, a single image in a directory where all of your other website files live. And back in the day, a single image was plenty. But now that browsers and devices of all kinds are accessing and displaying your icon in many ways and at different sizes, site owners would be well advised to offer icons in multiple formats.

Don’t worry if you’re not a graphic designer or if you’re unfamiliar with the concept of image formats. The guide that follows will show you how to convert a single image into a WordPress favicon that is optimized for most use cases.

Why is it important?

Just like the cover photo on your Facebook page or the logo on your website, a favicon reinforces your brand. It also serves as a small visual indicator as visitors switch back and forth between browser tabs.

Some search engines are even showing them alongside search results now. And because search results can serve as first impressions to new visitors, your favicon is more important than ever.

WordPress Favicon in Search Results

If search engines continue down this path, your favicon could begin to play a critical role in your WordPress website SEO. That’s because any website element that is displayed alongside a search result will impact CTR, or click-through rate. And as click-through rates and visitor retention figures rise, your site is likely to climb even higher in search results.

How to Add a WordPress Favicon

In order to create a WordPress favicon in multiple formats and sizes, you’ll need a single large image to start with. The minimum size will depend on the approach you take to adding your icon. An image that is at least 512 x 512 pixels will work for all of the methods that follow.

There are many ways to resize your source image for favicon use. Programs like Photoshop, Illustrator, and GIMP will make quick work of the task. If you do not have access to these programs, you can turn to a web-based alternative like the free resizeimage.net service instead.

Prepare Your Image

Head to resizeimage.net to begin the image resize process. The website breaks the resize process down into seven very quick steps. Make sure you crop a square section from your image during step two and that you shrink your image to 512 x 512 pixels during step four.

Resizeimage.net Crop Tool

The resizeimage.net service and most professional design programs will allow you to export an image with a transparent background. Does your source image include a design element that is not a perfect square? And would the element remain visible on a background of any color? If so, consider saving your image with a transparent background. Otherwise, resizeimage.net and most software will allow you to place the element over a solid background before saving.

Now that you have a source image of the correct size, you’re ready to create or change your WordPress favicon. Choose the method that works best for you:

Method 1: Apply an Icon from the Customizer

WordPress simplifies many of the most common web publishing tasks, and the assignment of a good site icon is no exception. Webmasters who are running a modern WordPress theme can change their favicon from the platform’s built-in Customizer.

Start by logging into your WordPress control panel. Next, click or tap the “Customize” item in the admin menu’s Appearance submenu. Finally, from the Customizer, head to the Site Identity tab and locate the Site Icon section. Click or tap the “Select Image” button if you’ve not yet assigned an icon or the “Change Image” button if you have. You can also remove your icon completely if you previously applied one from this screen.

WordPress Site Icon in Customizer

Choosing to select or replace an image will reveal the contents of your Media Library. You can drag your source image to the library if you’ve not already uploaded it, or you can select the previously uploaded image if you have.

After uploading and selecting your image, click or tap the “Select” button in the Media Library popup then publish your Customizer changes. You may be asked to crop your image, but you can skip this step if your image is already 512 x 512 pixels. Your browser should now display your WordPress favicon as you navigate the front end or control panel of your website.

Method 2: Install the RealFaviconGenerator Plugin

There’s no doubt about it: the WordPress Customizer makes it really easy to add a favicon to your website. But if you want more out of your icon and don’t want to mess with any code, check out the RealFaviconGenerator plugin.

RealFaviconGenerator in Plugin Repository

The RFG plugin was developed by Philippe Bernard, and you can install it from the plugin repository for free. Once installed and activated, the plugin will add a Favicon item to your control panel’s Appearance submenu. Click or tap the item to visit the Favicon screen where you can create your icon.

Like the WordPress Customizer, the RFG plugin will ask you to select a source image or “master picture.” Again, you can select an existing Media Library item from here or upload your source image if you haven’t already.

Hit the “Generate favicon” button and you’ll be sent to the RealFaviconGenerator website where you can make adjustments to your icon’s many formats. This granular control is what sets RFG apart from the WordPress Customizer and alternatives like it.

RealFaviconGenerator iOS Preview

For instance, most solutions will reformat an otherwise exact copy of your WordPress favicon for the bookmarks that reside on a visitor’s mobile device. But because Apple and Android devices display them in different ways, you’ll usually want to tweak your icons just a tad for these environments.

The RFG website allows you to adjust your icon formats from a simple web-based editor. You can add spacing to formats that look better with it or apply a favicon background color to formats that require it. When you’ve finished tweaking your icon, hit the “Generate” button near the bottom of the website. You’ll be returned to your WordPress control panel and will be provided with a preview of your favicon’s many formats.

To get the most out of your WordPress favicon, consider removing your site icon from the Customizer and adding it with RealFaviconGenerator instead. In addition to the formats mentioned above, you can use the plugin to optimize your icon for the Windows 10 Start menu and the MacBook Touch Bar.

Method 3: Add a WordPress Favicon Without a Plugin

WordPress users hoping to reduce site overhead may prefer to add a WordPress favicon without a plugin. Fortunately for them, it is possible to generate icons of multiple formats from the RealFaviconGenerator website and to manually add the required HTML to a theme’s functions.php file.

This approach is for those that are comfortable handling code and making changes to child theme files. If any of this sounds intimidating, refer to the method above for a more straightforward but equally powerful solution.

To begin, head to the RealFaviconGenerator homepage, click or tap the “Select” button, then grab your 512 x 512 pixel image. Once your image has been uploaded, you’ll be directed to the same icon editor that was introduced in the previous method. Make adjustments as needed then hit the “Generate” button near the bottom of the RFG site.

It is at this point that you’ll be provided with custom HTML for your functions.php file. You should receive a download link for multiple icon files as well. Go ahead and download the ZIP file and copy the required HTML to your clipboard.

RFG Success Page

Next, you’ll want to expand the ZIP file you downloaded and upload everything inside to your website’s root directory. When finished, the files should sit in the same directory as your website’s WordPress folders. These include the wp-admin, wp-content, and wp-includes folders.

Finally, you’ll want to add the required HTML to the head tag of your child theme. You can do this by hooking into wp_head like so:

  function my_favicon(){

?>
<!-- replace the following icon HTML with your own -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="msapplication-TileColor" content="#21759b">
<meta name="theme-color" content="#ffffff">
<!-- end custom HTML -->
<?php

  }

  add_action('wp_head', 'my_favicon');

If you’re unable to make changes to your theme but would still like to add a WordPress favicon without a plugin, have a look at any documentation provided with your theme. Many theme developers will offer additional control panel screens where users can paste custom HTML for the head tag.

It’s also possible to add custom HTML to your website using a plugin like Header and Footer Scripts. But if the goal is to add a WordPress favicon without a plugin, trading one plugin for another defeats the purpose.

You can use the RFG favicon checker to test your changes. The tool will alert you of any missing formats and will provide you with icon previews for several devices and operating systems.

Favicon Design Ideas

By now, you hopefully have a better understanding of how to create a WordPress favicon and why you need one. But have you decided what yours will look like?

WordPress favicon design is important for many reasons. Your icon is a reflection of your brand or company, and when it is shown in search results, it can positively or negatively affect your website’s click-through rate.

If you have a logo of any kind, you should consider incorporating it into your favicon. That way, users can quickly spot your website when scanning several browser tabs or smartphone icons.

Unfortunately, not all logos make great icons. Your WordPress favicon will be displayed at large sizes in some contexts but at much smaller (almost microscopic) sizes in others. Therefore, your source image should be somewhat recognizable at almost any scale.

Amazon Favicon

If your logo is wide, it probably won’t work well since it will be cropped to a square. Instead, try to isolate a square-but-still-recognizable element from your logo. The Facebook “F” and the smiley Amazon “A” are great examples of isolated logo elements that work well as favicons.

Explore Icon Marketplaces

Are you without a logo? Or do you have one that simply won’t work within in the confines of an icon? Worry not!

Instead, search for royalty-free images that align with your company’s message or your website’s niche. For example, if you’ve chosen to build a school website with WordPress but your school doesn’t have a logo, consider an icon with any education-related imagery. An open book graphic or a graduation cap image might fit the bill.

Kingster WordPress Theme Favicon Example

Make sure you have permission to use any image that you’ve added to your favicon. Browse websites with free WordPress graphics if you’re on a budget, or explore GraphicRiver’s icon collections for premium alternatives. But don’t forget to review your graphic’s license terms before creating and publishing your icon.

Create a Text Favicon

Another option for those without a logo is to simply create a favicon from text. The favicon.io website offers this very feature (as well as a few others).

With this handy web app, you can convert one or more letters from your website title into an icon. You’ll be provided with a live preview as you adjust fonts, text sizes, and colors to better match your site.

Convert Text to WordPress Favicon io

Unlike the RealFaviconGenerator service, favicon.io does not offer a WordPress plugin of any kind just yet. You’ll need to upload icons and update your child theme’s functions.php file manually in order to publish your work. Review the third method outlined above for detailed instructions.

Frequently Asked Questions

You converted a source image or text into a winning site icon. You even made adjustments to it in an effort to optimize it for a variety of devices and environments. But now your icon isn’t working at all. What gives?

You’ll find answers to questions like this one and many others ahead. Most of these tips and tricks apply to favicons that are served from any website (not just WordPress sites).

What is the difference between a WordPress site icon and a favicon?

The WordPress control panel makes reference to a site icon, while other services will mention your website’s favicon. Both terms refer to the same element. Your WordPress site icon or favicon is a small graphic that represents your website in browser tabs and in bookmarks, and you can apply the icon from the platform’s Customizer, with a plugin, or with a combination of image files and custom HTML.

The WordPress team probably chose to use the “site icon” term throughout the platform’s control panel because it’s more self-explanatory. But rest assured, whether your tool of choice refers to a site icon or a favicon, it’s targeting the same element.

Why is my favicon missing or not showing up?

If your new favicon goes missing, start by opening an incognito or private tab in your browser of choice. Accessing your website from a private tab should force a refresh of any website design elements that you’ve recently changed. If this doesn’t work, try visiting your website from another browser or device entirely.

Tests in private tabs and on other devices can help to identify caching issues on your phone or computer but not at the server level. If you’re running a caching plugin or your hosting provider caches your website, clear that cache then check your WordPress favicon again.

Empty WP Super Cache Screen

If you’ve confirmed that your icon problem isn’t cache related, you should make sure that only one tool or plugin is serving your icon. For instance, it’s possible to assign one from the Customizer and from a plugin like RealFaviconGenerator at the same time.

This conflict might not cause your icon to go missing, but it could force your website to serve the wrong one. Pick a preferred control panel feature or plugin then disable or remove your icon from all others.

How can I serve my WordPress favicon over HTTPS?

Websites running the RealFaviconGenerator plugin will automatically serve a favicon over HTTPS as long as the rest of the website is using the secure protocol. That’s because the plugin uses relative URLs for all site icons.

If switching to RFG isn’t an option, any WordPress favicon added from the Customizer should be served over HTTPS too. Again, you’ll need to supply an HTTPS website address from the General Settings screen in order for this to work. And in some cases, you may need to remove your site icon from the Customizer, publish your changes, then reapply the icon and publish again in order for the HTTPS switch to take effect.

What happens if I deactivate or delete the RealFaviconGenerator plugin?

Deactivating the RealFaviconGenerator plugin will remove your WordPress favicon. However, as long as you’ve not deleted the plugin, you can restore your icon as it was by simply reactivating.

Deleting the plugin will permanently remove your site icon from your website. This means that if you’d like to create another one, you’ll need to optimize your source image for multiple formats all over again.

This is one advantage of adding a WordPress favicon without a plugin. By generating the required HTML and files from the RFG site then adding these items to your website manually, you eliminate your reliance on any third-party extensions.

Final Thoughts

As you’ve just learned, there are a number of ways to create and change your WordPress favicon. Likewise, there are many devices and screen sizes to take into account when optimizing this crucial website design element.

If history is any indication, your WordPress site icon will only grow in prominence. Why not use the many tools at your disposal to equip your website with a well-crafted favicon?

Our blog posts and email updates contain occasional affiliate links to third-party products and services. This means that we stand to earn a commission on any sales delivered with the links, but we do not recommend products or services that we don't use and love.